From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../accessibility/understanding_wcag/index.html | 59 + .../understanding_wcag/perceivable/index.html | 359 +++ files/de/web/api/aescbcparams/index.html | 52 + files/de/web/api/animationevent/index.html | 190 ++ .../api/audiocontext/decodeaudiodata/index.html | 218 ++ files/de/web/api/audiocontext/index.html | 232 ++ files/de/web/api/audiodestinationnode/index.html | 141 + files/de/web/api/audionode/index.html | 191 ++ files/de/web/api/audiotrack/index.html | 86 + files/de/web/api/battery_status_api/index.html | 92 + files/de/web/api/blob/index.html | 245 ++ files/de/web/api/body/arraybuffer/index.html | 87 + files/de/web/api/body/blob/index.html | 73 + files/de/web/api/body/body/index.html | 86 + files/de/web/api/body/bodyused/index.html | 73 + files/de/web/api/body/formdata/index.html | 62 + files/de/web/api/body/index.html | 99 + files/de/web/api/body/json/index.html | 73 + files/de/web/api/body/text/index.html | 80 + files/de/web/api/cache/add/index.html | 106 + files/de/web/api/cache/addall/index.html | 212 ++ files/de/web/api/cache/index.html | 288 ++ .../api/canvasrenderingcontext2d/canvas/index.html | 56 + .../canvasrenderingcontext2d/fillrect/index.html | 177 ++ .../getimagedata/index.html | 142 + .../de/web/api/canvasrenderingcontext2d/index.html | 432 +++ .../ispointinpath/index.html | 206 ++ .../api/canvasrenderingcontext2d/scale/index.html | 223 ++ .../setlinedash/index.html | 179 ++ .../canvasrenderingcontext2d/textalign/index.html | 128 + files/de/web/api/childnode/index.html | 190 ++ files/de/web/api/childnode/remove/index.html | 97 + files/de/web/api/console/assert/index.html | 98 + files/de/web/api/console/clear/index.html | 49 + files/de/web/api/console/count/index.html | 103 + files/de/web/api/console/debug/index.html | 63 + files/de/web/api/console/dir/index.html | 56 + files/de/web/api/console/index.html | 296 ++ files/de/web/api/console/log/index.html | 180 ++ files/de/web/api/console/table/index.html | 214 ++ files/de/web/api/console/time/index.html | 56 + files/de/web/api/console/timeend/index.html | 57 + files/de/web/api/console/warn/index.html | 147 + files/de/web/api/crypto/index.html | 68 + files/de/web/api/css/escape/index.html | 79 + files/de/web/api/css/index.html | 90 + files/de/web/api/css_painting_api/guide/index.html | 534 ++++ files/de/web/api/css_painting_api/index.html | 199 ++ files/de/web/api/cssmediarule/index.html | 120 + files/de/web/api/csspagerule/index.html | 129 + files/de/web/api/cssrule/csstext/index.html | 31 + files/de/web/api/cssrule/index.html | 258 ++ .../api/customelementregistry/define/index.html | 241 ++ files/de/web/api/customelementregistry/index.html | 106 + .../web/api/dedicatedworkerglobalscope/index.html | 114 + .../message_event/index.html | 83 + files/de/web/api/document/adoptnode/index.html | 53 + files/de/web/api/document/alinkcolor/index.html | 30 + files/de/web/api/document/body/index.html | 140 + .../de/web/api/document/createattribute/index.html | 76 + .../api/document/createdocumentfragment/index.html | 137 + files/de/web/api/document/createelement/index.html | 153 + .../de/web/api/document/createelementns/index.html | 175 + .../de/web/api/document/createtextnode/index.html | 131 + .../web/api/document/createtreewalker/index.html | 241 ++ files/de/web/api/document/dir/index.html | 95 + files/de/web/api/document/document/index.html | 45 + .../de/web/api/document/documentelement/index.html | 42 + .../api/document/fullscreenchange_event/index.html | 87 + .../de/web/api/document/getelementbyid/index.html | 131 + .../api/document/getelementsbyclassname/index.html | 105 + files/de/web/api/document/head/index.html | 73 + files/de/web/api/document/importnode/index.html | 93 + files/de/web/api/document/index.html | 405 +++ files/de/web/api/document/queryselector/index.html | 129 + .../web/api/document/queryselectorall/index.html | 172 + files/de/web/api/document/readystate/index.html | 111 + files/de/web/api/document/referrer/index.html | 46 + .../de/web/api/document/registerelement/index.html | 113 + files/de/web/api/document/title/index.html | 70 + files/de/web/api/document/url/index.html | 19 + files/de/web/api/document/width/index.html | 45 + files/de/web/api/document/write/index.html | 85 + files/de/web/api/document/writeln/index.html | 60 + files/de/web/api/documentfragment/index.html | 258 ++ files/de/web/api/domerror/index.html | 189 ++ files/de/web/api/domparser/index.html | 181 ++ files/de/web/api/domstring/index.html | 57 + files/de/web/api/domtokenlist/add/index.html | 73 + files/de/web/api/domtokenlist/index.html | 125 + files/de/web/api/dragevent/index.html | 239 ++ files/de/web/api/element/classlist/index.html | 300 ++ files/de/web/api/element/classname/index.html | 128 + .../api/element/getboundingclientrect/index.html | 62 + files/de/web/api/element/hasattribute/index.html | 129 + files/de/web/api/element/index.html | 522 +++ files/de/web/api/element/innerhtml/index.html | 204 ++ .../web/api/element/insertadjacenthtml/index.html | 144 + files/de/web/api/element/queryselector/index.html | 89 + .../de/web/api/element/queryselectorall/index.html | 206 ++ .../de/web/api/element/removeattribute/index.html | 42 + .../web/api/element/requestfullscreen/index.html | 118 + files/de/web/api/element/scrollintoview/index.html | 85 + files/de/web/api/element/scrollleft/index.html | 83 + files/de/web/api/element/scrollwidth/index.html | 49 + files/de/web/api/element/setattribute/index.html | 48 + files/de/web/api/event/bubbles/index.html | 59 + files/de/web/api/event/event/index.html | 72 + files/de/web/api/event/index.html | 253 ++ files/de/web/api/eventlistener/index.html | 48 + files/de/web/api/eventsource/index.html | 126 + files/de/web/api/eventtarget/index.html | 174 + files/de/web/api/federatedcredential/index.html | 125 + files/de/web/api/fetch_api/index.html | 84 + files/de/web/api/file/filename/index.html | 35 + files/de/web/api/file/filesize/index.html | 36 + files/de/web/api/file/getastext/index.html | 78 + files/de/web/api/file/index.html | 146 + files/de/web/api/file/name/index.html | 104 + files/de/web/api/file/typ/index.html | 65 + .../index.html | 512 +++ files/de/web/api/filereader/index.html | 153 + files/de/web/api/filereader/onload/index.html | 24 + files/de/web/api/formdata/formdata/index.html | 184 ++ files/de/web/api/formdata/get/index.html | 145 + files/de/web/api/formdata/getall/index.html | 74 + files/de/web/api/formdata/index.html | 80 + files/de/web/api/fullscreenoptions/index.html | 43 + files/de/web/api/gainnode/index.html | 134 + files/de/web/api/gamepad_api/index.html | 95 + .../api/geolocation/getcurrentposition/index.html | 88 + files/de/web/api/geolocation/index.html | 71 + files/de/web/api/globaleventhandlers/index.html | 540 ++++ .../web/api/globaleventhandlers/onclick/index.html | 88 + .../web/api/globaleventhandlers/onload/index.html | 150 + .../api/globaleventhandlers/onresize/index.html | 77 + files/de/web/api/htmlcanvaselement/index.html | 242 ++ .../web/api/htmlcanvaselement/todataurl/index.html | 206 ++ .../webglcontextcreationerror_event/index.html | 132 + .../webglcontextlost_event/index.html | 133 + .../webglcontextrestored_event/index.html | 135 + files/de/web/api/htmlcollection/index.html | 70 + .../de/web/api/htmlformelement/elements/index.html | 46 + files/de/web/api/htmlformelement/index.html | 260 ++ .../api/htmlformelement/submit_event/index.html | 76 + files/de/web/api/htmlinputelement/index.html | 435 +++ .../de/web/api/htmlinputelement/select/index.html | 84 + .../api/htmlslotelement/assignednodes/index.html | 66 + files/de/web/api/htmlslotelement/index.html | 67 + .../api/htmltableelement/createcaption/index.html | 75 + files/de/web/api/htmltableelement/index.html | 132 + .../web/api/htmltableelement/insertrow/index.html | 122 + files/de/web/api/htmlunknownelement/index.html | 56 + files/de/web/api/index.html | 14 + .../index.html | 131 + .../grundkonzepte_hinter_indexeddb/index.html | 194 ++ files/de/web/api/indexeddb_api/index.html | 252 ++ .../indexeddb_api/indexeddb_verwenden/index.html | 1180 +++++++ files/de/web/api/keyboardevent/altkey/index.html | 118 + .../api/keyboardevent/getmodifierstate/index.html | 247 ++ files/de/web/api/keyboardevent/index.html | 458 +++ files/de/web/api/keyboardevent/keycode/index.html | 3185 +++++++++++++++++++ .../de/web/api/l10n.language.direction/index.html | 63 + files/de/web/api/linkstyle/index.html | 56 + files/de/web/api/messageevent/index.html | 205 ++ files/de/web/api/mouseevent/index.html | 323 ++ files/de/web/api/mozmobileconnection/index.html | 134 + .../selectnetworkautomatically/index.html | 57 + files/de/web/api/mutationobserver/index.html | 287 ++ files/de/web/api/navigator/index.html | 122 + .../navigator/registerprotocolhandler/index.html | 170 + .../webbasierte_protokoll-handler/index.html | 127 + files/de/web/api/navigator/sendbeacon/index.html | 144 + files/de/web/api/navigator/vibrate/index.html | 107 + files/de/web/api/navigatoronline/index.html | 127 + files/de/web/api/navigatoronline/online/index.html | 190 ++ .../online_and_offline_events/index.html | 120 + files/de/web/api/node/appendchild/index.html | 144 + files/de/web/api/node/childnodes/index.html | 70 + files/de/web/api/node/clonenode/index.html | 135 + files/de/web/api/node/firstchild/index.html | 62 + files/de/web/api/node/haschildnodes/index.html | 120 + files/de/web/api/node/index.html | 365 +++ files/de/web/api/node/innertext/index.html | 90 + files/de/web/api/node/lastchild/index.html | 41 + files/de/web/api/node/nextsibling/index.html | 60 + files/de/web/api/node/nodevalue/index.html | 88 + files/de/web/api/node/normalize/index.html | 49 + files/de/web/api/node/parentnode/index.html | 79 + files/de/web/api/node/previoussibling/index.html | 69 + files/de/web/api/node/removechild/index.html | 82 + files/de/web/api/node/replacechild/index.html | 61 + files/de/web/api/node/setuserdata/index.html | 121 + files/de/web/api/node/textcontent/index.html | 69 + files/de/web/api/notification/index.html | 265 ++ .../de/web/api/notification/permission/index.html | 187 ++ files/de/web/api/page_visibility_api/index.html | 189 ++ files/de/web/api/performance/index.html | 135 + files/de/web/api/performance/now/index.html | 164 + files/de/web/api/push_api/index.html | 180 ++ files/de/web/api/pushmanager/index.html | 161 + files/de/web/api/pushmanager/subscribe/index.html | 143 + files/de/web/api/range/index.html | 254 ++ files/de/web/api/range/range/index.html | 95 + files/de/web/api/readablestream/index.html | 101 + files/de/web/api/renderingcontext/index.html | 41 + files/de/web/api/response/index.html | 120 + files/de/web/api/response/response/index.html | 75 + files/de/web/api/rtcicecandidate/index.html | 121 + files/de/web/api/rtcpeerconnection/index.html | 379 +++ .../web/api/rtcrtptransceiver/direction/index.html | 82 + files/de/web/api/rtcrtptransceiver/index.html | 85 + files/de/web/api/service_worker_api/index.html | 280 ++ .../using_service_workers/index.html | 507 +++ files/de/web/api/serviceworker/index.html | 103 + files/de/web/api/serviceworkercontainer/index.html | 158 + .../api/serviceworkercontainer/register/index.html | 122 + files/de/web/api/sharedworker/index.html | 117 + files/de/web/api/speechsynthesis/index.html | 134 + files/de/web/api/storage/clear/index.html | 61 + files/de/web/api/storage/getitem/index.html | 78 + files/de/web/api/storage/index.html | 161 + files/de/web/api/storage/key/index.html | 75 + files/de/web/api/storage/length/index.html | 63 + files/de/web/api/storage/removeitem/index.html | 68 + files/de/web/api/storage/setitem/index.html | 146 + files/de/web/api/transferable/index.html | 122 + files/de/web/api/url/createobjecturl/index.html | 139 + files/de/web/api/url/index.html | 222 ++ files/de/web/api/url/protocol/index.html | 61 + files/de/web/api/urlsearchparams/index.html | 211 ++ files/de/web/api/usvstring/index.html | 42 + files/de/web/api/vollbild_api/index.html | 305 ++ files/de/web/api/web_animations_api/index.html | 99 + files/de/web/api/web_storage_api/index.html | 142 + files/de/web/api/web_workers_api/index.html | 226 ++ files/de/web/api/webgl_api/index.html | 258 ++ .../3d-objekte_mit_webgl_erstellen/index.html | 126 + .../animierte_texturen_in_webgl/index.html | 89 + .../tutorial/beleuchtung_in_webgl/index.html | 172 + .../einf\303\274hrung_in_webgl/index.html" | 73 + .../index.html" | 97 + .../index.html" | 238 ++ files/de/web/api/webgl_api/tutorial/index.html | 40 + .../objekte_mit_webgl_animieren/index.html | 118 + .../texturen_in_webgl_verwenden/index.html | 159 + files/de/web/api/webglactiveinfo/index.html | 129 + files/de/web/api/webglprogram/index.html | 166 + .../api/webglrenderingcontext/canvas/index.html | 74 + .../getactiveattrib/index.html | 115 + .../getattriblocation/index.html | 65 + files/de/web/api/webglrenderingcontext/index.html | 441 +++ files/de/web/api/websocket/binarytype/index.html | 56 + files/de/web/api/websocket/close/index.html | 64 + files/de/web/api/websocket/extensions/index.html | 49 + files/de/web/api/websocket/index.html | 314 ++ files/de/web/api/websocket/onclose/index.html | 45 + files/de/web/api/websocket/protocol/index.html | 51 + files/de/web/api/websocket/readystate/index.html | 77 + files/de/web/api/websocket/url/index.html | 47 + files/de/web/api/webxr_device_api/index.html | 298 ++ files/de/web/api/window/alert/index.html | 72 + .../de/web/api/window/applicationcache/index.html | 33 + .../web/api/window/cancelanimationframe/index.html | 72 + files/de/web/api/window/close/index.html | 78 + files/de/web/api/window/confirm/index.html | 73 + files/de/web/api/window/console/index.html | 56 + files/de/web/api/window/dump/index.html | 42 + files/de/web/api/window/history/index.html | 56 + files/de/web/api/window/index.html | 384 +++ files/de/web/api/window/length/index.html | 51 + files/de/web/api/window/localstorage/index.html | 81 + files/de/web/api/window/name/index.html | 57 + files/de/web/api/window/navigator/index.html | 98 + files/de/web/api/window/ondevicemotion/index.html | 56 + files/de/web/api/window/opendialog/index.html | 90 + files/de/web/api/window/opener/index.html | 28 + files/de/web/api/window/performance/index.html | 96 + files/de/web/api/window/print/index.html | 50 + files/de/web/api/window/prompt/index.html | 79 + files/de/web/api/window/screenx/index.html | 98 + files/de/web/api/window/scroll/index.html | 56 + files/de/web/api/window/scrollto/index.html | 75 + files/de/web/api/window/sessionstorage/index.html | 90 + files/de/web/api/window/stop/index.html | 38 + files/de/web/api/windowbase64/btoa/index.html | 145 + files/de/web/api/windowbase64/index.html | 120 + files/de/web/api/windoweventhandlers/index.html | 189 ++ .../windoweventhandlers/onafterprint/index.html | 93 + .../windoweventhandlers/onhashchange/index.html | 162 + .../api/windoweventhandlers/onpopstate/index.html | 57 + files/de/web/api/windowtimers/index.html | 124 + .../de/web/api/windowtimers/settimeout/index.html | 329 ++ files/de/web/api/worker/index.html | 191 ++ files/de/web/api/xmlhttprequest/index.html | 710 +++++ .../xmlhttprequest/using_xmlhttprequest/index.html | 789 +++++ .../index.html | 232 ++ .../aria/aria_live_regionen/index.html | 89 + .../aria/aria_techniken/index.html | 168 + files/de/web/barrierefreiheit/aria/index.html | 137 + files/de/web/barrierefreiheit/index.html | 78 + .../index.html | 145 + .../web/barrierefreiheit/webentwicklung/index.html | 58 + 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 + .../web/demos_of_open_web_technologies/index.html | 154 + files/de/web/events/change/index.html | 109 + files/de/web/events/domcontentloaded/index.html | 156 + files/de/web/events/index.html | 1981 ++++++++++++ files/de/web/events/load/index.html | 88 + files/de/web/events/readystatechange/index.html | 86 + files/de/web/guide/ajax/erste_schritte/index.html | 338 ++ files/de/web/guide/ajax/index.html | 83 + .../web/guide/css/getting_started/farbe/index.html | 332 ++ files/de/web/guide/css/getting_started/index.html | 59 + .../kaskadierung_und_vererbung/index.html | 159 + .../css/getting_started/lesbares_css/index.html | 165 + .../css/getting_started/selektoren/index.html | 429 +++ .../css/getting_started/textstyles/index.html | 151 + .../css/getting_started/was_ist_css/index.html | 112 + .../css/getting_started/why_use_css/index.html | 105 + .../wie_css_funktioniert/index.html | 122 + .../guide/css/scaling_background_images/index.html | 111 + files/de/web/guide/dom/index.html | 21 + .../manipulating_the_browser_history/index.html | 227 ++ .../creating_and_triggering_events/index.html | 135 + files/de/web/guide/events/index.html | 53 + files/de/web/guide/graphics/index.html | 51 + .../canvas_tutorial/advanced_animations/index.html | 380 +++ .../applying_styles_and_colors/index.html | 785 +++++ .../canvas_tutorial/basic_animations/index.html | 307 ++ .../guide/html/canvas_tutorial/bilder/index.html | 324 ++ .../canvas_tutorial/canvas_optimieren/index.html | 118 + .../html/canvas_tutorial/drawing_text/index.html | 165 + .../canvas_tutorial/formen_zeichnen/index.html | 453 +++ .../html/canvas_tutorial/grundlagen/index.html | 154 + files/de/web/guide/html/canvas_tutorial/index.html | 51 + .../de/web/guide/html/content_editable/index.html | 52 + .../de/web/guide/html/inhaltskategorien/index.html | 153 + .../index.html | 351 +++ files/de/web/guide/index.html | 28 + files/de/web/html/applying_color/index.html | 498 +++ files/de/web/html/attributes/index.html | 662 ++++ files/de/web/html/block-level_elemente/index.html | 108 + files/de/web/html/canvas/index.html | 120 + files/de/web/html/element/a/index.html | 361 +++ files/de/web/html/element/abbr/index.html | 202 ++ files/de/web/html/element/acronym/index.html | 78 + files/de/web/html/element/address/index.html | 163 + files/de/web/html/element/applet/index.html | 139 + files/de/web/html/element/area/index.html | 174 + files/de/web/html/element/article/index.html | 146 + files/de/web/html/element/aside/index.html | 107 + files/de/web/html/element/b/index.html | 83 + files/de/web/html/element/base/index.html | 170 + files/de/web/html/element/bdi/index.html | 138 + files/de/web/html/element/bdo/index.html | 153 + files/de/web/html/element/bgsound/index.html | 96 + files/de/web/html/element/big/index.html | 89 + files/de/web/html/element/blink/index.html | 87 + files/de/web/html/element/blockquote/index.html | 156 + files/de/web/html/element/body/index.html | 230 ++ files/de/web/html/element/br/index.html | 130 + files/de/web/html/element/canvas/index.html | 110 + files/de/web/html/element/caption/index.html | 151 + files/de/web/html/element/center/index.html | 41 + files/de/web/html/element/cite/index.html | 152 + files/de/web/html/element/code/index.html | 147 + files/de/web/html/element/col/index.html | 240 ++ files/de/web/html/element/data/index.html | 90 + files/de/web/html/element/datalist/index.html | 106 + files/de/web/html/element/dd/index.html | 140 + files/de/web/html/element/del/index.html | 124 + files/de/web/html/element/details/index.html | 97 + files/de/web/html/element/dialog/index.html | 206 ++ files/de/web/html/element/dir/index.html | 44 + files/de/web/html/element/div/index.html | 117 + files/de/web/html/element/dl/index.html | 222 ++ files/de/web/html/element/dt/index.html | 135 + files/de/web/html/element/em/index.html | 152 + files/de/web/html/element/embed/index.html | 99 + files/de/web/html/element/fieldset/index.html | 489 +++ files/de/web/html/element/font/index.html | 53 + files/de/web/html/element/footer/index.html | 99 + files/de/web/html/element/frame/index.html | 52 + files/de/web/html/element/h1-h6/index.html | 72 + files/de/web/html/element/head/index.html | 28 + files/de/web/html/element/header/index.html | 143 + files/de/web/html/element/hr/index.html | 57 + files/de/web/html/element/html/index.html | 157 + files/de/web/html/element/i/index.html | 156 + files/de/web/html/element/iframe/index.html | 44 + files/de/web/html/element/image/index.html | 48 + files/de/web/html/element/img/index.html | 348 ++ files/de/web/html/element/index.html | 249 ++ files/de/web/html/element/input/button/index.html | 246 ++ .../de/web/html/element/input/checkbox/index.html | 352 +++ files/de/web/html/element/input/index.html | 1411 +++++++++ files/de/web/html/element/ins/index.html | 122 + files/de/web/html/element/legend/index.html | 97 + files/de/web/html/element/li/index.html | 193 ++ files/de/web/html/element/link/index.html | 361 +++ files/de/web/html/element/main/index.html | 175 + files/de/web/html/element/map/index.html | 116 + files/de/web/html/element/marquee/index.html | 216 ++ files/de/web/html/element/nav/index.html | 106 + files/de/web/html/element/noembed/index.html | 41 + files/de/web/html/element/noscript/index.html | 103 + files/de/web/html/element/object/index.html | 176 ++ files/de/web/html/element/ol/index.html | 157 + files/de/web/html/element/optgroup/index.html | 161 + files/de/web/html/element/option/index.html | 155 + files/de/web/html/element/p/index.html | 155 + files/de/web/html/element/picture/index.html | 103 + files/de/web/html/element/pre/index.html | 37 + files/de/web/html/element/progress/index.html | 175 + files/de/web/html/element/q/index.html | 155 + files/de/web/html/element/s/index.html | 70 + files/de/web/html/element/section/index.html | 170 + files/de/web/html/element/shadow/index.html | 159 + files/de/web/html/element/strong/index.html | 49 + files/de/web/html/element/summary/index.html | 106 + files/de/web/html/element/table/index.html | 448 +++ files/de/web/html/element/td/index.html | 218 ++ files/de/web/html/element/template/index.html | 186 ++ files/de/web/html/element/th/index.html | 297 ++ files/de/web/html/element/time/index.html | 162 + files/de/web/html/element/title/index.html | 81 + files/de/web/html/element/tr/index.html | 230 ++ files/de/web/html/element/tt/index.html | 52 + files/de/web/html/element/u/index.html | 68 + files/de/web/html/element/ul/index.html | 123 + files/de/web/html/element/var/index.html | 46 + files/de/web/html/element/video/index.html | 379 +++ .../html/globale_attribute/accesskey/index.html | 116 + .../globale_attribute/autocapitalize/index.html | 46 + .../de/web/html/globale_attribute/class/index.html | 109 + .../globale_attribute/contenteditable/index.html | 114 + files/de/web/html/globale_attribute/dir/index.html | 85 + .../html/globale_attribute/draggable/index.html | 104 + .../web/html/globale_attribute/dropzone/index.html | 45 + .../web/html/globale_attribute/hidden/index.html | 56 + files/de/web/html/globale_attribute/id/index.html | 109 + files/de/web/html/globale_attribute/index.html | 205 ++ .../html/globale_attribute/inputmode/index.html | 76 + files/de/web/html/globale_attribute/is/index.html | 62 + .../html/globale_attribute/kontextmenu/index.html | 169 + .../de/web/html/globale_attribute/lang/index.html | 60 + .../de/web/html/globale_attribute/style/index.html | 107 + .../web/html/globale_attribute/tabindex/index.html | 130 + .../de/web/html/globale_attribute/title/index.html | 164 + .../html/globale_attribute/translate/index.html | 30 + .../web/html/html5/html5_element_list/index.html | 586 ++++ files/de/web/html/html5/index.html | 174 + files/de/web/html/index.html | 100 + files/de/web/html/inline_elemente/index.html | 32 + files/de/web/html/referenz/index.html | 29 + .../html/using_the_application_cache/index.html | 375 +++ .../identifying_resources_on_the_web/index.html | 188 ++ files/de/web/http/basics_of_http/index.html | 51 + files/de/web/http/caching_faq/index.html | 73 + .../http/cors/errors/corsdidnotsucceed/index.html | 34 + .../index.html | 37 + .../cors/errors/corsfehltquelleerlauben/index.html | 59 + .../http/cors/errors/corsrequestnothttp/index.html | 25 + files/de/web/http/cors/errors/index.html | 76 + files/de/web/http/cors/index.html | 567 ++++ files/de/web/http/headers/accept/index.html | 96 + files/de/web/http/headers/age/index.html | 80 + files/de/web/http/headers/cache-control/index.html | 176 ++ files/de/web/http/headers/connection/index.html | 48 + files/de/web/http/headers/cookie/index.html | 72 + files/de/web/http/headers/dnt/index.html | 88 + files/de/web/http/headers/expect-ct/index.html | 113 + files/de/web/http/headers/expires/index.html | 75 + files/de/web/http/headers/index.html | 441 +++ files/de/web/http/headers/referer/index.html | 87 + files/de/web/http/headers/server/index.html | 69 + files/de/web/http/headers/set-cookie/index.html | 225 ++ .../http/headers/set-cookie/samesite/index.html | 135 + files/de/web/http/headers/tk/index.html | 94 + files/de/web/http/headers/user-agent/index.html | 139 + .../http/headers/x-content-type-options/index.html | 93 + .../de/web/http/headers/x-frame-options/index.html | 131 + files/de/web/http/index.html | 366 +++ files/de/web/http/methods/connect/index.html | 84 + files/de/web/http/methods/delete/index.html | 98 + files/de/web/http/methods/get/index.html | 75 + files/de/web/http/methods/index.html | 75 + files/de/web/http/status/100/index.html | 46 + files/de/web/http/status/200/index.html | 57 + files/de/web/http/status/201/index.html | 43 + files/de/web/http/status/302/index.html | 54 + files/de/web/http/status/304/index.html | 61 + files/de/web/http/status/400/index.html | 36 + files/de/web/http/status/401/index.html | 57 + files/de/web/http/status/403/index.html | 55 + files/de/web/http/status/404/index.html | 62 + files/de/web/http/status/409/index.html | 40 + files/de/web/http/status/410/index.html | 53 + files/de/web/http/status/414/index.html | 47 + files/de/web/http/status/418/index.html | 47 + files/de/web/http/status/500/index.html | 42 + files/de/web/http/status/503/index.html | 55 + files/de/web/http/status/504/index.html | 51 + files/de/web/http/status/505/index.html | 39 + files/de/web/http/status/511/index.html | 43 + files/de/web/http/status/index.html | 175 + files/de/web/index.html | 102 + .../de/web/javascript/about_javascript/index.html | 61 + .../index.html" | 340 ++ files/de/web/javascript/closures/index.html | 471 +++ files/de/web/javascript/datenstrukturen/index.html | 271 ++ .../index.html | 909 ++++++ .../index.html" | 411 +++ files/de/web/javascript/eventloop/index.html | 138 + .../guide/ausdruecke_und_operatoren/index.html | 965 ++++++ .../javascript/guide/einf\303\274hrung/index.html" | 140 + .../guide/feinheiten_des_objektmodells/index.html | 721 +++++ .../de/web/javascript/guide/funktionen/index.html | 657 ++++ .../guide/grammatik_und_typen/index.html | 699 ++++ files/de/web/javascript/guide/index.html | 130 + .../guide/indexed_collections/index.html | 448 +++ .../javascript/guide/keyed_collections/index.html | 157 + .../kontrollfluss_und_fehlerbehandlung/index.html | 430 +++ .../javascript/guide/meta_programming/index.html | 265 ++ .../guide/mit_objekten_arbeiten/index.html | 506 +++ files/de/web/javascript/guide/modules/index.html | 446 +++ .../javascript/guide/numbers_and_dates/index.html | 378 +++ .../guide/regular_expressions/index.html | 625 ++++ .../guide/schleifen_und_iterationen/index.html | 337 ++ .../javascript/guide/textformatierung/index.html | 257 ++ .../web/javascript/guide/using_promises/index.html | 341 ++ files/de/web/javascript/index.html | 120 + .../inheritance_and_the_prototype_chain/index.html | 300 ++ .../index.html | 389 +++ .../javascript_technologieuebersicht/index.html | 87 + .../web/javascript/language_resources/index.html | 142 + files/de/web/javascript/reference/about/index.html | 52 + .../reference/fehler/already_has_pragma/index.html | 42 + .../fehler/array_sort_argument/index.html | 47 + .../reference/fehler/bad_octal/index.html | 54 + .../reference/fehler/bad_radix/index.html | 61 + .../reference/fehler/bad_regexp_flag/index.html | 105 + .../fehler/bad_return_or_yield/index.html | 55 + .../fehler/called_on_incompatible_type/index.html | 64 + .../index.html | 60 + .../fehler/cant_access_property/index.html | 59 + .../index.html | 64 + .../reference/fehler/cant_delete/index.html | 58 + .../fehler/cant_redefine_property/index.html | 51 + .../fehler/cyclic_object_value/index.html | 67 + .../reference/fehler/dead_object/index.html | 50 + .../fehler/delete_in_strict_mode/index.html | 70 + .../index.html | 75 + .../deprecated_expression_closures/index.html | 78 + .../reference/fehler/deprecated_octal/index.html | 67 + .../fehler/deprecated_source_map_pragma/index.html | 58 + .../fehler/deprecated_string_generics/index.html | 104 + .../fehler/deprecated_tolocaleformat/index.html | 90 + .../reference/fehler/equal_as_assign/index.html | 54 + .../for-each-in_loops_are_deprecated/index.html | 168 + .../reference/fehler/getter_only/index.html | 83 + .../fehler/identifier_after_number/index.html | 53 + .../reference/fehler/illegal_character/index.html | 80 + .../fehler/in_operator_no_object/index.html | 72 + .../de/web/javascript/reference/fehler/index.html | 29 + .../fehler/invalid_array_length/index.html | 77 + .../invalid_assignment_left-hand_side/index.html | 53 + .../fehler/invalid_const_assignment/index.html | 90 + .../reference/fehler/invalid_date/index.html | 54 + .../fehler/invalid_for-in_initializer/index.html | 74 + .../fehler/invalid_for-of_initializer/index.html | 63 + .../index.html | 62 + .../reference/fehler/is_not_iterable/index.html | 103 + .../reference/fehler/json_bad_parse/index.html | 112 + .../fehler/malformed_formal_parameter/index.html | 61 + .../reference/fehler/malformed_uri/index.html | 66 + .../fehler/missing_bracket_after_list/index.html | 56 + .../missing_colon_after_property_id/index.html | 77 + .../missing_curly_after_function_body/index.html | 67 + .../missing_curly_after_property_list/index.html | 51 + .../fehler/missing_formal_parameter/index.html | 80 + .../fehler/missing_initializer_in_const/index.html | 58 + .../missing_name_after_dot_operator/index.html | 68 + .../index.html | 42 + .../missing_parenthesis_after_condition/index.html | 70 + .../missing_semicolon_before_statement/index.html | 67 + .../fehler/more_arguments_needed/index.html | 48 + .../fehler/negative_repetition_count/index.html | 44 + .../reference/fehler/no_non-null_object/index.html | 66 + .../reference/fehler/no_properties/index.html | 40 + .../reference/fehler/no_variable_name/index.html | 84 + .../non_configurable_array_element/index.html | 83 + .../reference/fehler/not_a_codepoint/index.html | 55 + .../reference/fehler/not_a_constructor/index.html | 97 + .../reference/fehler/not_a_function/index.html | 124 + .../reference/fehler/not_defined/index.html | 70 + .../reference/fehler/precision_range/index.html | 96 + .../fehler/property_access_denied/index.html | 47 + .../reference/fehler/read-only/index.html | 78 + .../fehler/redeclared_parameter/index.html | 61 + .../index.html | 88 + .../fehler/reserved_identifier/index.html | 80 + .../fehler/resulting_string_too_large/index.html | 49 + .../reference/fehler/stmt_after_return/index.html | 77 + .../fehler/strict_non_simple_params/index.html | 111 + .../reference/fehler/too_much_recursion/index.html | 54 + .../typed_array_invalid_arguments/index.html | 77 + .../reference/fehler/undeclared_var/index.html | 67 + .../reference/fehler/undefined_prop/index.html | 63 + .../reference/fehler/unexpected_token/index.html | 47 + .../reference/fehler/unexpected_type/index.html | 67 + .../fehler/unnamed_function_statement/index.html | 115 + .../fehler/unterminated_string_literal/index.html | 67 + .../reference/fehler/var_hides_argument/index.html | 56 + .../functions/arguments/@@iterator/index.html | 78 + .../functions/arguments/callee/index.html | 157 + .../reference/functions/arguments/index.html | 223 ++ .../functions/arguments/length/index.html | 87 + .../functions/default_parameters/index.html | 223 ++ .../javascript/reference/functions/get/index.html | 174 + .../web/javascript/reference/functions/index.html | 594 ++++ .../functions/methoden_definitionen/index.html | 230 ++ .../reference/functions/pfeilfunktionen/index.html | 360 +++ .../reference/functions/rest_parameter/index.html | 167 + .../javascript/reference/functions/set/index.html | 149 + .../global_objects/array/@@iterator/index.html | 89 + .../global_objects/array/@@species/index.html | 76 + .../global_objects/array/@@unscopables/index.html | 76 + .../global_objects/array/concat/index.html | 156 + .../global_objects/array/copywithin/index.html | 187 ++ .../global_objects/array/entries/index.html | 84 + .../global_objects/array/every/index.html | 195 ++ .../reference/global_objects/array/fill/index.html | 155 + .../global_objects/array/filter/index.html | 235 ++ .../reference/global_objects/array/find/index.html | 243 ++ .../global_objects/array/findindex/index.html | 189 ++ .../reference/global_objects/array/flat/index.html | 116 + .../global_objects/array/flatmap/index.html | 117 + .../global_objects/array/foreach/index.html | 303 ++ .../reference/global_objects/array/from/index.html | 227 ++ .../global_objects/array/includes/index.html | 181 ++ .../reference/global_objects/array/index.html | 460 +++ .../global_objects/array/indexof/index.html | 226 ++ .../global_objects/array/isarray/index.html | 121 + .../reference/global_objects/array/join/index.html | 114 + .../reference/global_objects/array/keys/index.html | 76 + .../global_objects/array/lastindexof/index.html | 168 + .../global_objects/array/length/index.html | 149 + .../reference/global_objects/array/map/index.html | 337 ++ .../global_objects/array/observe/index.html | 91 + .../reference/global_objects/array/of/index.html | 102 + .../reference/global_objects/array/pop/index.html | 98 + .../global_objects/array/prototypen/index.html | 183 ++ .../reference/global_objects/array/push/index.html | 141 + .../global_objects/array/reduce/index.html | 564 ++++ .../global_objects/array/reduceright/index.html | 334 ++ .../global_objects/array/reverse/index.html | 92 + .../global_objects/array/shift/index.html | 111 + .../global_objects/array/slice/index.html | 244 ++ .../reference/global_objects/array/some/index.html | 209 ++ .../reference/global_objects/array/sort/index.html | 264 ++ .../global_objects/array/splice/index.html | 162 + .../global_objects/array/tolocalestring/index.html | 183 ++ .../global_objects/array/tosource/index.html | 69 + .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unobserve/index.html | 88 + .../global_objects/array/unshift/index.html | 99 + .../global_objects/array/values/index.html | 86 + .../arraybuffer/@@species/index.html | 72 + .../arraybuffer/bytelength/index.html | 70 + .../global_objects/arraybuffer/index.html | 144 + .../global_objects/arraybuffer/isview/index.html | 89 + .../arraybuffer/prototype/index.html | 68 + .../global_objects/arraybuffer/slice/index.html | 88 + .../global_objects/arraybuffer/transfer/index.html | 84 + .../global_objects/asyncfunction/index.html | 124 + .../asyncfunction/prototype/index.html | 61 + .../global_objects/atomics/add/index.html | 83 + .../global_objects/atomics/and/index.html | 129 + .../atomics/compareexchange/index.html | 86 + .../global_objects/atomics/exchange/index.html | 85 + .../reference/global_objects/atomics/index.html | 116 + .../global_objects/atomics/islockfree/index.html | 73 + .../global_objects/atomics/load/index.html | 81 + .../reference/global_objects/atomics/or/index.html | 129 + .../global_objects/atomics/store/index.html | 82 + .../global_objects/atomics/sub/index.html | 86 + .../global_objects/atomics/wait/index.html | 95 + .../global_objects/atomics/wake/index.html | 93 + .../global_objects/atomics/xor/index.html | 130 + .../reference/global_objects/boolean/index.html | 159 + .../global_objects/boolean/prototype/index.html | 83 + .../global_objects/boolean/tosource/index.html | 60 + .../global_objects/boolean/tostring/index.html | 89 + .../global_objects/boolean/valueof/index.html | 85 + .../global_objects/dataview/buffer/index.html | 71 + .../global_objects/dataview/bytelength/index.html | 77 + .../global_objects/dataview/byteoffset/index.html | 74 + .../global_objects/dataview/getfloat32/index.html | 95 + .../global_objects/dataview/getfloat64/index.html | 95 + .../global_objects/dataview/getint16/index.html | 95 + .../global_objects/dataview/getint32/index.html | 95 + .../global_objects/dataview/getint8/index.html | 93 + .../global_objects/dataview/getuint16/index.html | 98 + .../global_objects/dataview/getuint32/index.html | 98 + .../global_objects/dataview/getuint8/index.html | 95 + .../reference/global_objects/dataview/index.html | 127 + .../global_objects/dataview/prototype/index.html | 109 + .../global_objects/dataview/setfloat32/index.html | 97 + .../global_objects/dataview/setfloat64/index.html | 97 + .../global_objects/dataview/setint16/index.html | 100 + .../global_objects/dataview/setint32/index.html | 100 + .../global_objects/dataview/setint8/index.html | 95 + .../global_objects/dataview/setuint16/index.html | 100 + .../global_objects/dataview/setuint32/index.html | 100 + .../global_objects/dataview/setuint8/index.html | 95 + .../global_objects/date/@@toprimitive/index.html | 69 + .../global_objects/date/getday/index.html | 69 + .../global_objects/date/getfullyear/index.html | 88 + .../global_objects/date/gethours/index.html | 83 + .../global_objects/date/getmilliseconds/index.html | 81 + .../global_objects/date/getminutes/index.html | 81 + .../global_objects/date/getmonth/index.html | 83 + .../global_objects/date/getseconds/index.html | 83 + .../global_objects/date/gettime/index.html | 126 + .../date/gettimezoneoffset/index.html | 102 + .../global_objects/date/getutcdate/index.html | 80 + .../global_objects/date/getutcday/index.html | 82 + .../global_objects/date/getutcfullyear/index.html | 85 + .../global_objects/date/getutchours/index.html | 81 + .../date/getutcmilliseconds/index.html | 79 + .../global_objects/date/getutcminutes/index.html | 79 + .../global_objects/date/getutcmonth/index.html | 81 + .../global_objects/date/getutcseconds/index.html | 79 + .../global_objects/date/getyear/index.html | 127 + .../reference/global_objects/date/index.html | 230 ++ .../reference/global_objects/date/now/index.html | 105 + .../reference/global_objects/date/parse/index.html | 173 + .../global_objects/date/prototype/index.html | 182 ++ .../global_objects/date/setdate/index.html | 91 + .../global_objects/date/setfullyear/index.html | 97 + .../global_objects/date/sethours/index.html | 102 + .../global_objects/date/setmilliseconds/index.html | 90 + .../global_objects/date/setminutes/index.html | 100 + .../global_objects/date/setmonth/index.html | 103 + .../global_objects/date/setseconds/index.html | 98 + .../global_objects/date/settime/index.html | 91 + .../global_objects/date/setutcdate/index.html | 90 + .../global_objects/date/setutcfullyear/index.html | 96 + .../global_objects/date/setutchours/index.html | 98 + .../date/setutcmilliseconds/index.html | 90 + .../global_objects/date/setutcminutes/index.html | 96 + .../global_objects/date/setutcmonth/index.html | 94 + .../global_objects/date/setutcseconds/index.html | 94 + .../global_objects/date/setyear/index.html | 96 + .../global_objects/date/todatestring/index.html | 92 + .../global_objects/date/togmtstring/index.html | 87 + .../global_objects/date/toisostring/index.html | 109 + .../global_objects/date/tojson/index.html | 81 + .../date/tolocaledatestring/index.html | 188 ++ .../global_objects/date/tolocaleformat/index.html | 81 + .../global_objects/date/tolocalestring/index.html | 188 ++ .../date/tolocaletimestring/index.html | 177 ++ .../global_objects/date/tosource/index.html | 61 + .../global_objects/date/tostring/index.html | 94 + .../global_objects/date/totimestring/index.html | 88 + .../global_objects/date/toutcstring/index.html | 84 + .../reference/global_objects/date/utc/index.html | 133 + .../global_objects/date/valueof/index.html | 85 + .../global_objects/decodeuricomponent/index.html | 127 + .../reference/global_objects/encodeuri/index.html | 163 + .../global_objects/encodeuricomponent/index.html | 163 + .../global_objects/error/columnnumber/index.html | 43 + .../global_objects/error/filename/index.html | 47 + .../reference/global_objects/error/index.html | 241 ++ .../global_objects/error/linenumber/index.html | 55 + .../global_objects/error/message/index.html | 75 + .../reference/global_objects/error/name/index.html | 58 + .../global_objects/error/prototype/index.html | 113 + .../global_objects/error/stack/index.html | 124 + .../global_objects/error/tosource/index.html | 57 + .../global_objects/error/tostring/index.html | 116 + .../reference/global_objects/escape/index.html | 132 + .../reference/global_objects/evalerror/index.html | 118 + .../global_objects/evalerror/prototype/index.html | 89 + .../global_objects/float32array/index.html | 204 ++ .../global_objects/float64array/index.html | 204 ++ .../global_objects/function/apply/index.html | 226 ++ .../global_objects/function/arguments/index.html | 92 + .../global_objects/function/arity/index.html | 32 + .../global_objects/function/bind/index.html | 286 ++ .../global_objects/function/call/index.html | 163 + .../global_objects/function/caller/index.html | 84 + .../global_objects/function/displayname/index.html | 81 + .../reference/global_objects/function/index.html | 188 ++ .../global_objects/function/isgenerator/index.html | 56 + .../global_objects/function/length/index.html | 92 + .../global_objects/function/name/index.html | 229 ++ .../global_objects/function/prototype/index.html | 99 + .../global_objects/function/tosource/index.html | 72 + .../global_objects/function/tostring/index.html | 236 ++ .../reference/global_objects/generator/index.html | 137 + .../global_objects/generator/next/index.html | 116 + .../global_objects/generator/return/index.html | 102 + .../global_objects/generator/throw/index.html | 101 + .../global_objects/generatorfunction/index.html | 115 + .../generatorfunction/prototype/index.html | 66 + .../reference/global_objects/globalthis/index.html | 96 + .../javascript/reference/global_objects/index.html | 191 ++ .../reference/global_objects/infinity/index.html | 83 + .../reference/global_objects/int16array/index.html | 204 ++ .../reference/global_objects/int32array/index.html | 204 ++ .../reference/global_objects/int8array/index.html | 209 ++ .../global_objects/internalerror/index.html | 82 + .../internalerror/prototype/index.html | 61 + .../intl/collator/compare/index.html | 101 + .../global_objects/intl/collator/index.html | 179 ++ .../intl/collator/prototype/index.html | 79 + .../intl/collator/resolvedoptions/index.html | 100 + .../intl/collator/supportedlocalesof/index.html | 98 + .../intl/datetimeformat/format/index.html | 101 + .../intl/datetimeformat/formattoparts/index.html | 169 + .../global_objects/intl/datetimeformat/index.html | 248 ++ .../intl/datetimeformat/prototype/index.html | 83 + .../intl/datetimeformat/resolvedoptions/index.html | 107 + .../datetimeformat/supportedlocalesof/index.html | 99 + .../intl/getcanonicallocales/index.html | 74 + .../reference/global_objects/intl/index.html | 129 + .../intl/numberformat/format/index.html | 98 + .../global_objects/intl/numberformat/index.html | 195 ++ .../intl/numberformat/prototype/index.html | 81 + .../numberformat/supportedlocalesof/index.html | 98 + .../global_objects/intl/pluralrules/index.html | 161 + .../intl/pluralrules/supportedlocalesof/index.html | 85 + .../reference/global_objects/isfinite/index.html | 99 + .../reference/global_objects/isnan/index.html | 192 ++ .../reference/global_objects/json/index.html | 155 + .../reference/global_objects/json/parse/index.html | 128 + .../global_objects/json/stringify/index.html | 310 ++ .../global_objects/map/@@iterator/index.html | 102 + .../global_objects/map/@@species/index.html | 72 + .../global_objects/map/@@tostringtag/index.html | 58 + .../reference/global_objects/map/clear/index.html | 77 + .../reference/global_objects/map/delete/index.html | 73 + .../global_objects/map/entries/index.html | 78 + .../global_objects/map/foreach/index.html | 104 + .../reference/global_objects/map/get/index.html | 80 + .../reference/global_objects/map/has/index.html | 83 + .../reference/global_objects/map/index.html | 207 ++ .../reference/global_objects/map/keys/index.html | 69 + .../global_objects/map/prototype/index.html | 86 + .../reference/global_objects/map/set/index.html | 96 + .../reference/global_objects/map/size/index.html | 67 + .../reference/global_objects/map/values/index.html | 77 + .../reference/global_objects/math/acos/index.html | 103 + .../reference/global_objects/math/acosh/index.html | 98 + .../reference/global_objects/math/asin/index.html | 103 + .../reference/global_objects/math/asinh/index.html | 99 + .../reference/global_objects/math/atan/index.html | 105 + .../reference/global_objects/math/atan2/index.html | 113 + .../reference/global_objects/math/cbrt/index.html | 98 + .../reference/global_objects/math/ceil/index.html | 170 + .../reference/global_objects/math/clz32/index.html | 112 + .../reference/global_objects/math/cos/index.html | 98 + .../reference/global_objects/math/cosh/index.html | 102 + .../reference/global_objects/math/e/index.html | 83 + .../reference/global_objects/math/exp/index.html | 95 + .../reference/global_objects/math/expm1/index.html | 94 + .../reference/global_objects/math/floor/index.html | 137 + .../global_objects/math/fround/index.html | 112 + .../reference/global_objects/math/hypot/index.html | 128 + .../reference/global_objects/math/imul/index.html | 92 + .../reference/global_objects/math/index.html | 201 ++ .../reference/global_objects/math/ln10/index.html | 83 + .../reference/global_objects/math/ln2/index.html | 83 + .../reference/global_objects/math/log/index.html | 113 + .../reference/global_objects/math/log10/index.html | 101 + .../global_objects/math/log10e/index.html | 85 + .../reference/global_objects/math/log1p/index.html | 102 + .../reference/global_objects/math/log2/index.html | 101 + .../reference/global_objects/math/log2e/index.html | 83 + .../global_objects/math/math.random/index.html | 112 + .../reference/global_objects/math/max/index.html | 118 + .../reference/global_objects/math/min/index.html | 112 + .../reference/global_objects/math/pi/index.html | 81 + .../reference/global_objects/math/pow/index.html | 113 + .../reference/global_objects/math/round/index.html | 99 + .../reference/global_objects/math/sign/index.html | 115 + .../reference/global_objects/math/sin/index.html | 97 + .../reference/global_objects/math/sinh/index.html | 102 + .../reference/global_objects/math/sqrt/index.html | 99 + .../global_objects/math/sqrt1_2/index.html | 84 + .../reference/global_objects/math/sqrt2/index.html | 82 + .../reference/global_objects/math/tan/index.html | 102 + .../reference/global_objects/math/tanh/index.html | 93 + .../reference/global_objects/math/trunc/index.html | 125 + .../reference/global_objects/nan/index.html | 97 + .../reference/global_objects/null/index.html | 93 + .../global_objects/number/epsilon/index.html | 75 + .../reference/global_objects/number/index.html | 180 ++ .../global_objects/number/isfinite/index.html | 93 + .../global_objects/number/isinteger/index.html | 98 + .../global_objects/number/isnan/index.html | 104 + .../global_objects/number/issafeinteger/index.html | 99 + .../number/max_safe_integer/index.html | 68 + .../global_objects/number/max_value/index.html | 82 + .../number/min_safe_integer/index.html | 66 + .../global_objects/number/min_value/index.html | 83 + .../reference/global_objects/number/nan/index.html | 65 + .../number/negative_infinity/index.html | 100 + .../global_objects/number/parsefloat/index.html | 72 + .../global_objects/number/parseint/index.html | 77 + .../number/positive_infinity/index.html | 100 + .../global_objects/number/prototype/index.html | 89 + .../global_objects/number/toexponential/index.html | 108 + .../global_objects/number/tofixed/index.html | 113 + .../global_objects/number/tointeger/index.html | 52 + .../number/tolocalestring/index.html | 192 ++ .../global_objects/number/toprecision/index.html | 107 + .../global_objects/number/tosource/index.html | 53 + .../global_objects/number/tostring/index.html | 116 + .../global_objects/number/valueof/index.html | 85 + .../object/__definegetter__/index.html | 150 + .../global_objects/object/assign/index.html | 277 ++ .../global_objects/object/constructor/index.html | 192 ++ .../global_objects/object/create/index.html | 268 ++ .../object/defineproperty/index.html | 413 +++ .../global_objects/object/entries/index.html | 168 + .../global_objects/object/freeze/index.html | 253 ++ .../object/getownpropertynames/index.html | 201 ++ .../object/getprototypeof/index.html | 133 + .../object/hasownproperty/index.html | 203 ++ .../reference/global_objects/object/index.html | 186 ++ .../reference/global_objects/object/is/index.html | 120 + .../global_objects/object/isextensible/index.html | 153 + .../global_objects/object/isfrozen/index.html | 173 + .../global_objects/object/keys/index.html | 206 ++ .../global_objects/object/observe/index.html | 199 ++ .../global_objects/object/proto/index.html | 196 ++ .../global_objects/object/prototype/index.html | 219 ++ .../global_objects/object/tosource/index.html | 169 + .../global_objects/object/valueof/index.html | 115 + .../global_objects/object/values/index.html | 148 + .../reference/global_objects/parsefloat/index.html | 147 + .../reference/global_objects/parseint/index.html | 195 ++ .../global_objects/promise/all/index.html | 137 + .../global_objects/promise/finally/index.html | 93 + .../reference/global_objects/promise/index.html | 244 ++ .../global_objects/promise/race/index.html | 184 ++ .../global_objects/promise/reject/index.html | 74 + .../global_objects/promise/then/index.html | 149 + .../reference/global_objects/rangeerror/index.html | 174 + .../global_objects/rangeerror/prototype/index.html | 128 + .../global_objects/reflect/apply/index.html | 98 + .../global_objects/reflect/construct/index.html | 157 + .../reference/global_objects/reflect/index.html | 88 + .../global_objects/regexp/flags/index.html | 83 + .../reference/global_objects/regexp/index.html | 560 ++++ .../global_objects/regexp/input/index.html | 105 + .../global_objects/regexp/test/index.html | 127 + .../reference/global_objects/set/add/index.html | 69 + .../reference/global_objects/set/delete/index.html | 84 + .../reference/global_objects/set/has/index.html | 131 + .../reference/global_objects/set/index.html | 264 ++ .../global_objects/string/charat/index.html | 305 ++ .../global_objects/string/concat/index.html | 140 + .../global_objects/string/endswith/index.html | 148 + .../global_objects/string/fromcharcode/index.html | 134 + .../global_objects/string/includes/index.html | 131 + .../reference/global_objects/string/index.html | 310 ++ .../global_objects/string/indexof/index.html | 200 ++ .../global_objects/string/lastindexof/index.html | 148 + .../global_objects/string/length/index.html | 87 + .../global_objects/string/match/index.html | 140 + .../global_objects/string/prototype/index.html | 189 ++ .../reference/global_objects/string/raw/index.html | 160 + .../global_objects/string/repeat/index.html | 286 ++ .../global_objects/string/replace/index.html | 344 ++ .../global_objects/string/slice/index.html | 152 + .../global_objects/string/split/index.html | 212 ++ .../global_objects/string/startswith/index.html | 150 + .../global_objects/string/substr/index.html | 171 + .../global_objects/string/substring/index.html | 199 ++ .../global_objects/string/suchen/index.html | 105 + .../global_objects/string/tolowercase/index.html | 79 + .../global_objects/string/touppercase/index.html | 127 + .../global_objects/string/trim/index.html | 93 + .../global_objects/string/trimleft/index.html | 58 + .../global_objects/string/trimright/index.html | 58 + .../global_objects/syntaxerror/index.html | 133 + .../syntaxerror/prototype/index.html | 88 + .../reference/global_objects/typeerror/index.html | 133 + .../global_objects/typeerror/prototype/index.html | 88 + .../reference/global_objects/undefined/index.html | 135 + .../reference/global_objects/unescape/index.html | 126 + .../reference/global_objects/uneval/index.html | 109 + .../global_objects/webassembly/compile/index.html | 91 + .../webassembly/compilestreaming/index.html | 87 + .../global_objects/webassembly/index.html | 111 + files/de/web/javascript/reference/index.html | 49 + .../reference/iteration_protocols/index.html | 349 ++ .../reference/klassen/constructor/index.html | 165 + .../reference/klassen/extends/index.html | 172 + .../de/web/javascript/reference/klassen/index.html | 376 +++ .../javascript/reference/klassen/static/index.html | 136 + .../reference/lexical_grammar/index.html | 549 ++++ .../reference/operators/addition/index.html | 82 + .../operators/array_comprehensions/index.html | 200 ++ .../reference/operators/async_function/index.html | 107 + .../reference/operators/await/index.html | 112 + .../operators/bitwise_operatoren/index.html | 574 ++++ .../reference/operators/class/index.html | 157 + .../reference/operators/comma_operator/index.html | 107 + .../operators/conditional_operator/index.html | 190 ++ .../reference/operators/dekrement/index.html | 82 + .../reference/operators/delete/index.html | 295 ++ .../destrukturierende_zuweisung/index.html | 404 +++ .../operators/expression_closures/index.html | 76 + .../reference/operators/function/index.html | 151 + .../reference/operators/function_star_/index.html | 91 + .../operators/generator_comprehensions/index.html | 172 + .../reference/operators/grouping/index.html | 91 + .../javascript/reference/operators/in/index.html | 145 + .../web/javascript/reference/operators/index.html | 303 ++ .../reference/operators/inkrement/index.html | 80 + .../reference/operators/instanceof/index.html | 172 + .../operators/logische_operatoren/index.html | 246 ++ .../reference/operators/modulo/index.html | 78 + .../reference/operators/new.target/index.html | 102 + .../javascript/reference/operators/new/index.html | 190 ++ .../operators/objekt_initialisierer/index.html | 315 ++ .../operators/operator_precedence/index.html | 318 ++ .../operators/optionale_verkettung/index.html | 194 ++ .../operators/pipeline_operator/index.html | 67 + .../operators/property_accessors/index.html | 150 + .../reference/operators/spread_operator/index.html | 219 ++ .../reference/operators/spread_syntax/index.html | 236 ++ .../reference/operators/super/index.html | 184 ++ .../javascript/reference/operators/this/index.html | 394 +++ .../reference/operators/typeof/index.html | 259 ++ .../operators/vergleichsoperatoren/index.html | 243 ++ .../javascript/reference/operators/void/index.html | 108 + .../reference/operators/yield/index.html | 119 + .../reference/operators/yield_star_/index.html | 164 + .../operators/zuweisungsoperator/index.html | 412 +++ .../reference/statements/async_function/index.html | 223 ++ .../reference/statements/block/index.html | 115 + .../reference/statements/break/index.html | 164 + .../reference/statements/class/index.html | 192 ++ .../reference/statements/const/index.html | 170 + .../reference/statements/continue/index.html | 165 + .../reference/statements/debugger/index.html | 52 + .../reference/statements/default/index.html | 120 + .../reference/statements/do...while/index.html | 132 + .../reference/statements/empty/index.html | 147 + .../reference/statements/export/index.html | 126 + .../reference/statements/for...in/index.html | 227 ++ .../reference/statements/for...of/index.html | 183 ++ .../javascript/reference/statements/for/index.html | 201 ++ .../reference/statements/for_each...in/index.html | 122 + .../reference/statements/function_star_/index.html | 200 ++ .../reference/statements/funktion/index.html | 190 ++ .../reference/statements/if...else/index.html | 168 + .../reference/statements/import/index.html | 151 + .../web/javascript/reference/statements/index.html | 148 + .../reference/statements/label/index.html | 205 ++ .../javascript/reference/statements/let/index.html | 454 +++ .../reference/statements/return/index.html | 192 ++ .../reference/statements/switch/index.html | 289 ++ .../reference/statements/throw/index.html | 256 ++ .../reference/statements/try...catch/index.html | 382 +++ .../javascript/reference/statements/var/index.html | 243 ++ .../reference/statements/while/index.html | 102 + .../javascript/reference/strict_mode/index.html | 401 +++ .../reference/template_strings/index.html | 219 ++ .../veraltete_und_abgeschaffte_features/index.html | 291 ++ .../the_legacy_iterator_protocol/index.html | 78 + .../web/javascript/speicherverwaltung/index.html | 184 ++ files/de/web/javascript/typed_arrays/index.html | 230 ++ .../index.html | 424 +++ files/de/web/manifest/index.html | 423 +++ files/de/web/manifest/short_name/index.html | 71 + files/de/web/mathml/attribute/index.html | 487 +++ files/de/web/mathml/attribute/werte/index.html | 146 + files/de/web/mathml/beispiele/index.html | 19 + .../mathml_satz_des_pythagoras/index.html | 85 + .../beispiele/quadratische_gleichung/index.html | 106 + files/de/web/mathml/element/index.html | 144 + files/de/web/mathml/element/maction/index.html | 239 ++ files/de/web/mathml/element/math/index.html | 308 ++ files/de/web/mathml/element/menclose/index.html | 313 ++ files/de/web/mathml/element/merror/index.html | 173 + files/de/web/mathml/element/mfenced/index.html | 194 ++ files/de/web/mathml/element/mfrac/index.html | 207 ++ files/de/web/mathml/element/mi/index.html | 233 ++ files/de/web/mathml/element/mn/index.html | 232 ++ files/de/web/mathml/element/mo/index.html | 417 +++ files/de/web/mathml/element/mover/index.html | 225 ++ files/de/web/mathml/element/mpadded/index.html | 211 ++ files/de/web/mathml/element/mphantom/index.html | 142 + files/de/web/mathml/element/mroot/index.html | 175 + files/de/web/mathml/element/mrow/index.html | 209 ++ files/de/web/mathml/element/ms/index.html | 243 ++ files/de/web/mathml/element/mspace/index.html | 167 + files/de/web/mathml/element/msqrt/index.html | 173 + files/de/web/mathml/element/mstyle/index.html | 124 + files/de/web/mathml/element/msub/index.html | 205 ++ files/de/web/mathml/element/msubsup/index.html | 225 ++ files/de/web/mathml/element/msup/index.html | 205 ++ files/de/web/mathml/element/mtable/index.html | 542 ++++ files/de/web/mathml/element/mtd/index.html | 188 ++ files/de/web/mathml/element/mtext/index.html | 233 ++ files/de/web/mathml/element/mtr/index.html | 167 + files/de/web/mathml/element/munder/index.html | 224 ++ files/de/web/mathml/element/munderover/index.html | 239 ++ files/de/web/mathml/index.html | 112 + files/de/web/performance/dns-prefetch/index.html | 66 + files/de/web/performance/index.html | 291 ++ files/de/web/progressive_web_apps/index.html | 79 + files/de/web/reference/api/index.html | 63 + files/de/web/reference/index.html | 30 + .../security/certificate_transparency/index.html | 64 + files/de/web/security/index.html | 17 + .../de/web/security/public_key_pinning/index.html | 147 + files/de/web/svg/attribute/class/index.html | 189 ++ files/de/web/svg/attribute/index.html | 467 +++ .../svg/attribute/preserveaspectratio/index.html | 110 + files/de/web/svg/element/animate/index.html | 115 + files/de/web/svg/element/circle/index.html | 114 + files/de/web/svg/element/foreignobject/index.html | 133 + files/de/web/svg/element/index.html | 209 ++ files/de/web/svg/element/path/index.html | 98 + files/de/web/svg/element/polygon/index.html | 142 + files/de/web/svg/element/rect/index.html | 164 + files/de/web/svg/element/svg/index.html | 135 + files/de/web/svg/element/textpath/index.html | 71 + files/de/web/svg/element/view/index.html | 149 + files/de/web/svg/index.html | 112 + .../de/web/svg/namespaces_crash_course/index.html | 197 ++ .../web/svg/tutorial/einf\303\274hrung/index.html" | 21 + .../web/svg/tutorial/fills_and_strokes/index.html | 147 + files/de/web/svg/tutorial/index.html | 14 + files/de/web/svg/tutorial/pfade/index.html | 239 ++ files/de/web/svg/tutorial/svg_image_tag/index.html | 36 + .../web/svg/tutorial/svg_schriftarten/index.html | 99 + files/de/web/svg/tutorial/tools_for_svg/index.html | 70 + .../web/web_components/custom_elements/index.html | 258 ++ files/de/web/web_components/index.html | 222 ++ .../using_custom_elements/index.html | 249 ++ files/de/web/webapi/index.html | 133 + .../webapi/verwenden_von_geolocation/index.html | 291 ++ files/de/web/xml/index.html | 17 + .../de/web/xml/xml_einf\303\274hrung/index.html" | 63 + files/de/web/xslt/index.html | 51 + 1598 files changed, 239447 insertions(+) create mode 100644 files/de/web/accessibility/understanding_wcag/index.html create mode 100644 files/de/web/accessibility/understanding_wcag/perceivable/index.html create mode 100644 files/de/web/api/aescbcparams/index.html create mode 100644 files/de/web/api/animationevent/index.html create mode 100644 files/de/web/api/audiocontext/decodeaudiodata/index.html create mode 100644 files/de/web/api/audiocontext/index.html create mode 100644 files/de/web/api/audiodestinationnode/index.html create mode 100644 files/de/web/api/audionode/index.html create mode 100644 files/de/web/api/audiotrack/index.html create mode 100644 files/de/web/api/battery_status_api/index.html create mode 100644 files/de/web/api/blob/index.html create mode 100644 files/de/web/api/body/arraybuffer/index.html create mode 100644 files/de/web/api/body/blob/index.html create mode 100644 files/de/web/api/body/body/index.html create mode 100644 files/de/web/api/body/bodyused/index.html create mode 100644 files/de/web/api/body/formdata/index.html create mode 100644 files/de/web/api/body/index.html create mode 100644 files/de/web/api/body/json/index.html create mode 100644 files/de/web/api/body/text/index.html create mode 100644 files/de/web/api/cache/add/index.html create mode 100644 files/de/web/api/cache/addall/index.html create mode 100644 files/de/web/api/cache/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/de/web/api/childnode/index.html create mode 100644 files/de/web/api/childnode/remove/index.html create mode 100644 files/de/web/api/console/assert/index.html create mode 100644 files/de/web/api/console/clear/index.html create mode 100644 files/de/web/api/console/count/index.html create mode 100644 files/de/web/api/console/debug/index.html create mode 100644 files/de/web/api/console/dir/index.html create mode 100644 files/de/web/api/console/index.html create mode 100644 files/de/web/api/console/log/index.html create mode 100644 files/de/web/api/console/table/index.html create mode 100644 files/de/web/api/console/time/index.html create mode 100644 files/de/web/api/console/timeend/index.html create mode 100644 files/de/web/api/console/warn/index.html create mode 100644 files/de/web/api/crypto/index.html create mode 100644 files/de/web/api/css/escape/index.html create mode 100644 files/de/web/api/css/index.html create mode 100644 files/de/web/api/css_painting_api/guide/index.html create mode 100644 files/de/web/api/css_painting_api/index.html create mode 100644 files/de/web/api/cssmediarule/index.html create mode 100644 files/de/web/api/csspagerule/index.html create mode 100644 files/de/web/api/cssrule/csstext/index.html create mode 100644 files/de/web/api/cssrule/index.html create mode 100644 files/de/web/api/customelementregistry/define/index.html create mode 100644 files/de/web/api/customelementregistry/index.html create mode 100644 files/de/web/api/dedicatedworkerglobalscope/index.html create mode 100644 files/de/web/api/dedicatedworkerglobalscope/message_event/index.html create mode 100644 files/de/web/api/document/adoptnode/index.html create mode 100644 files/de/web/api/document/alinkcolor/index.html create mode 100644 files/de/web/api/document/body/index.html create mode 100644 files/de/web/api/document/createattribute/index.html create mode 100644 files/de/web/api/document/createdocumentfragment/index.html create mode 100644 files/de/web/api/document/createelement/index.html create mode 100644 files/de/web/api/document/createelementns/index.html create mode 100644 files/de/web/api/document/createtextnode/index.html create mode 100644 files/de/web/api/document/createtreewalker/index.html create mode 100644 files/de/web/api/document/dir/index.html create mode 100644 files/de/web/api/document/document/index.html create mode 100644 files/de/web/api/document/documentelement/index.html create mode 100644 files/de/web/api/document/fullscreenchange_event/index.html create mode 100644 files/de/web/api/document/getelementbyid/index.html create mode 100644 files/de/web/api/document/getelementsbyclassname/index.html create mode 100644 files/de/web/api/document/head/index.html create mode 100644 files/de/web/api/document/importnode/index.html create mode 100644 files/de/web/api/document/index.html create mode 100644 files/de/web/api/document/queryselector/index.html create mode 100644 files/de/web/api/document/queryselectorall/index.html create mode 100644 files/de/web/api/document/readystate/index.html create mode 100644 files/de/web/api/document/referrer/index.html create mode 100644 files/de/web/api/document/registerelement/index.html create mode 100644 files/de/web/api/document/title/index.html create mode 100644 files/de/web/api/document/url/index.html create mode 100644 files/de/web/api/document/width/index.html create mode 100644 files/de/web/api/document/write/index.html create mode 100644 files/de/web/api/document/writeln/index.html create mode 100644 files/de/web/api/documentfragment/index.html create mode 100644 files/de/web/api/domerror/index.html create mode 100644 files/de/web/api/domparser/index.html create mode 100644 files/de/web/api/domstring/index.html create mode 100644 files/de/web/api/domtokenlist/add/index.html create mode 100644 files/de/web/api/domtokenlist/index.html create mode 100644 files/de/web/api/dragevent/index.html create mode 100644 files/de/web/api/element/classlist/index.html create mode 100644 files/de/web/api/element/classname/index.html create mode 100644 files/de/web/api/element/getboundingclientrect/index.html create mode 100644 files/de/web/api/element/hasattribute/index.html create mode 100644 files/de/web/api/element/index.html create mode 100644 files/de/web/api/element/innerhtml/index.html create mode 100644 files/de/web/api/element/insertadjacenthtml/index.html create mode 100644 files/de/web/api/element/queryselector/index.html create mode 100644 files/de/web/api/element/queryselectorall/index.html create mode 100644 files/de/web/api/element/removeattribute/index.html create mode 100644 files/de/web/api/element/requestfullscreen/index.html create mode 100644 files/de/web/api/element/scrollintoview/index.html create mode 100644 files/de/web/api/element/scrollleft/index.html create mode 100644 files/de/web/api/element/scrollwidth/index.html create mode 100644 files/de/web/api/element/setattribute/index.html create mode 100644 files/de/web/api/event/bubbles/index.html create mode 100644 files/de/web/api/event/event/index.html create mode 100644 files/de/web/api/event/index.html create mode 100644 files/de/web/api/eventlistener/index.html create mode 100644 files/de/web/api/eventsource/index.html create mode 100644 files/de/web/api/eventtarget/index.html create mode 100644 files/de/web/api/federatedcredential/index.html create mode 100644 files/de/web/api/fetch_api/index.html create mode 100644 files/de/web/api/file/filename/index.html create mode 100644 files/de/web/api/file/filesize/index.html create mode 100644 files/de/web/api/file/getastext/index.html create mode 100644 files/de/web/api/file/index.html create mode 100644 files/de/web/api/file/name/index.html create mode 100644 files/de/web/api/file/typ/index.html create mode 100644 files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html create mode 100644 files/de/web/api/filereader/index.html create mode 100644 files/de/web/api/filereader/onload/index.html create mode 100644 files/de/web/api/formdata/formdata/index.html create mode 100644 files/de/web/api/formdata/get/index.html create mode 100644 files/de/web/api/formdata/getall/index.html create mode 100644 files/de/web/api/formdata/index.html create mode 100644 files/de/web/api/fullscreenoptions/index.html create mode 100644 files/de/web/api/gainnode/index.html create mode 100644 files/de/web/api/gamepad_api/index.html create mode 100644 files/de/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/de/web/api/geolocation/index.html create mode 100644 files/de/web/api/globaleventhandlers/index.html create mode 100644 files/de/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/de/web/api/globaleventhandlers/onload/index.html create mode 100644 files/de/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/de/web/api/htmlcanvaselement/index.html create mode 100644 files/de/web/api/htmlcanvaselement/todataurl/index.html create mode 100644 files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html create mode 100644 files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html create mode 100644 files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html create mode 100644 files/de/web/api/htmlcollection/index.html create mode 100644 files/de/web/api/htmlformelement/elements/index.html create mode 100644 files/de/web/api/htmlformelement/index.html create mode 100644 files/de/web/api/htmlformelement/submit_event/index.html create mode 100644 files/de/web/api/htmlinputelement/index.html create mode 100644 files/de/web/api/htmlinputelement/select/index.html create mode 100644 files/de/web/api/htmlslotelement/assignednodes/index.html create mode 100644 files/de/web/api/htmlslotelement/index.html create mode 100644 files/de/web/api/htmltableelement/createcaption/index.html create mode 100644 files/de/web/api/htmltableelement/index.html create mode 100644 files/de/web/api/htmltableelement/insertrow/index.html create mode 100644 files/de/web/api/htmlunknownelement/index.html create mode 100644 files/de/web/api/index.html create mode 100644 files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html create mode 100644 files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html create mode 100644 files/de/web/api/indexeddb_api/index.html create mode 100644 files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html create mode 100644 files/de/web/api/keyboardevent/altkey/index.html create mode 100644 files/de/web/api/keyboardevent/getmodifierstate/index.html create mode 100644 files/de/web/api/keyboardevent/index.html create mode 100644 files/de/web/api/keyboardevent/keycode/index.html create mode 100644 files/de/web/api/l10n.language.direction/index.html create mode 100644 files/de/web/api/linkstyle/index.html create mode 100644 files/de/web/api/messageevent/index.html create mode 100644 files/de/web/api/mouseevent/index.html create mode 100644 files/de/web/api/mozmobileconnection/index.html create mode 100644 files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html create mode 100644 files/de/web/api/mutationobserver/index.html create mode 100644 files/de/web/api/navigator/index.html create mode 100644 files/de/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html create mode 100644 files/de/web/api/navigator/sendbeacon/index.html create mode 100644 files/de/web/api/navigator/vibrate/index.html create mode 100644 files/de/web/api/navigatoronline/index.html create mode 100644 files/de/web/api/navigatoronline/online/index.html create mode 100644 files/de/web/api/navigatoronline/online_and_offline_events/index.html create mode 100644 files/de/web/api/node/appendchild/index.html create mode 100644 files/de/web/api/node/childnodes/index.html create mode 100644 files/de/web/api/node/clonenode/index.html create mode 100644 files/de/web/api/node/firstchild/index.html create mode 100644 files/de/web/api/node/haschildnodes/index.html create mode 100644 files/de/web/api/node/index.html create mode 100644 files/de/web/api/node/innertext/index.html create mode 100644 files/de/web/api/node/lastchild/index.html create mode 100644 files/de/web/api/node/nextsibling/index.html create mode 100644 files/de/web/api/node/nodevalue/index.html create mode 100644 files/de/web/api/node/normalize/index.html create mode 100644 files/de/web/api/node/parentnode/index.html create mode 100644 files/de/web/api/node/previoussibling/index.html create mode 100644 files/de/web/api/node/removechild/index.html create mode 100644 files/de/web/api/node/replacechild/index.html create mode 100644 files/de/web/api/node/setuserdata/index.html create mode 100644 files/de/web/api/node/textcontent/index.html create mode 100644 files/de/web/api/notification/index.html create mode 100644 files/de/web/api/notification/permission/index.html create mode 100644 files/de/web/api/page_visibility_api/index.html create mode 100644 files/de/web/api/performance/index.html create mode 100644 files/de/web/api/performance/now/index.html create mode 100644 files/de/web/api/push_api/index.html create mode 100644 files/de/web/api/pushmanager/index.html create mode 100644 files/de/web/api/pushmanager/subscribe/index.html create mode 100644 files/de/web/api/range/index.html create mode 100644 files/de/web/api/range/range/index.html create mode 100644 files/de/web/api/readablestream/index.html create mode 100644 files/de/web/api/renderingcontext/index.html create mode 100644 files/de/web/api/response/index.html create mode 100644 files/de/web/api/response/response/index.html create mode 100644 files/de/web/api/rtcicecandidate/index.html create mode 100644 files/de/web/api/rtcpeerconnection/index.html create mode 100644 files/de/web/api/rtcrtptransceiver/direction/index.html create mode 100644 files/de/web/api/rtcrtptransceiver/index.html create mode 100644 files/de/web/api/service_worker_api/index.html create mode 100644 files/de/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/de/web/api/serviceworker/index.html create mode 100644 files/de/web/api/serviceworkercontainer/index.html create mode 100644 files/de/web/api/serviceworkercontainer/register/index.html create mode 100644 files/de/web/api/sharedworker/index.html create mode 100644 files/de/web/api/speechsynthesis/index.html create mode 100644 files/de/web/api/storage/clear/index.html create mode 100644 files/de/web/api/storage/getitem/index.html create mode 100644 files/de/web/api/storage/index.html create mode 100644 files/de/web/api/storage/key/index.html create mode 100644 files/de/web/api/storage/length/index.html create mode 100644 files/de/web/api/storage/removeitem/index.html create mode 100644 files/de/web/api/storage/setitem/index.html create mode 100644 files/de/web/api/transferable/index.html create mode 100644 files/de/web/api/url/createobjecturl/index.html create mode 100644 files/de/web/api/url/index.html create mode 100644 files/de/web/api/url/protocol/index.html create mode 100644 files/de/web/api/urlsearchparams/index.html create mode 100644 files/de/web/api/usvstring/index.html create mode 100644 files/de/web/api/vollbild_api/index.html create mode 100644 files/de/web/api/web_animations_api/index.html create mode 100644 files/de/web/api/web_storage_api/index.html create mode 100644 files/de/web/api/web_workers_api/index.html create mode 100644 files/de/web/api/webgl_api/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html create mode 100644 "files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" create mode 100644 "files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" create mode 100644 "files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" create mode 100644 files/de/web/api/webgl_api/tutorial/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html create mode 100644 files/de/web/api/webglactiveinfo/index.html create mode 100644 files/de/web/api/webglprogram/index.html create mode 100644 files/de/web/api/webglrenderingcontext/canvas/index.html create mode 100644 files/de/web/api/webglrenderingcontext/getactiveattrib/index.html create mode 100644 files/de/web/api/webglrenderingcontext/getattriblocation/index.html create mode 100644 files/de/web/api/webglrenderingcontext/index.html create mode 100644 files/de/web/api/websocket/binarytype/index.html create mode 100644 files/de/web/api/websocket/close/index.html create mode 100644 files/de/web/api/websocket/extensions/index.html create mode 100644 files/de/web/api/websocket/index.html create mode 100644 files/de/web/api/websocket/onclose/index.html create mode 100644 files/de/web/api/websocket/protocol/index.html create mode 100644 files/de/web/api/websocket/readystate/index.html create mode 100644 files/de/web/api/websocket/url/index.html create mode 100644 files/de/web/api/webxr_device_api/index.html create mode 100644 files/de/web/api/window/alert/index.html create mode 100644 files/de/web/api/window/applicationcache/index.html create mode 100644 files/de/web/api/window/cancelanimationframe/index.html create mode 100644 files/de/web/api/window/close/index.html create mode 100644 files/de/web/api/window/confirm/index.html create mode 100644 files/de/web/api/window/console/index.html create mode 100644 files/de/web/api/window/dump/index.html create mode 100644 files/de/web/api/window/history/index.html create mode 100644 files/de/web/api/window/index.html create mode 100644 files/de/web/api/window/length/index.html create mode 100644 files/de/web/api/window/localstorage/index.html create mode 100644 files/de/web/api/window/name/index.html create mode 100644 files/de/web/api/window/navigator/index.html create mode 100644 files/de/web/api/window/ondevicemotion/index.html create mode 100644 files/de/web/api/window/opendialog/index.html create mode 100644 files/de/web/api/window/opener/index.html create mode 100644 files/de/web/api/window/performance/index.html create mode 100644 files/de/web/api/window/print/index.html create mode 100644 files/de/web/api/window/prompt/index.html create mode 100644 files/de/web/api/window/screenx/index.html create mode 100644 files/de/web/api/window/scroll/index.html create mode 100644 files/de/web/api/window/scrollto/index.html create mode 100644 files/de/web/api/window/sessionstorage/index.html create mode 100644 files/de/web/api/window/stop/index.html create mode 100644 files/de/web/api/windowbase64/btoa/index.html create mode 100644 files/de/web/api/windowbase64/index.html create mode 100644 files/de/web/api/windoweventhandlers/index.html create mode 100644 files/de/web/api/windoweventhandlers/onafterprint/index.html create mode 100644 files/de/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/de/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/de/web/api/windowtimers/index.html create mode 100644 files/de/web/api/windowtimers/settimeout/index.html create mode 100644 files/de/web/api/worker/index.html create mode 100644 files/de/web/api/xmlhttprequest/index.html create mode 100644 files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html create mode 100644 files/de/web/barrierefreiheit/aria/aria_techniken/index.html create mode 100644 files/de/web/barrierefreiheit/aria/index.html create mode 100644 files/de/web/barrierefreiheit/index.html create mode 100644 files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html create mode 100644 files/de/web/barrierefreiheit/webentwicklung/index.html 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 create mode 100644 files/de/web/demos_of_open_web_technologies/index.html create mode 100644 files/de/web/events/change/index.html create mode 100644 files/de/web/events/domcontentloaded/index.html create mode 100644 files/de/web/events/index.html create mode 100644 files/de/web/events/load/index.html create mode 100644 files/de/web/events/readystatechange/index.html create mode 100644 files/de/web/guide/ajax/erste_schritte/index.html create mode 100644 files/de/web/guide/ajax/index.html create mode 100644 files/de/web/guide/css/getting_started/farbe/index.html create mode 100644 files/de/web/guide/css/getting_started/index.html create mode 100644 files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html create mode 100644 files/de/web/guide/css/getting_started/lesbares_css/index.html create mode 100644 files/de/web/guide/css/getting_started/selektoren/index.html create mode 100644 files/de/web/guide/css/getting_started/textstyles/index.html create mode 100644 files/de/web/guide/css/getting_started/was_ist_css/index.html create mode 100644 files/de/web/guide/css/getting_started/why_use_css/index.html create mode 100644 files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html create mode 100644 files/de/web/guide/css/scaling_background_images/index.html create mode 100644 files/de/web/guide/dom/index.html create mode 100644 files/de/web/guide/dom/manipulating_the_browser_history/index.html create mode 100644 files/de/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/de/web/guide/events/index.html create mode 100644 files/de/web/guide/graphics/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/basic_animations/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/bilder/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/drawing_text/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/grundlagen/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/index.html create mode 100644 files/de/web/guide/html/content_editable/index.html create mode 100644 files/de/web/guide/html/inhaltskategorien/index.html create mode 100644 files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/de/web/guide/index.html create mode 100644 files/de/web/html/applying_color/index.html create mode 100644 files/de/web/html/attributes/index.html create mode 100644 files/de/web/html/block-level_elemente/index.html create mode 100644 files/de/web/html/canvas/index.html create mode 100644 files/de/web/html/element/a/index.html create mode 100644 files/de/web/html/element/abbr/index.html create mode 100644 files/de/web/html/element/acronym/index.html create mode 100644 files/de/web/html/element/address/index.html create mode 100644 files/de/web/html/element/applet/index.html create mode 100644 files/de/web/html/element/area/index.html create mode 100644 files/de/web/html/element/article/index.html create mode 100644 files/de/web/html/element/aside/index.html create mode 100644 files/de/web/html/element/b/index.html create mode 100644 files/de/web/html/element/base/index.html create mode 100644 files/de/web/html/element/bdi/index.html create mode 100644 files/de/web/html/element/bdo/index.html create mode 100644 files/de/web/html/element/bgsound/index.html create mode 100644 files/de/web/html/element/big/index.html create mode 100644 files/de/web/html/element/blink/index.html create mode 100644 files/de/web/html/element/blockquote/index.html create mode 100644 files/de/web/html/element/body/index.html create mode 100644 files/de/web/html/element/br/index.html create mode 100644 files/de/web/html/element/canvas/index.html create mode 100644 files/de/web/html/element/caption/index.html create mode 100644 files/de/web/html/element/center/index.html create mode 100644 files/de/web/html/element/cite/index.html create mode 100644 files/de/web/html/element/code/index.html create mode 100644 files/de/web/html/element/col/index.html create mode 100644 files/de/web/html/element/data/index.html create mode 100644 files/de/web/html/element/datalist/index.html create mode 100644 files/de/web/html/element/dd/index.html create mode 100644 files/de/web/html/element/del/index.html create mode 100644 files/de/web/html/element/details/index.html create mode 100644 files/de/web/html/element/dialog/index.html create mode 100644 files/de/web/html/element/dir/index.html create mode 100644 files/de/web/html/element/div/index.html create mode 100644 files/de/web/html/element/dl/index.html create mode 100644 files/de/web/html/element/dt/index.html create mode 100644 files/de/web/html/element/em/index.html create mode 100644 files/de/web/html/element/embed/index.html create mode 100644 files/de/web/html/element/fieldset/index.html create mode 100644 files/de/web/html/element/font/index.html create mode 100644 files/de/web/html/element/footer/index.html create mode 100644 files/de/web/html/element/frame/index.html create mode 100644 files/de/web/html/element/h1-h6/index.html create mode 100644 files/de/web/html/element/head/index.html create mode 100644 files/de/web/html/element/header/index.html create mode 100644 files/de/web/html/element/hr/index.html create mode 100644 files/de/web/html/element/html/index.html create mode 100644 files/de/web/html/element/i/index.html create mode 100644 files/de/web/html/element/iframe/index.html create mode 100644 files/de/web/html/element/image/index.html create mode 100644 files/de/web/html/element/img/index.html create mode 100644 files/de/web/html/element/index.html create mode 100644 files/de/web/html/element/input/button/index.html create mode 100644 files/de/web/html/element/input/checkbox/index.html create mode 100644 files/de/web/html/element/input/index.html create mode 100644 files/de/web/html/element/ins/index.html create mode 100644 files/de/web/html/element/legend/index.html create mode 100644 files/de/web/html/element/li/index.html create mode 100644 files/de/web/html/element/link/index.html create mode 100644 files/de/web/html/element/main/index.html create mode 100644 files/de/web/html/element/map/index.html create mode 100644 files/de/web/html/element/marquee/index.html create mode 100644 files/de/web/html/element/nav/index.html create mode 100644 files/de/web/html/element/noembed/index.html create mode 100644 files/de/web/html/element/noscript/index.html create mode 100644 files/de/web/html/element/object/index.html create mode 100644 files/de/web/html/element/ol/index.html create mode 100644 files/de/web/html/element/optgroup/index.html create mode 100644 files/de/web/html/element/option/index.html create mode 100644 files/de/web/html/element/p/index.html create mode 100644 files/de/web/html/element/picture/index.html create mode 100644 files/de/web/html/element/pre/index.html create mode 100644 files/de/web/html/element/progress/index.html create mode 100644 files/de/web/html/element/q/index.html create mode 100644 files/de/web/html/element/s/index.html create mode 100644 files/de/web/html/element/section/index.html create mode 100644 files/de/web/html/element/shadow/index.html create mode 100644 files/de/web/html/element/strong/index.html create mode 100644 files/de/web/html/element/summary/index.html create mode 100644 files/de/web/html/element/table/index.html create mode 100644 files/de/web/html/element/td/index.html create mode 100644 files/de/web/html/element/template/index.html create mode 100644 files/de/web/html/element/th/index.html create mode 100644 files/de/web/html/element/time/index.html create mode 100644 files/de/web/html/element/title/index.html create mode 100644 files/de/web/html/element/tr/index.html create mode 100644 files/de/web/html/element/tt/index.html create mode 100644 files/de/web/html/element/u/index.html create mode 100644 files/de/web/html/element/ul/index.html create mode 100644 files/de/web/html/element/var/index.html create mode 100644 files/de/web/html/element/video/index.html create mode 100644 files/de/web/html/globale_attribute/accesskey/index.html create mode 100644 files/de/web/html/globale_attribute/autocapitalize/index.html create mode 100644 files/de/web/html/globale_attribute/class/index.html create mode 100644 files/de/web/html/globale_attribute/contenteditable/index.html create mode 100644 files/de/web/html/globale_attribute/dir/index.html create mode 100644 files/de/web/html/globale_attribute/draggable/index.html create mode 100644 files/de/web/html/globale_attribute/dropzone/index.html create mode 100644 files/de/web/html/globale_attribute/hidden/index.html create mode 100644 files/de/web/html/globale_attribute/id/index.html create mode 100644 files/de/web/html/globale_attribute/index.html create mode 100644 files/de/web/html/globale_attribute/inputmode/index.html create mode 100644 files/de/web/html/globale_attribute/is/index.html create mode 100644 files/de/web/html/globale_attribute/kontextmenu/index.html create mode 100644 files/de/web/html/globale_attribute/lang/index.html create mode 100644 files/de/web/html/globale_attribute/style/index.html create mode 100644 files/de/web/html/globale_attribute/tabindex/index.html create mode 100644 files/de/web/html/globale_attribute/title/index.html create mode 100644 files/de/web/html/globale_attribute/translate/index.html create mode 100644 files/de/web/html/html5/html5_element_list/index.html create mode 100644 files/de/web/html/html5/index.html create mode 100644 files/de/web/html/index.html create mode 100644 files/de/web/html/inline_elemente/index.html create mode 100644 files/de/web/html/referenz/index.html create mode 100644 files/de/web/html/using_the_application_cache/index.html create mode 100644 files/de/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/de/web/http/basics_of_http/index.html create mode 100644 files/de/web/http/caching_faq/index.html create mode 100644 files/de/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html create mode 100644 files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html create mode 100644 files/de/web/http/cors/errors/corsrequestnothttp/index.html create mode 100644 files/de/web/http/cors/errors/index.html create mode 100644 files/de/web/http/cors/index.html create mode 100644 files/de/web/http/headers/accept/index.html create mode 100644 files/de/web/http/headers/age/index.html create mode 100644 files/de/web/http/headers/cache-control/index.html create mode 100644 files/de/web/http/headers/connection/index.html create mode 100644 files/de/web/http/headers/cookie/index.html create mode 100644 files/de/web/http/headers/dnt/index.html create mode 100644 files/de/web/http/headers/expect-ct/index.html create mode 100644 files/de/web/http/headers/expires/index.html create mode 100644 files/de/web/http/headers/index.html create mode 100644 files/de/web/http/headers/referer/index.html create mode 100644 files/de/web/http/headers/server/index.html create mode 100644 files/de/web/http/headers/set-cookie/index.html create mode 100644 files/de/web/http/headers/set-cookie/samesite/index.html create mode 100644 files/de/web/http/headers/tk/index.html create mode 100644 files/de/web/http/headers/user-agent/index.html create mode 100644 files/de/web/http/headers/x-content-type-options/index.html create mode 100644 files/de/web/http/headers/x-frame-options/index.html create mode 100644 files/de/web/http/index.html create mode 100644 files/de/web/http/methods/connect/index.html create mode 100644 files/de/web/http/methods/delete/index.html create mode 100644 files/de/web/http/methods/get/index.html create mode 100644 files/de/web/http/methods/index.html create mode 100644 files/de/web/http/status/100/index.html create mode 100644 files/de/web/http/status/200/index.html create mode 100644 files/de/web/http/status/201/index.html create mode 100644 files/de/web/http/status/302/index.html create mode 100644 files/de/web/http/status/304/index.html create mode 100644 files/de/web/http/status/400/index.html create mode 100644 files/de/web/http/status/401/index.html create mode 100644 files/de/web/http/status/403/index.html create mode 100644 files/de/web/http/status/404/index.html create mode 100644 files/de/web/http/status/409/index.html create mode 100644 files/de/web/http/status/410/index.html create mode 100644 files/de/web/http/status/414/index.html create mode 100644 files/de/web/http/status/418/index.html create mode 100644 files/de/web/http/status/500/index.html create mode 100644 files/de/web/http/status/503/index.html create mode 100644 files/de/web/http/status/504/index.html create mode 100644 files/de/web/http/status/505/index.html create mode 100644 files/de/web/http/status/511/index.html create mode 100644 files/de/web/http/status/index.html create mode 100644 files/de/web/index.html create mode 100644 files/de/web/javascript/about_javascript/index.html create mode 100644 "files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" create mode 100644 files/de/web/javascript/closures/index.html create mode 100644 files/de/web/javascript/datenstrukturen/index.html create mode 100644 files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html create mode 100644 "files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" create mode 100644 files/de/web/javascript/eventloop/index.html create mode 100644 files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html create mode 100644 "files/de/web/javascript/guide/einf\303\274hrung/index.html" create mode 100644 files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html create mode 100644 files/de/web/javascript/guide/funktionen/index.html create mode 100644 files/de/web/javascript/guide/grammatik_und_typen/index.html create mode 100644 files/de/web/javascript/guide/index.html create mode 100644 files/de/web/javascript/guide/indexed_collections/index.html create mode 100644 files/de/web/javascript/guide/keyed_collections/index.html create mode 100644 files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html create mode 100644 files/de/web/javascript/guide/meta_programming/index.html create mode 100644 files/de/web/javascript/guide/mit_objekten_arbeiten/index.html create mode 100644 files/de/web/javascript/guide/modules/index.html create mode 100644 files/de/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/de/web/javascript/guide/regular_expressions/index.html create mode 100644 files/de/web/javascript/guide/schleifen_und_iterationen/index.html create mode 100644 files/de/web/javascript/guide/textformatierung/index.html create mode 100644 files/de/web/javascript/guide/using_promises/index.html create mode 100644 files/de/web/javascript/index.html create mode 100644 files/de/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/de/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/de/web/javascript/javascript_technologieuebersicht/index.html create mode 100644 files/de/web/javascript/language_resources/index.html create mode 100644 files/de/web/javascript/reference/about/index.html create mode 100644 files/de/web/javascript/reference/fehler/already_has_pragma/index.html create mode 100644 files/de/web/javascript/reference/fehler/array_sort_argument/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_octal/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_radix/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html create mode 100644 files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_access_property/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_delete/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_redefine_property/index.html create mode 100644 files/de/web/javascript/reference/fehler/cyclic_object_value/index.html create mode 100644 files/de/web/javascript/reference/fehler/dead_object/index.html create mode 100644 files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_octal/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html create mode 100644 files/de/web/javascript/reference/fehler/equal_as_assign/index.html create mode 100644 files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html create mode 100644 files/de/web/javascript/reference/fehler/getter_only/index.html create mode 100644 files/de/web/javascript/reference/fehler/identifier_after_number/index.html create mode 100644 files/de/web/javascript/reference/fehler/illegal_character/index.html create mode 100644 files/de/web/javascript/reference/fehler/in_operator_no_object/index.html create mode 100644 files/de/web/javascript/reference/fehler/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_array_length/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_date/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html create mode 100644 files/de/web/javascript/reference/fehler/is_not_iterable/index.html create mode 100644 files/de/web/javascript/reference/fehler/json_bad_parse/index.html create mode 100644 files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/fehler/malformed_uri/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html create mode 100644 files/de/web/javascript/reference/fehler/more_arguments_needed/index.html create mode 100644 files/de/web/javascript/reference/fehler/negative_repetition_count/index.html create mode 100644 files/de/web/javascript/reference/fehler/no_non-null_object/index.html create mode 100644 files/de/web/javascript/reference/fehler/no_properties/index.html create mode 100644 files/de/web/javascript/reference/fehler/no_variable_name/index.html create mode 100644 files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_a_codepoint/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_a_constructor/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_a_function/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_defined/index.html create mode 100644 files/de/web/javascript/reference/fehler/precision_range/index.html create mode 100644 files/de/web/javascript/reference/fehler/property_access_denied/index.html create mode 100644 files/de/web/javascript/reference/fehler/read-only/index.html create mode 100644 files/de/web/javascript/reference/fehler/redeclared_parameter/index.html create mode 100644 files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/de/web/javascript/reference/fehler/reserved_identifier/index.html create mode 100644 files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html create mode 100644 files/de/web/javascript/reference/fehler/stmt_after_return/index.html create mode 100644 files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html create mode 100644 files/de/web/javascript/reference/fehler/too_much_recursion/index.html create mode 100644 files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html create mode 100644 files/de/web/javascript/reference/fehler/undeclared_var/index.html create mode 100644 files/de/web/javascript/reference/fehler/undefined_prop/index.html create mode 100644 files/de/web/javascript/reference/fehler/unexpected_token/index.html create mode 100644 files/de/web/javascript/reference/fehler/unexpected_type/index.html create mode 100644 files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html create mode 100644 files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html create mode 100644 files/de/web/javascript/reference/fehler/var_hides_argument/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/de/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/de/web/javascript/reference/functions/get/index.html create mode 100644 files/de/web/javascript/reference/functions/index.html create mode 100644 files/de/web/javascript/reference/functions/methoden_definitionen/index.html create mode 100644 files/de/web/javascript/reference/functions/pfeilfunktionen/index.html create mode 100644 files/de/web/javascript/reference/functions/rest_parameter/index.html create mode 100644 files/de/web/javascript/reference/functions/set/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/prototypen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/unobserve/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/@@species/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/isview/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/slice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/transfer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/add/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/and/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/compareexchange/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/exchange/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/islockfree/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/load/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/or/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/store/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/sub/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/wait/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/wake/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/xor/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/buffer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/bytelength/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/byteoffset/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getfloat32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getfloat64/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setfloat32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setfloat64/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/@@toprimitive/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaleformat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/de/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/de/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/float32array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/float64array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/isgenerator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/de/web/javascript/reference/global_objects/index.html create mode 100644 files/de/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/int16array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/int32array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/int8array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/compare/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/format/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/pluralrules/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/de/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/json/index.html create mode 100644 files/de/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/de/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/@@species/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/@@tostringtag/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/math.random/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/de/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/null/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tointeger/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/de/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/reflect/apply/index.html create mode 100644 files/de/web/javascript/reference/global_objects/reflect/construct/index.html create mode 100644 files/de/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/flags/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/input/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/suchen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimleft/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimright/index.html create mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/de/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/de/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/de/web/javascript/reference/global_objects/webassembly/compile/index.html create mode 100644 files/de/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html create mode 100644 files/de/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/de/web/javascript/reference/index.html create mode 100644 files/de/web/javascript/reference/iteration_protocols/index.html create mode 100644 files/de/web/javascript/reference/klassen/constructor/index.html create mode 100644 files/de/web/javascript/reference/klassen/extends/index.html create mode 100644 files/de/web/javascript/reference/klassen/index.html create mode 100644 files/de/web/javascript/reference/klassen/static/index.html create mode 100644 files/de/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/de/web/javascript/reference/operators/addition/index.html create mode 100644 files/de/web/javascript/reference/operators/array_comprehensions/index.html create mode 100644 files/de/web/javascript/reference/operators/async_function/index.html create mode 100644 files/de/web/javascript/reference/operators/await/index.html create mode 100644 files/de/web/javascript/reference/operators/bitwise_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/class/index.html create mode 100644 files/de/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/dekrement/index.html create mode 100644 files/de/web/javascript/reference/operators/delete/index.html create mode 100644 files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html create mode 100644 files/de/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/de/web/javascript/reference/operators/function/index.html create mode 100644 files/de/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/de/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/de/web/javascript/reference/operators/grouping/index.html create mode 100644 files/de/web/javascript/reference/operators/in/index.html create mode 100644 files/de/web/javascript/reference/operators/index.html create mode 100644 files/de/web/javascript/reference/operators/inkrement/index.html create mode 100644 files/de/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/de/web/javascript/reference/operators/logische_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/modulo/index.html create mode 100644 files/de/web/javascript/reference/operators/new.target/index.html create mode 100644 files/de/web/javascript/reference/operators/new/index.html create mode 100644 files/de/web/javascript/reference/operators/objekt_initialisierer/index.html create mode 100644 files/de/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/de/web/javascript/reference/operators/optionale_verkettung/index.html create mode 100644 files/de/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/de/web/javascript/reference/operators/spread_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/de/web/javascript/reference/operators/super/index.html create mode 100644 files/de/web/javascript/reference/operators/this/index.html create mode 100644 files/de/web/javascript/reference/operators/typeof/index.html create mode 100644 files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/void/index.html create mode 100644 files/de/web/javascript/reference/operators/yield/index.html create mode 100644 files/de/web/javascript/reference/operators/yield_star_/index.html create mode 100644 files/de/web/javascript/reference/operators/zuweisungsoperator/index.html create mode 100644 files/de/web/javascript/reference/statements/async_function/index.html create mode 100644 files/de/web/javascript/reference/statements/block/index.html create mode 100644 files/de/web/javascript/reference/statements/break/index.html create mode 100644 files/de/web/javascript/reference/statements/class/index.html create mode 100644 files/de/web/javascript/reference/statements/const/index.html create mode 100644 files/de/web/javascript/reference/statements/continue/index.html create mode 100644 files/de/web/javascript/reference/statements/debugger/index.html create mode 100644 files/de/web/javascript/reference/statements/default/index.html create mode 100644 files/de/web/javascript/reference/statements/do...while/index.html create mode 100644 files/de/web/javascript/reference/statements/empty/index.html create mode 100644 files/de/web/javascript/reference/statements/export/index.html create mode 100644 files/de/web/javascript/reference/statements/for...in/index.html create mode 100644 files/de/web/javascript/reference/statements/for...of/index.html create mode 100644 files/de/web/javascript/reference/statements/for/index.html create mode 100644 files/de/web/javascript/reference/statements/for_each...in/index.html create mode 100644 files/de/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/de/web/javascript/reference/statements/funktion/index.html create mode 100644 files/de/web/javascript/reference/statements/if...else/index.html create mode 100644 files/de/web/javascript/reference/statements/import/index.html create mode 100644 files/de/web/javascript/reference/statements/index.html create mode 100644 files/de/web/javascript/reference/statements/label/index.html create mode 100644 files/de/web/javascript/reference/statements/let/index.html create mode 100644 files/de/web/javascript/reference/statements/return/index.html create mode 100644 files/de/web/javascript/reference/statements/switch/index.html create mode 100644 files/de/web/javascript/reference/statements/throw/index.html create mode 100644 files/de/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/de/web/javascript/reference/statements/var/index.html create mode 100644 files/de/web/javascript/reference/statements/while/index.html create mode 100644 files/de/web/javascript/reference/strict_mode/index.html create mode 100644 files/de/web/javascript/reference/template_strings/index.html create mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html create mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html create mode 100644 files/de/web/javascript/speicherverwaltung/index.html create mode 100644 files/de/web/javascript/typed_arrays/index.html create mode 100644 files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html create mode 100644 files/de/web/manifest/index.html create mode 100644 files/de/web/manifest/short_name/index.html create mode 100644 files/de/web/mathml/attribute/index.html create mode 100644 files/de/web/mathml/attribute/werte/index.html create mode 100644 files/de/web/mathml/beispiele/index.html create mode 100644 files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html create mode 100644 files/de/web/mathml/beispiele/quadratische_gleichung/index.html create mode 100644 files/de/web/mathml/element/index.html create mode 100644 files/de/web/mathml/element/maction/index.html create mode 100644 files/de/web/mathml/element/math/index.html create mode 100644 files/de/web/mathml/element/menclose/index.html create mode 100644 files/de/web/mathml/element/merror/index.html create mode 100644 files/de/web/mathml/element/mfenced/index.html create mode 100644 files/de/web/mathml/element/mfrac/index.html create mode 100644 files/de/web/mathml/element/mi/index.html create mode 100644 files/de/web/mathml/element/mn/index.html create mode 100644 files/de/web/mathml/element/mo/index.html create mode 100644 files/de/web/mathml/element/mover/index.html create mode 100644 files/de/web/mathml/element/mpadded/index.html create mode 100644 files/de/web/mathml/element/mphantom/index.html create mode 100644 files/de/web/mathml/element/mroot/index.html create mode 100644 files/de/web/mathml/element/mrow/index.html create mode 100644 files/de/web/mathml/element/ms/index.html create mode 100644 files/de/web/mathml/element/mspace/index.html create mode 100644 files/de/web/mathml/element/msqrt/index.html create mode 100644 files/de/web/mathml/element/mstyle/index.html create mode 100644 files/de/web/mathml/element/msub/index.html create mode 100644 files/de/web/mathml/element/msubsup/index.html create mode 100644 files/de/web/mathml/element/msup/index.html create mode 100644 files/de/web/mathml/element/mtable/index.html create mode 100644 files/de/web/mathml/element/mtd/index.html create mode 100644 files/de/web/mathml/element/mtext/index.html create mode 100644 files/de/web/mathml/element/mtr/index.html create mode 100644 files/de/web/mathml/element/munder/index.html create mode 100644 files/de/web/mathml/element/munderover/index.html create mode 100644 files/de/web/mathml/index.html create mode 100644 files/de/web/performance/dns-prefetch/index.html create mode 100644 files/de/web/performance/index.html create mode 100644 files/de/web/progressive_web_apps/index.html create mode 100644 files/de/web/reference/api/index.html create mode 100644 files/de/web/reference/index.html create mode 100644 files/de/web/security/certificate_transparency/index.html create mode 100644 files/de/web/security/index.html create mode 100644 files/de/web/security/public_key_pinning/index.html create mode 100644 files/de/web/svg/attribute/class/index.html create mode 100644 files/de/web/svg/attribute/index.html create mode 100644 files/de/web/svg/attribute/preserveaspectratio/index.html create mode 100644 files/de/web/svg/element/animate/index.html create mode 100644 files/de/web/svg/element/circle/index.html create mode 100644 files/de/web/svg/element/foreignobject/index.html create mode 100644 files/de/web/svg/element/index.html create mode 100644 files/de/web/svg/element/path/index.html create mode 100644 files/de/web/svg/element/polygon/index.html create mode 100644 files/de/web/svg/element/rect/index.html create mode 100644 files/de/web/svg/element/svg/index.html create mode 100644 files/de/web/svg/element/textpath/index.html create mode 100644 files/de/web/svg/element/view/index.html create mode 100644 files/de/web/svg/index.html create mode 100644 files/de/web/svg/namespaces_crash_course/index.html create mode 100644 "files/de/web/svg/tutorial/einf\303\274hrung/index.html" create mode 100644 files/de/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/de/web/svg/tutorial/index.html create mode 100644 files/de/web/svg/tutorial/pfade/index.html create mode 100644 files/de/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/de/web/svg/tutorial/svg_schriftarten/index.html create mode 100644 files/de/web/svg/tutorial/tools_for_svg/index.html create mode 100644 files/de/web/web_components/custom_elements/index.html create mode 100644 files/de/web/web_components/index.html create mode 100644 files/de/web/web_components/using_custom_elements/index.html create mode 100644 files/de/web/webapi/index.html create mode 100644 files/de/web/webapi/verwenden_von_geolocation/index.html create mode 100644 files/de/web/xml/index.html create mode 100644 "files/de/web/xml/xml_einf\303\274hrung/index.html" create mode 100644 files/de/web/xslt/index.html (limited to 'files/de/web') diff --git a/files/de/web/accessibility/understanding_wcag/index.html b/files/de/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/de/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,59 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - NeedsTranslation + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).

+ +

The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.

+ +

The four principles

+ +

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

+ +

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

+ + + +

Should I use WCAG 2.0 or 2.1?

+ +

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

+ +

What is WCAG 2.1?

+ +

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

+ +

WCAG 2.1 includes:

+ + + + + +

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

+ +

What is accessibility? and particularity the Accessibility guidelines and the law section provide more related information.

diff --git a/files/de/web/accessibility/understanding_wcag/perceivable/index.html b/files/de/web/accessibility/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..e8059d8fca --- /dev/null +++ b/files/de/web/accessibility/understanding_wcag/perceivable/index.html @@ -0,0 +1,359 @@ +--- +title: Perceivable +slug: Web/Accessibility/Understanding_WCAG/Perceivable +tags: + - Accessibility + - NeedsTranslation + - Principle 1 + - TopicStub + - WCAG + - Web Content Accessibility Guidelines + - contrast + - different presentation + - text alternatives + - time-based media +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.

+ +
+

Note: To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

+
+ +

Guideline 1.1 — Providing text alternatives for non-text content

+ +

The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.1.1 Provide text equivalents  (A)All images that convey meaningful content should be given suitable alternative text.Text alternatives.
Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the longdesc attribute. +

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

+
Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). +

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

+
UI Controls such as form elements and buttons should have text labels that describe their purpose.Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls.
Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. +

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

+ +

If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.

+
+ +
+

Note: Also see the WCAG description for Guideline 1.1: Text alternatives.

+
+ +

Guideline 1.2 — Providing text alternatives for time-based media

+ +

Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provide captions for web-based video (A)You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
1.2.3 Provide text transcript or audio description for web-based video (A)You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provide captions for live audio (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provide audio descriptions for prerecorded video (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provide sign language equivalent to prerecorded audio (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provide extended video with audio descriptions (AAA)Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 
1.2.8 Provide an alternative for prerecorded media (AAA)For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
1.2.9 Provide a transcript for live audio (AAA)For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
+ +
+

Note: Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

+
+ +

Guideline 1.3 — Create content that can be presented in different ways

+ +

This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.3.1 Info and relationships (A) +

Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:

+ +
    +
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • +
  • Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. alt text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.
    • +
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • +
+ 		The whole of +

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

+
1.3.2 Meaningful content sequence (A)A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) +

Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:

+ +
    +
  • "Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.
    • +
  • "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.
    • +
  • "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
    • +
+ +
+

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

+
+ 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. +

Understanding Orientation 

+
1.3.5 Identify Input Purpose (AA) added in 2.1 +

 

+ +

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

+ 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
+ +
+

Note: Also see the WCAG description for Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

+
+ +

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

+ +

This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.4.1 Use of color (A) +

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

+ 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) +

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

+ +
    +
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		See Color and color contrast.
1.4.4 Resize text (AA)The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible. 
1.4.5 Images of text (AA)Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images. 
1.4.6 Enhanced contrast (AAA) +

This follows, and builds on, criterion 1.4.3.

+ +
    +
  • Text and its background should have a contrast ratio of at least 7.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		See Color and color contrast.
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) +

For text content presentation, the following should be true:

+ +
    +
  • Foreground and background colors should be user-selectable.
    • +
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • +
  • Text should not be fully justified (e.g. text-align: justify;)
    • +
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • +
  • When the text size is doubled, the content should not need to be scrolled.
    • +
+ 		 
1.4.9 Images of text (No Exception) (AAA)Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way. 
1.4.10 Reflow (AA) added in 2.1 +
    +
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • +
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • +
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • +
+ 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 +

No loss of content or functionality occurs when the following styles are applied: 

+ +
    +
  • Line height (line spacing) to at least 1.5 times the font size;
    • +
  • Spacing following paragraphs to at least 2 times the font size;
    • +
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • +
  • Word spacing to at least 0.16 times the font size.
    • +
+ 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 +

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +
    +
  • dismissable (can be closed/removed)
    • +
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • +
  • persistent (the additional content does not disappear without user action)
    • +
+ 		Understanding Content on Hover or Focus
+ +
+

Note: Also see the WCAG description for Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

+
+ +

 

+ +

See Also

+ + + +

 

diff --git a/files/de/web/api/aescbcparams/index.html b/files/de/web/api/aescbcparams/index.html new file mode 100644 index 0000000000..65c2effd7b --- /dev/null +++ b/files/de/web/api/aescbcparams/index.html @@ -0,0 +1,52 @@ +--- +title: AesCbcParams +slug: Web/API/AesCbcParams +translation_of: Web/API/AesCbcParams +--- +
{{ APIRef("Web Crypto API") }}
+ +

Das AesCbcParams Verzeichnis (dictionary) der Web Crypto API wird als algorithm Parameter an die Funktionen {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} übergeben, wenn der Algorithmus AES-CBC verwendet wird.

+ +

Eigenschaften

+ +
+
name
+
A {{domxref("DOMString")}}. Der Wert sollte auf AES-CBC gesetzt werden.
+
iv
+
Ein {{domxref("BufferSource")}}. Der Initialisierungsvektor. Er muss 16 Bytes lang sein und sollte unvorhersehbar und am besten kryptografisch zufällig sein. Er muss aber nicht geheim sein, er kann unverschlüsselt mit dem Kryptogram übertragen werden.
+
+ +

Beispiele

+ +

Siehe Beispiele für {{domxref("SubtleCrypto.encrypt()")}} und {{domxref("SubtleCrypto.decrypt()")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('Web Crypto API', '#dfn-AesCbcParams', 'SubtleCrypto.AesCbcParams') }}{{ Spec2('Web Crypto API') }}
+ +

Browser Kompatibilität

+ +

Browser mit Unterstützung für den "AES-CBC" Algorithmus werden die Methoden {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} für diesen Typ unterstützen.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/animationevent/index.html b/files/de/web/api/animationevent/index.html new file mode 100644 index 0000000000..7bd808e0ca --- /dev/null +++ b/files/de/web/api/animationevent/index.html @@ -0,0 +1,190 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Experimental + - Expérimental(2) + - Interface + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - Web Animations +translation_of: Web/API/AnimationEvent +--- +

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

+ +

The AnimationEvent interface represents events providing information related to animations.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Also inherits properties from its parent {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
+
Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.
+
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
+
Is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, elapsedTime is 0.0 unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with elapsedTime containing  (-1 * delay).
+
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
+
Is a {{domxref("DOMString")}}, starting with '::', containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: ''.
+
+ +

Constructor

+ +
+
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
+
Creates an AnimationEvent event with the given parameters.
+
+ +

Methods

+ +

Also inherits methods from its parent {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+
Initializes a AnimationEvent created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

1.0 {{ property_prefix("webkit") }}

+ +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		4.0 {{ property_prefix("webkit") }}
AnimationEvent() constructor +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}1.0{{ CompatGeckoDesktop("6.0") }}
+ Removed in {{ CompatGeckoDesktop("23.0") }}		10.0124.0
pseudoelement{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{ CompatGeckoMobile("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{CompatChrome(43.0)}}
AnimationEvent() constructor{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}
+ Removed in {{ CompatGeckoMobile("23.0") }}		10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
pseudoelement{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/de/web/api/audiocontext/decodeaudiodata/index.html b/files/de/web/api/audiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..32cfda28eb --- /dev/null +++ b/files/de/web/api/audiocontext/decodeaudiodata/index.html @@ -0,0 +1,218 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der  {{domxref("XMLHttpRequest")}} response Eigenschaft befüllt, nachdem der responseType auf arraybuffer gesetzt wurde. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.

+
+ +

Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.

+ +

Syntax

+ +

Alte Callbacksyntax:

+ +
audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the dec​oded data here
+});
+ +

Neue Promise basierte Syntax:

+ +
audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});
+ +

Beispiel

+ +

In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.

+ +

Ältere Callbacksyntax

+ +

In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.

+ +

Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.

+ +
+

Note: You can run the example live (or view the source.)

+
+ +
// Variablen definieren
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// Benutzt XHR um einen Track zu laden und
+// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren.
+// Anschließend wird der Buffer in eine Quelle kopiert.
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// Buttons setzen um Wiedergabe zu starten und stoppen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// Script ausgeben
+
+pre.innerHTML = myScript.innerHTML;
+ +

Neue Promise basierte Syntax

+ +
ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // Die dekodierten PCM Daten können hier verwendet werden
+});
+ +

Parameter

+ +
+
ArrayBuffer
+
Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der responseType auf arraybuffer gesetzt wurde.
+
DecodeSuccessCallback
+
Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.
+
DecodeErrorCallback
+
Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.
+
+ +

Rückgabewerte

+ +

Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}{{Spec2('Web Audio API')}} 
+ +

Browserunterstützung

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
Promise-based syntax{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
Promise-based syntax{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/audiocontext/index.html b/files/de/web/api/audiocontext/index.html new file mode 100644 index 0000000000..cc2c2db92e --- /dev/null +++ b/files/de/web/api/audiocontext/index.html @@ -0,0 +1,232 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +translation_of: Web/API/AudioContext +--- +

{{APIRef("Web Audio API")}}

+ +
+

Die AudioContext Schnittstelle bildet einen Audioverarbeitungsdiagramm, aus mehreren miteinander verbundenen Audiomodulen bestehend, ab. Bei jedem dieser Module handelt es sich um einen Knoten ({{domxref("AudioNode")}}). Ein AudioContext kontrolliert sowohl die Erstellung der einzelnen in ihm enthaltenen Knoten als auch den Prozess der Audioverarbeitung oder des Dekodierens. Als erster Schritt muss immer ein Audio Kontext angelegt werden, da sämtliche Funktionen innerhalb dieses Kontextes ausgeführt werden.

+
+ +

Ein AudioContext kann das Ziel von Events sein, aufgrund dessen unterstützt er auch die {{domxref("EventTarget")}} Schnittstelle.

+ +

Eigenschaften

+ +
+
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
+
Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at 0.
+
{{domxref("AudioContext.destination")}} {{readonlyInline}}
+
Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
+
{{domxref("AudioContext.listener")}} {{readonlyInline}}
+
Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.
+
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
+
Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.
+
{{domxref("AudioContext.state")}} {{readonlyInline}}
+
Returns the current state of the AudioContext.
+
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
+
Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.
+
+ +

Event handlers

+ +
+
{{domxref("AudioContext.onstatechange")}}
+
An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the AudioContext's state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}.)
+
+ +

Methoden

+ +

Implementiert zusätzlich die Methoden der Schnittstelle {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioContext.close()")}}
+
Closes the audio context, releasing any system audio resources that it uses.
+
{{domxref("AudioContext.createBuffer()")}}
+
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioContext.createBufferSource()")}}
+
Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
+
{{domxref("AudioContext.createMediaElementSource()")}}
+
Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.
+
{{domxref("AudioContext.createMediaStreamSource()")}}
+
Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.
+
{{domxref("AudioContext.createMediaStreamDestination()")}}
+
Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.
+
{{domxref("AudioContext.createScriptProcessor()")}}
+
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
+
{{domxref("AudioContext.createStereoPanner()")}}
+
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
+
{{domxref("AudioContext.createAnalyser()")}}
+
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
+
{{domxref("AudioContext.createBiquadFilter()")}}
+
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
+
{{domxref("AudioContext.createChannelMerger()")}}
+
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
+
{{domxref("AudioContext.createChannelSplitter()")}}
+
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
+
{{domxref("AudioContext.createConvolver()")}}
+
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
+
{{domxref("AudioContext.createDelay()")}}
+
Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
+
{{domxref("AudioContext.createDynamicsCompressor()")}}
+
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
+
{{domxref("AudioContext.createGain()")}}
+
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
+
{{domxref("AudioContext.createOscillator()")}}
+
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
+
{{domxref("AudioContext.createPanner()")}}
+
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
+
{{domxref("AudioContext.createPeriodicWave()")}}
+
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
+
{{domxref("AudioContext.createWaveShaper()")}}
+
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
+
{{domxref("AudioContext.createAudioWorker()")}}
+
Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.
+
{{domxref("AudioContext.decodeAudioData()")}}
+
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
+
{{domxref("AudioContext.resume()")}}
+
Resumes the progression of time in an audio context that has previously been suspended.
+
{{domxref("AudioContext.suspend()")}}
+
Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.
+
+ +

Obsolete Methoden

+ +
+
{{domxref("AudioContext.createJavaScriptNode()")}}
+
Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.
+
{{domxref("AudioContext.createWaveTable()")}}
+
Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.
+
+ +

Beispiele

+ +

Grundsätzliche Deklarierung eines Audio Kontextes:

+ +
var audioCtx = new AudioContext();
+ +

Browserunabhängige Variante:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}{{Spec2('Web Audio API')}} 
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}
+ 35		{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
createStereoPanner(){{CompatChrome(42.0)}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoDesktop(37.0)}} 2.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
createStereoPanner(){{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
onstatechange, state, suspend(), resume(){{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/audiodestinationnode/index.html b/files/de/web/api/audiodestinationnode/index.html new file mode 100644 index 0000000000..4acda5845c --- /dev/null +++ b/files/de/web/api/audiodestinationnode/index.html @@ -0,0 +1,141 @@ +--- +title: AudioDestinationNode +slug: Web/API/AudioDestinationNode +translation_of: Web/API/AudioDestinationNode +--- +

{{APIRef("Web Audio API")}}

+ +
+

Die AudioDestinationNode Schnittstelle repräsentiert das Ziel bzw. den Ausgang eines Audiographen in einem gegebenen Kontext — in der Regel die Lautsprecher. Es könnte aber auch ein Knoten (Node) sein, der Audiodaten in einem OfflineAudioContext aufzeichnet.

+
+ +

AudioDestinationNode hat einen Eingang und keinen Ausgang (denn er ist der Ausgang, kein weiterer Audio Node kann verlinkt werden). Die Anzahl der Kanäle des Eingangs muss zwischen null und dem Wert von maxChannelCount liegen, sonst wird eine Exception ausgelöst.

+ +

Der AudioDestinationNode eines gegebenen AudioContext kann über das {{domxref("AudioContext.destination")}} Attribut erzeugt bzw. empfangen werden.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Anzahl Inputs1
Anzahl Outputs0
Kanalzählmethode"explicit"
Kanal Anzahl2
Kanal Interpretation"speakers"
+ +

Eigenschaften

+ +

erbt Eigenschaften von der Elternklasse, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AudioDestinationNode.maxChannelCount")}}
+
Ist ein unsigned long der die maximale Kanalzahl definiert, die das physische Gerät bedienen kann.
+
+ +

Methoden

+ +

Keine spezifischen Methoden; erbt die Methoden der Elternklasse, {{domxref("AudioNode")}}.

+ +

Beispiel

+ +

Das Benutzen des AudioDestinationNode ist per Design einfach gehalten — es repräsentiert den Ausgang des physikalischen Geräts (Lautsprecher), so dass man dieses mit ein paar Zeilen Code mit einem Audiographen verbinden kann:

+ +
var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+ +

Für ein kompletteres Beispiel, sehen Sie sich eines unserer MDN Web Audio Beispiele, wie den Voice-change-o-matic oder das Violent Theremin an.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiodestinationnode-interface', 'AudioDestinationNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

See also

+ + diff --git a/files/de/web/api/audionode/index.html b/files/de/web/api/audionode/index.html new file mode 100644 index 0000000000..8ad96dc760 --- /dev/null +++ b/files/de/web/api/audionode/index.html @@ -0,0 +1,191 @@ +--- +title: AudioNode +slug: Web/API/AudioNode +translation_of: Web/API/AudioNode +--- +

{{ APIRef("Web Audio API") }}

+ +

Ein AudioNode ist eine generische Schnittstelle um ein Signalverarbeitungsmodul wie z.B. ein HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} Element, ein {{domxref("OscillatorNode")}}, die Audio Destination, ein zwischengeschaltenes audio-verarbeitendes Modul wie z.B. einen {{domxref("BiquadFilterNode")}} oder {{domxref("ConvolverNode")}}), oder Lautstärkeregler (like {{domxref("GainNode")}}).

+ +

AudioNodes participating in an AudioContext create a audio routing graph.

+ +

Ein AudioNode hat Ein- und Ausgänge, jeweils mit einer gegebenen Anzahl an Kanälen. Einen AudioNode ohne Eingänge und mit einem oder mehreren Ausgängen nennt man source node (dt.: Quellknoten). Die Art der Signalverarbeitung in einem Audio Node variiert mit dessen Funktion. Der folgende Ablauf liegt jedoch immer zugrunde:  das Signal am Eingang wird eingelesen,  das Signal wird zu einem neuen Signal verarbeitet und an den Ausgang geleitet. In einigen Fällen, wir das Signal unverarbeitet durchgeschleust, so z.B. beim {{domxref("AnalyserNode")}}, wo das Resultat der Signalverarbeitung separat zugänglich ist.

+ +

Mehrere Nodes können zu einem Processing Graph (dt.:Verarbeitungs-Netz) verbunden werden. Ein solcher Graph befindet sich immer in genau einem {{domxref("AudioContext")}}. Signal- verarbeitende Nodes erben die Eigenschaften und Methoden von Audio Node, implementieren aber auch eigene Funktionalität. Weitere Informationen geben die Seiten der speziellen Audio Nodes,  die sie auf der Homepage der Web Audio API finden.

+ +
+

Hinweis: Ein AudioNode kann das Ziel von Events sein, und implementiert daher die {{domxref("EventTarget")}} Schnittstelle.

+
+ +

Properties

+ +
+
{{domxref("AudioNode.context")}} {{readonlyInline}}
+
Liefert den assoziierten {{domxref("AudioContext")}}, der den signalverarbeitenden Graphen (processing graph) enthält, in den der Node eingebunden ist.
+
+ +
+
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
+
Liefert die Anzahl der Eingänge des Nodes. Source nodes (dt. Quellknoten) sind definiert als Nodes, deren numberOfInputs Eigenschaft einen Wert von 0 aufweist.
+
+ +
+
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
+
Liefert die Anzahl der Ausgänge des Nodes. Destination nodes (dt.: Zielknoten) — wie {{ domxref("AudioDestinationNode") }} — haben einen Wert von  0 für diese Eigenschaft.
+
+ +
+
{{domxref("AudioNode.channelCount")}}
+
Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.
+
+ +
+
{{domxref("AudioNode.channelCountMode")}}
+
Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
+
{{domxref("AudioNode.channelInterpretation")}}
+
Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio up-mixing and down-mixing will happen.
+ The possible values are "speakers" or "discrete".
+
+ +

Methods

+ +

Also implements methods from the interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioNode.connect(AudioNode)")}}
+
Allows us to connect one output of this node to one input of another node.
+
{{domxref("AudioNode.connect(AudioParam)")}}
+
Allows us to connect one output of this node to one input of an audio parameter.
+
{{domxref("AudioNode.disconnect()")}}
+
Allows us to disconnect the current node from another one it is already connected to.
+
+ +

Example

+ +

This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.)

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}}{{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		{{CompatVersionUnknown}}
channelCount channelCountMode{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
connect(AudioParam){{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
channelCount
+ channelCountMode		{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
connect(AudioParam){{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/de/web/api/audiotrack/index.html b/files/de/web/api/audiotrack/index.html new file mode 100644 index 0000000000..3ef55d93ad --- /dev/null +++ b/files/de/web/api/audiotrack/index.html @@ -0,0 +1,86 @@ +--- +title: AudioTrack +slug: Web/API/AudioTrack +translation_of: Web/API/AudioTrack +--- +
{{APIRef("HTML DOM")}}
+ +

Das AudioTrack Interface stellt einen einzelnen Audiotrack aus einem der HTML-Medienelemente {{HTMLElement("audio")}} oder {{HTMLElement("video")}} dar. Die häufigste Verwendung für ein AudioTrack Objekt ist das (De-)Aktivieren seiner Eigenschaft {{domxref("AudioTrack.enabled", "enabled")}} um den Track stummzuschalten.

+ +

Eigenschaften

+ +
+
{{domxref("AudioTrack.enabled", "enabled")}}
+
Ein Boolescher Wert, der kontrolliert ob der Sound für den Audiotrack aktiviert ist. Steht dieser Wert auf  false, ist der Ton stummgeschaltet.
+
{{domxref("AudioTrack.id", "id")}} {{ReadOnlyInline}}
+
Eine {{domxref("DOMString")}}, die den Track eindeutig innerhalb des Mediums identifiziert. Diese ID kann genutzt werden, um einen bestimmten Track auf einer Audio-Track-Liste durch Aufruf von {{domxref("AudioTrackList.getTrackById()")}} zu finden. Die ID kann auch als Fragment der URL genutzt werden, wenn das Medium die Suche per Medienfragment laut Media Fragments URI-Spezifikation unterstützt.
+
{{domxref("AudioTrack.kind", "kind")}} {{ReadOnlyInline}}
+
Ein {{domxref("DOMString")}}, das bestimmt zu welcher Kategorie ein Track gehört. Der Haupt-Audiotrack hätte bspw. als kind die Eigenschaft "main".
+
{{domxref("AudioTrack.label", "label")}} {{ReadOnlyInline}}
+
Ein {{domxref("DOMString")}}, das ein visuelles Label für den Track anzeigt. Z.B. hätte ein Audiokommentar-Track für einen Film als label  "Kommentar mit Regisseur Max Mustermann und den Schauspielern XYZ und ZYX." Dieser String bleibt leer, wenn kein Label angegeben wurde.
+
{{domxref("AudioTrack.language", "language")}} {{ReadOnlyInline}}
+
A {{domxref("DOMString")}} specifying the audio track's primary language, or an empty string if unknown. The language is specified as a BCP 47 ({{RFC(5646)}}) language code, such as "en-US" or "pt-BR".
+
{{domxref("AudioTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}
+
The {{domxref("SourceBuffer")}} that created the track. Returns null if the track was not created by a {{domxref("SourceBuffer")}} or the {{domxref("SourceBuffer")}} has been removed from the {{domxref("MediaSource.sourceBuffers")}} attribute of its parent media source.
+
+ +

Usage notes

+ +

To get an AudioTrack for a given media element, use the element's {{domxref("HTMLMediaElement.audioTracks", "audioTracks")}} property, which returns an {{domxref("AudioTrackList")}} object from which you can get the individual tracks contained in the media:

+ +
var el = document.querySelector("video");
+var tracks = el.audioTracks;
+
+ +

You can then access the media's individual tracks using either array syntax or functions such as {{jsxref("Array.forEach", "forEach()")}}.

+ +

This first example gets the first audio track on the media:

+ +
var firstTrack = tracks[0];
+ +

The next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable userLanguage) and disabling any others.

+ +
tracks.forEach(function(track) {
+  if (track.language === userLanguage) {
+    track.enabled = true;
+  } else {
+    track.enabled = false;
+  }
+});
+
+ +

The {{domxref("AudioTrack.language", "language")}} is in standard ({{RFC(5646)}}) format. For US English, this would be "en-US", for example.

+ +

Example

+ +

{{page("/en-US/docs/Web/API/AudioTrack/label", "Example")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'media.html#audiotrack', 'AudioTrack')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'embedded-content-0.html#audiotrack', 'AudioTrack')}}{{Spec2('HTML5 W3C')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.AudioTrack")}}

diff --git a/files/de/web/api/battery_status_api/index.html b/files/de/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..498c8bb6ae --- /dev/null +++ b/files/de/web/api/battery_status_api/index.html @@ -0,0 +1,92 @@ +--- +title: Battery Status API +slug: Web/API/Battery_Status_API +translation_of: Web/API/Battery_Status_API +--- +

{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}

+ +

Die Battery Status API, oder kurz Battery API, stellt Informationen über den Ladezustand der Systembatterie zur Verfügung. Diese Informationen können zur Anpassung der Ressourcennutzung verwendet werden. Wenn nur noch wenig Energie zur Verfügung steht, sollten unnötige Operationen eingestellt werden, damit die Laufzeit erhöht wird. Oder aber der Zustand gespeichert werden, damit ein Datenverlust verhindert werden kann.

+ +

Die Battery Status API erweitert  {{domxref("window.navigator")}} mit einer Methode  {{domxref("navigator.getBattery()")}}, die ein Promise mit einem  {{domxref("BatteryManager")}} Objekt liefert, sowie einigen Nachrichten zum Überwachen des Batteriestatus.

+ +

Beispiel

+ +

In diesem Beispiel wird der Ladezustand (Netz, ladend, etc.) und Änderungen des Batterieniveaus und der Zeit überwacht. Dies erfolgt durch Überwachen der Events:  {{event("chargingchange")}}, {{event("levelchange")}} und {{event("chargingtimechange")}}, {{event("dischargingtimechange")}}.

+ +
navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery charging? "
+                + (battery.charging ? "Yes" : "No"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Battery level: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Battery charging time: "
+                 + battery.chargingTime + " seconds");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Battery discharging time: "
+                 + battery.dischargingTime + " seconds");
+  }
+
+});
+
+ +

Siehe auch die Beispiel in der Spezifikation.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Initiale Definition.
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.BatteryManager")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/blob/index.html b/files/de/web/api/blob/index.html new file mode 100644 index 0000000000..352c978ac5 --- /dev/null +++ b/files/de/web/api/blob/index.html @@ -0,0 +1,245 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Files + - Reference + - TopicStub + - checkTranslation +translation_of: Web/API/Blob +--- +

{{ APIRef("File API") }}

+ +

Übersicht

+ +

Ein Blob ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das {{ domxref("File") }}-Interface basiert auf Blob und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.

+ +

Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des {{domxref("Blob.Blob", "Blob()")}}-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von slice() möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.

+ +

Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der {{domxref("File")}}-Dokumentation genannt.

+ +
+

Note: The slice() method had initially taken length as the second argument to indicate the number of bytes to copy into the new Blob. If you specified values such that start + lengthexceeded the size of the source Blob, the returned Blob contained data from the start index to the end of the source Blob.

+
+ +
+

Zu beachten: Der slice()-Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: blob.mozSlice(). Safari: blob.webkitSlice(). Eine alte Version von slice() ohne Vendor-Präfix ist überholt. Die Unterstützung von blob.mozSlice() wurde mit Firefox 30 eingestellt.

+
+ +

Konstruktor

+ +
+
{{domxref("Blob.Blob", "Blob()")}}
+
Gibt einen neuen Blob zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.
+
+ +

Eigenschaften

+ +
+
{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
+
Gibt einen booleschen Wert zurück, der anzeigt, ob die {{domxref("Blob.close()")}}-Methode zu diesem Blob bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
Gibt die Größe des Blob-Inhalts in Bytes zurück.
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Ein String, der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.
+
+ +

Methoden

+ +
+
{{domxref("Blob.close()")}} {{experimental_inline}}
+
Schließt das Blob-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Gibt ein neues Blob-Objekt zurück, das die spezifierte Menge an Daten enthält.
+
+ +

Beispiele:

+ +

Beispielanwendung des Blob-Konstruktors

+ +

Der {{domxref("Blob.Blob", "Blob() constructor")}} ermöglicht es, Blobs aus Objekten zu erzeugen. Beispielsweise kann man einen Blob von einem String-Objekt erzeugen:

+ +
var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
+
+ +
+

{{ domxref("BlobBuilder") }} bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.

+ +
+
var builder = new BlobBuilder();
+var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');
+
+
+ +

Erstellen einer URL für ein "typed array" durch einen Blob

+ +

Beispiel-Code:

+ +
var typedArray = EinTypedArrayErstellen();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ
+var url = URL.createObjectURL(blob);
+// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src)
+
+ +

Daten aus einem Blob lesen

+ +

Um Daten aus einem Blob zu lesen, muss ein {{domxref("FileReader")}} genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result beinhaltet den Inhalt des Blobs
+});
+reader.readAsArrayBuffer(blob);
+ +

Über eine andere Methode von {{domxref("FileReader")}} ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Grundlegende Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support5[1]4[2]1011.10[1]5.1[1]
slice()10 {{property_prefix("webkit")}}
+ 21		5 {{property_prefix("moz")}}[3]
+ 13		10125.1 {{property_prefix("webkit")}}
Blob()constructor20{{CompatGeckoDesktop("13.0")}}1012.106
close()and isClosed{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
slice(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Blob()constructor{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
close()and isClosed{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+  
+ +

Anmerkung zur slice()-Implementierung

+ +

[1] Eine Version von slice(), die als zweites Argument die gewünschte Größe enthält, war in WebKit und Opera 11.10 implementiert. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von Blob.webkitSlice().

+ +

[2] Eine Variante von slice(), die als zweites Argument die gewünschte Größe enthält, war in Firefox 4 verfügbar. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von mozSlice().

+ +

[3] Vor Gecko 12.0 {{ geckoRelease("12.0") }} trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.

+ +

[4] Siehe {{bug("1048325")}}

+ +

Anmerkungen zu Gecko

+ +

Vor Gecko 12.0 {{ geckoRelease("12.0") }} gab es einen Bug, der das Verhalten von {{ manch("slice") }} beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.

+ +

Chrome Code - Scope

+ +

Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:

+ +
Cu.importGlobalProperties(['Blob']);
+
+ +

Blobs sind auch in Worker-Scopes verfügbar.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/arraybuffer/index.html b/files/de/web/api/body/arraybuffer/index.html new file mode 100644 index 0000000000..7550dfadc8 --- /dev/null +++ b/files/de/web/api/body/arraybuffer/index.html @@ -0,0 +1,87 @@ +--- +title: Body.arrayBuffer() +slug: Web/API/Body/arrayBuffer +translation_of: Web/API/Body/arrayBuffer +--- +
{{APIRef("Fetch")}}
+ +

Die Methode arrayBuffer() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.

+ +

Syntax

+ +
response.arrayBuffer().then(function(buffer) {
+  // mach etwas mit dem Buffer
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.

+ +

Beispiel

+ +

In unserem Live-Beispiel zum Abruf eines Array Buffers haben wir einen Wiedergabe-Knopf. Bei einem Klick darauf wird die Funktion getData() ausgeführt. Beachten Sie, dass vor der Wiedergabe die ganze Audio-Datei heruntergeladen wird. Benötigen Sie eine Wiedergabe noch während des Downloads (Streaming) ziehen Sie {{domxref("HTMLAudioElement")}} in Betracht:

+ +
new Audio(music.ogg).play()
+
+ +

In getData() erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor, um dann einen OGG Musik-Track abzurufen. Wir benutzen ebenfalls {{domxref("AudioContext.createBufferSource")}} um eine Audio-Puffer-Quelle zu erstellen. Ist der Abruf erfolgreich, lesen wir mit arrayBuffer() einen {{domxref("ArrayBuffer")}} aus der Antwort, dekodieren die Audiodaten mit {{domxref("AudioContext.decodeAudioData")}}, setzen die dekodierten Daten als Quelle für den Audio-Puffer fest und verbinden die Quelle mit {{domxref("AudioContext.destination")}}.

+ +

Wenn getData() durchgelaufen ist, starten wir die Wiedergabe mit start(0) und deaktivieren den Wiedergabe-Knopf, damit er nicht erneut geklickt werden kann, während die Wiedergabe läuft (was zu einem Fehler führen würde).

+ +
function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// Knöpfe zum Abspielen und Anhalten verknüpfen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.arrayBuffer")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/blob/index.html b/files/de/web/api/body/blob/index.html new file mode 100644 index 0000000000..53595fdbda --- /dev/null +++ b/files/de/web/api/body/blob/index.html @@ -0,0 +1,73 @@ +--- +title: Body.blob() +slug: Web/API/Body/blob +translation_of: Web/API/Body/blob +--- +
{{APIRef("Fetch")}}
+ +

Die Methode blob() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.

+ +

Syntax

+ +
response.blob().then(function(myBlob) {
+  // mach etwas mit myBlob
+});
+ +

Parameter

+ +

Keine.

+ +
Hinweis: Wenn die {{domxref("Response")}} vom {{domxref("Response.type")}} her "opaque" ist, hat der resultierende {{domxref("Blob")}} eine {{domxref("Blob.size")}} von 0 und einen {{domxref("Blob.type")}} eines leeren Strings "", wodurch er für Methoden wie {{domxref("URL.createObjectURL")}} unbrauchbar wird.
+ +

Rückgabewert

+ +

Ein Promise, welches in einen {{domxref("Blob")}} aufgelöst wird.

+ +

Beispiel

+ +

In unserem Beispiel für eine Fetch Anfrage (live ausführen) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit blob() einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-blob','blob()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.blob")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/body/index.html b/files/de/web/api/body/body/index.html new file mode 100644 index 0000000000..cbe7484d91 --- /dev/null +++ b/files/de/web/api/body/body/index.html @@ -0,0 +1,86 @@ +--- +title: Body.body +slug: Web/API/Body/body +translation_of: Web/API/Body/body +--- +
{{APIRef("Fetch")}}{{seecompattable}}
+ +

Die schreibgeschützte body Eigenschaft des {{domxref("Body")}} Mixin ist ein einfacher Getter, der dazu benutzt wird den Inhalt des Body als {{domxref("ReadableStream")}} bereitzustellen.

+ +

Syntax

+ +
var stream = responseInstance.body;
+ +

Wert

+ +

Ein {{domxref("ReadableStream")}}.

+ +

Beispiel

+ +

In unserem einfachen Stream-Pump-Beispiel rufen wir ein Bild ab, machen den Antwort-Stream mit response.body sichtbar, erstellen einen Reader mit {{domxref("ReadableStream.getReader()")}} und reihen die Teile des Streams in einen zweiten, benutzerdefinierten, lesbaren Stream — wodurch wie eine exakte Kopie des Bilds erhalten.

+ +
const image = document.getElementById('target');
+
+// Bild holen
+fetch('./tortoise.png')
+// Body als ReadableStream abrufen
+.then(response => response.body)
+.then(body => {
+  const reader = body.getReader();
+
+  return new ReadableStream({
+    start(controller) {
+      return pump();
+
+      function pump() {
+        return reader.read().then(({ done, value }) => {
+          // Stream schließen, wenn keine weiteren Daten verarbeitet werden müssen
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          // Das nächste Datenstück in unseren Ziel-Stream einreihen
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream => new Response(stream))
+.then(response => response.blob())
+.then(blob => URL.createObjectURL(blob))
+.then(url => console.log(image.src = url))
+.catch(err => console.error(err));
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-body','body')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.body")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/bodyused/index.html b/files/de/web/api/body/bodyused/index.html new file mode 100644 index 0000000000..052e8fcc7c --- /dev/null +++ b/files/de/web/api/body/bodyused/index.html @@ -0,0 +1,73 @@ +--- +title: Body.bodyUsed +slug: Web/API/Body/bodyUsed +translation_of: Web/API/Body/bodyUsed +--- +
{{APIRef("Fetch")}}
+ +

Die schreibgeschützte bodyUsed Eigenschaft des {{domxref("Body")}} Mixin enthält einen {{domxref("Boolean")}} der angibt, ob der Body schon eingelesen wurde.

+ +

Syntax

+ +
var myBodyUsed = response.bodyUsed;
+ +

Wert

+ +

Ein {{domxref("Boolean")}}.

+ +

Beispiel

+ +

In unserem Beispiel für eine Fetch Anfrage (live ausführen) erstellen wir eine neue Anforderung mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit blob() einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.

+ +

Beachten Sie, dass wir response.bodyUsed vor dem Aufruf von response.blob () und einmal danach in der Konsole protokollieren. Dies gibt vorher false zurück und anschließend true, da der Body ab diesem Punkt gelesen wurde.

+ +

HTML Inhalt

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JavaScript Inhalt

+ +
var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+    console.log(response.bodyUsed);
+    var res = response.blob();
+    console.log(response.bodyUsed);
+    return res;
+}).then(function(response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Example', '100%', '250px') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.bodyUsed")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/formdata/index.html b/files/de/web/api/body/formdata/index.html new file mode 100644 index 0000000000..4ceb02aeb4 --- /dev/null +++ b/files/de/web/api/body/formdata/index.html @@ -0,0 +1,62 @@ +--- +title: Body.formData() +slug: Web/API/Body/formData +translation_of: Web/API/Body/formData +--- +
{{APIRef("Fetch")}}
+ +

Die Methode formData() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.

+ +
+

Hinweis: Dies ist hauptsächlich für Service Worker relevant. Wenn ein Benutzer ein Formular absendet und ein Service Worker die Anfrage abfängt, könnten Sie bspw. formData() aufrufen, um eine Key-Value-Abbildung zu erhalten, einige Felder zu modifizieren und das Formular dann an den Server weiterzuschicken (oder lokal zu benutzen).

+
+ +

Syntax

+ +
response.formData()
+.then(function(formdata) {
+  // machen Sie etwas mit Ihren Formulardaten
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.

+ +

Beispiel

+ +

Wird nachgereicht.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.formData")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/index.html b/files/de/web/api/body/index.html new file mode 100644 index 0000000000..3693a73653 --- /dev/null +++ b/files/de/web/api/body/index.html @@ -0,0 +1,99 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

+ +

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

+ +

Properties

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that indicates whether the body has been read.
+
+ +

Methods

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
+
+ +

Examples

+ +

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +

HTML Content

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS Content

+ +
const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res => res.blob())
+	.then(res => {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Examples', '100%', '250px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Body")}}

+ +

See also

+ + + +

 

diff --git a/files/de/web/api/body/json/index.html b/files/de/web/api/body/json/index.html new file mode 100644 index 0000000000..76271e680d --- /dev/null +++ b/files/de/web/api/body/json/index.html @@ -0,0 +1,73 @@ +--- +title: Body.json() +slug: Web/API/Body/json +translation_of: Web/API/Body/json +--- +
{{APIRef("Fetch")}}
+ +

Die Methode json() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.

+ +

Syntax

+ +
response.json().then(function(data) {
+  // mach etwas mit data
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches den Inhalt des Body als {{jsxref("JSON")}} einliest. Dies kann alles sein, was als JSON abgebildet werden kann — ein Objekt, ein Array, ein String, eine Zahl...

+ +

Beispiel

+ +

In unserem Beispiel für den Abruf eines json (live ausführen) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine .json Datei ab. Wenn der Abruf erfolgreich ist lesen wir die Daten ein und parsen sie mit json(), lesen die Werte erwartungsgemäß aus und fügen sie in eine Liste ein um unsere Produktdaten anzuzeigen.

+ +
var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i < data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> befindet sich in ' +
+                           data.products[i].Location +
+                           '. Preis: <strong>' + data.products[i].Price + '€</strong>';
+      myList.appendChild(listItem);
+    }
+  });
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-json','json()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.json")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/body/text/index.html b/files/de/web/api/body/text/index.html new file mode 100644 index 0000000000..8ccc5fb358 --- /dev/null +++ b/files/de/web/api/body/text/index.html @@ -0,0 +1,80 @@ +--- +title: Body.text() +slug: Web/API/Body/text +translation_of: Web/API/Body/text +--- +
{{APIRef("Fetch")}}
+ +

Die Methode text() des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("USVString")}} Objekt (Text) aufgelöst wird. Die Antwort wird immer mit UTF-8 dekodiert.

+ +

Syntax

+ +
response.text().then(function (text) {
+  // do something with the text response
+});
+ +

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

Ein Promise, welches in einen {{domxref("USVString")}} aufgelöst wird.

+ +

Beispiel

+ +

In unserem Beispiel für den Abruf von Text (live ausführen) haben wir ein {{htmlelement("article")}} Element und drei Links (im Array myLinks gespeichert). Zuerst durchlaufen wir all diese, damit alle einen onclick Event Handler bekommen, der die Funktion getData() ausführt — der Bezeichner data-page des Links wird dabei als Argument übergeben — wenn einer der Links geklickt wird.

+ +

Wenn getData() ausgeführt wird erstellen wie eine Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine .txt Datei ab. Wenn der Abruf erfolgreich ist lesen wir das {{jsxref("USVString")}} (Text) Objekt aus der Antwort mit text() und setzen dann {{domxref("Element.innerHTML","innerHTML")}} des {{htmlelement("article")}} Elements auf den Wert des Text-Objekts.

+ +
var myArticle = document.querySelector('article');
+var myLinks = document.querySelectorAll('ul a');
+
+for(i = 0; i <= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    var linkData = e.target.getAttribute('data-page');
+    getData(linkData);
+  }
+};
+
+function getData(pageId) {
+  console.log(pageId);
+  var myRequest = new Request(pageId + '.txt');
+  fetch(myRequest).then(function(response) {
+    return response.text().then(function(text) {
+      myArticle.innerHTML = text;
+    });
+  });
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-text','text()')}}{{Spec2('Fetch')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Body.text")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/cache/add/index.html b/files/de/web/api/cache/add/index.html new file mode 100644 index 0000000000..778820ca66 --- /dev/null +++ b/files/de/web/api/cache/add/index.html @@ -0,0 +1,106 @@ +--- +title: Cache.add() +slug: Web/API/Cache/add +translation_of: Web/API/Cache/add +--- +

{{APIRef("Service Workers API")}}

+ +

Die add() Methode des {{domxref("Cache")}} Interface nimmt eine URL, ruft sie ab und fügt das resultierende Objekt zum gegebenen Cache. Die add() Methode gleicht funktional dem folgenden:

+ +
fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})
+ +

Für komplexere Operationen müssen Sie {{domxref("Cache.put","Cache.put()")}} direkt verwenden.

+ +
+

Hinweis: add() wird alle zuvor im Cache gespeicherten Schlüssel-Wert-Paare die der Request gleichen überschreiben.

+
+ +

Syntax

+ +
cache.add(request).then(function() {
+  // request wurde dem Cache hinzugefügt
+});
+
+ +

Parameter

+ +
+
request
+
Die Request, die dem Cache hinzugefügt werden soll. Dies kann ein {{domxref("Request")}} Objekt oder eine URL sein.
+
+ +

Rückgabewert

+ +

Eine {{jsxref("Promise")}}, die auf void auflöst.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionTritt auf wenn
TypeError +

Das URL-Schema nicht http oder https ist.

+ +

Der Antwortstatus ist nicht im 200 Bereich (d.h. keine erfolgreiche Antwort) Dies tritt auf, wenn die Request nicht erfolgreich zurückgegeben wird aber auch wenn die Request eine cross-origin no-cors Request ist (In diesem Fall ist der Status immer 0.)

+
+ +

Beispiele

+ +

Dieser Codeblock wartet darauf, dass ein {{domxref("InstallEvent")}} ausgelöst wird, ruft dann {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} auf, um den Installationsprozess der Applikation einzuleiten. Dies beinhaltet den Aufruf von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen, um dann mittels {{domxref("Cache.add")}} etwas zu diesem hinzuzufügen.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}{{Spec2('Service Workers')}}Erstdefinition.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Cache.add")}}

+
+ +

Weiterlesen

+ + diff --git a/files/de/web/api/cache/addall/index.html b/files/de/web/api/cache/addall/index.html new file mode 100644 index 0000000000..78467ff40f --- /dev/null +++ b/files/de/web/api/cache/addall/index.html @@ -0,0 +1,212 @@ +--- +title: Cache.addAll() +slug: Web/API/Cache/addAll +tags: + - Cache + - Experimentell + - Methoden + - Referenz + - Service Worker +translation_of: Web/API/Cache/addAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

Zusammenfassung

+ +

Die addAll() Methode der {{domxref("Cache")}} Schnittstelle nimmt ein Array von URLS,  ruft diese ab und fügt die daraus resultierenden Antwortobjekte zum jeweiligen Cache hinzu. Die Antwortobjekte, welche während des Abrufens erzeugt werden, werden zu Schlüsselwerten für die gespeicherten Antwortoperationen. 

+ +
+

Hinweis: addAll() überschreibt jegliche Schlüsselwertpaare im Cache, die der Anfrage entsprechen wird aber scheitern, wenn eine resultierende put() Operation einen früheren Cache-Eintrag, der durch die gleiche addAll() Methode erzeugt wurde, überschreiben würde.

+
+ +
+

Hinweis: Ursprüngliche Cache Implementationen (sowohl in Blink als auch in Gecko) lösen {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, und {{domxref("Cache.put")}}  Promises auf, wenn die jeweilige Antwort vollständig in den Speicher geschrieben wurde. Neuere Spezifikationsversionen haben aktualisierte Informationen, welche aussagen, dass der Browser den Promise bereits auflösen kann, wenn der Eintrag in die Datenbank erfolgt, auch wenn die Antwort  zu diesem Zeitpunkt noch nicht vollständig geschrieben wurde (sprich der Datenstrom in den Speicher ist noch nicht beendet).

+
+ +
+

Hinweis:  Zum Stand von Chrome 46 wird die Cache API nur Anfragen von sicheren Quellen speichern, also solche die via HTTPS angeboten werden.

+
+ +

Syntax

+ +
cache.addAll(requests[]).then(function() {
+  //Anfragen wurden zum Cache hinzugefügt
+});
+
+ +

Argumente

+ +
+
requests
+
Ein Array von {{domxref("Request")}} Objekten, die Sie zum Cache hinzufügen möchten.
+
+ +

Rückgabewert

+ +

Ein {{jsxref("Promise")}} der mit void auflöst.

+ +

Ausnahmen

+ + + + + + + + + + + + + + +
AusnahmePassiert bei
TypeError +

Das URL Schama ist nicht http oder https.

+ +

Der Antwortstatus ist nicht im 200er Bereich ( nicht erfolgreiche Antwort ). Dies entsteht, wenn die Anfrage nicht erfolreich zurückgibt, aber auch, wenn die Anfrage eine cross-origin no-cors Anfrage ist (in diesem Fall wird immer 0 als Berichtsstatus gegeben).

+
+ +

Beispiele

+ +

Dieser Programmblock wartet auf ein abgesetztes {{domxref("InstallEvent")}} , woraufhin ein {{domxref("ExtendableEvent.waitUntil","waitUntil")}} läuft, das den Installationsprozess für die Applikation handhabt. Das beinhaltet das Aufrufen von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen. Anschließend wird addAll() benutzt um diesem eine Reihe von Ressourcen (in diesem Fall html, css und Bild-Ressourcen) hinzuzufügen.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Erste Definition.
+ +

Browserunterstützung

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatNo}}24{{CompatNo}}
Require HTTPS{{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
TypeError if request is not successful{{CompatVersionUnknown}}{{CompatGeckoDesktop(47.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(46.0)}}
Require HTTPS{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
TypeError if request is not successful{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Service workers (und Push) wurden in Firefox 45 Extended Support Release (ESR.) abgeschaltet.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/cache/index.html b/files/de/web/api/cache/index.html new file mode 100644 index 0000000000..3043baa825 --- /dev/null +++ b/files/de/web/api/cache/index.html @@ -0,0 +1,288 @@ +--- +title: Cache +slug: Web/API/Cache +tags: + - API + - Cache + - Draft + - Experimental + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Storage + - TopicStub +translation_of: Web/API/Cache +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

The Cache interface provides a storage mechanism for Request / Response object pairs that are cached, for example as part of the {{domxref("ServiceWorker")}} life cycle. Note that the Cache interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.

+ +

An origin can have multiple, named Cache objects. You are responsible for implementing how your script (e.g. in a {{domxref("ServiceWorker")}})  handles Cache updates. Items in a Cache do not get updated unless explicitly requested; they don’t expire unless deleted. Use {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open a specific named Cache object and then call any of the Cache methods to maintain the Cache.

+ +

You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See Deleting old caches for more information.

+ +
+

Note: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}, and {{domxref("Cache.addAll")}} only allow GET requests to be stored in the cache.

+
+ +
+

Note: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.

+
+ +
+

Note: As of Chrome 46, the Cache API will only store requests from secure origins, meaning those served over HTTPS.

+
+ +
+

Note: The key matching algorithm depends on the VARY header in the value. So matching a new key requires looking at both key and value for entries in the Cache.

+
+ +
+

Note: The caching API doesn't honor HTTP caching headers.

+
+ +

Methods

+ +
+
{{domxref("Cache.match", "Cache.match(request, options)")}}
+
Returns a {{jsxref("Promise")}} that resolves to the response associated with the first matching request in the {{domxref("Cache")}} object.
+
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of all matching requests in the {{domxref("Cache")}} object.
+
{{domxref("Cache.add", "Cache.add(request)")}}
+
Takes a URL, retrieves it and adds the resulting response object to the given cache. This is fuctionally equivalent to calling fetch(), then using Cache.put() to add the results to the cache.
+
{{domxref("Cache.addAll", "Cache.addAll(requests)")}}
+
Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.
+
{{domxref("Cache.put", "Cache.put(request, response)")}}
+
Takes both a request and its response and adds it to the given cache.
+
{{domxref("Cache.delete", "Cache.delete(request, options)")}}
+
Finds the {{domxref("Cache")}} entry whose key is the request, and if found, deletes the {{domxref("Cache")}} entry and returns a {{jsxref("Promise")}} that resolves to true. If no {{domxref("Cache")}} entry is found, it returns false.
+
{{domxref("Cache.keys", "Cache.keys(request, options)")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Cache")}} keys.
+
+ +

Examples

+ +

This code snippet is from the service worker selective caching sample. (see selective caching live) The code uses {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open any {{domxref("Cache")}} objects with a Content-Type header that starts with font/.

+ +

The code then uses {{domxref("Cache.match", "Cache.match(request, options)")}} to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses {{domxref("Cache.put","Cache.put(request, response)")}} to cache the fetched resource.

+ +

The code handles exceptions thrown from the {{domxref("Globalfetch.fetch","fetch()")}} operation. Note that a HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.

+ +

The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name. The code also deletes all caches that aren't named in CURRENT_CACHES.

+ +
Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
+ +
var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{CompatGeckoDesktop(39)}}[1]{{CompatNo}}24{{CompatNo}}
add(){{CompatChrome(44.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
addAll(){{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
matchAll(){{CompatChrome(47.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Require HTTPS for add(), addAll(), and put(){{CompatChrome(46.0)}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(39)}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
add(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(44.0)}}
addAll(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
matchAll(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
Require HTTPS for add(), addAll(), and put(){{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..47b01c8f72 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,56 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

Die CanvasRenderingContext2D.canvas Eigenschaft, Teil der Canvas API, ist eine Nurlese-Referenz auf das {{domxref("HTMLCanvasElement")}} Objekt, das mit einem gegebenen Kontext assoziiert ist. Sie kann {{jsxref("null")}} sein, wenn kein assoziiertes {{HTMLElement("canvas")}} Element existiert.

+ +

Syntax

+ +
ctx.canvas;
+ +

Beispiele

+ +

Wenn dieses {{HTMLElement("canvas")}} Element gegeben ist:

+ +
<canvas id="canvas"></canvas>
+
+ +

... kannst du eine Referenz auf das Canvas-Element innerhalb von CanvasRenderingContext2D herstellen, indem du die canvas Eigenschaft verwendest.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.canvas // HTMLCanvasElement
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}}
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..178a861f4e --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Method + - Methode(2) + - Reference + - Referenz +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

Die Methode CanvasRenderingContext2D.fillRect() der Canvas 2D API zeichnet ein ausgefülltes Rechteck an der Position (x, y). Die Größe wird über die Parameter width und height bestimmt. Die Füllfarbe wird über das Attribut fillStyle des Context-Objekts festgelegt.

+ +

Syntax

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Parameter

+ +
+
x
+
Die Koordinate auf der x-Achse als horizontaler Startpunkt des Rechtecks.
+
y
+
Die Koordinate auf der y-Achse als vertikaler Startpunkt des Rechtecks.
+
width
+
Die Breite des Rechtecks.
+
height
+
Die Höhe des Rechtecks.
+
+ +

Beispiele

+ +

Benutzung der Methode fillRect

+ +

Dies ist ein einfaches Code-Beispiel, welches die fillRect Methode nutzt.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// fill the whole canvas
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Ändern Sie den unten gezeigten Code und sehen Sie Ihre Änderungen live im Canvas-Element:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..c8b6bdf2be --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,142 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

Die CanvasRenderingContext2D.getImageData() Methode der Canvas 2D API gibt ein Objekt des Types  {{domxref("ImageData")}} zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten (sx,sy)  und den Dimensionen sw  in der Breite und sy  in der Höhe. 

+ +

Syntax

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Parameters

+ +
+
sx
+
Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.
+
sy
+
Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.
+
sw
+
Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.
+
sh
+
Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden. 
+
+ +

Rückgabewerte

+ +

Ein Objekt vom Typ {{domxref("ImageData")}} das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.

+ +

Fehlertypen

+ +
+
IndexSizeError
+
Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.
+
+ +

Beispiele

+ +

Benutzung der getImageData Funktion

+ +

Das ist ein einfaches Code-Beispiel zur Benutzung der getImageData Funktion. Für mehr Informationen siehe Pixel manipulation with canvas und die Referenz zum {{domxref("ImageData")}} Objekt.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Ab {{GeckoRelease("5.0")}} unterstützt getImageData() die Angabe von Rechtecken, die die Ränder des Canvas-Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.

+ +

Sehen Sie auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/index.html b/files/de/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..aa9c1ea07a --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,432 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Graphics + - Image + - Shape +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +

Das CanvasRenderingContext2D-Interface stellt den 2D-Renderkontext für die Zeichenoberfläche eines {{ HTMLElement("canvas") }} zur Verfügung. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten benutzt.

+ +

Eigenschaften und Methoden finden Sie in der Sidebar und weiter unten. Das Canvas-Tutorial bietet Ihnen außerdem weitere Informationen, Beispiele und Ressourcen.

+ +

Ein einfaches Beispiel

+ +

Um eine CanvasRenderingContext2D Instanz zu erhalten, muss man erst ein  HTML <canvas> Element haben, mit dem man arbeiten kann:

+ +
<canvas id="my-house" width="300" height="300"></canvas>
+ +

Um ein Objekt dieses Interfaces zu erhalten, benutzen Sie die Methode {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} eines <canvas>, mit "2d" als Argument:

+ +
const canvas = document.getElementById('my-house');
+const ctx = canvas.getContext('2d');
+
+ +

Sobald Sie den Kontext der Zeichenoberfläche haben, können Sie darin zeichnen, was immer Sie möchten. Dieser Code zeichnet ein Haus:

+ +
// Die Lininestärke festlegen
+ctx.lineWidth = 10;
+
+// Wand
+ctx.strokeRect(75, 140, 150, 110);
+
+// Tür
+ctx.fillRect(130, 190, 40, 60);
+
+// Dach
+ctx.moveTo(50, 140);
+ctx.lineTo(150, 60);
+ctx.lineTo(250, 140);
+ctx.closePath();
+ctx.stroke();
+
+ +

Die enstandene Zeichnung sieht so aus:

+ +

{{EmbedLiveSample("Basic_example", 700, 330)}}

+ +

Referenz

+ +

Rechtecke zeichnen

+ +

Es gibt drei Methoden, die sofort Rechtecke innerhalb des Canvas zu zeichnen.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Setzt alle Pixel im Rechteck mit Startpunkt (x, y) und Größe (width, height) auf schwarz und transparent wodurch jeglicher vorheriger Inhalt gelöscht wird.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Zeichnet ein gefülltes Rechteck mit Startpunkt (x, y) und Größe (width, height).
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Zeichnet ein Rechteck mit Startpunkt (x, y) und Größe (width, height), verwendet dabei den aktuellem stroke style.
+
+ +

Text darstellen

+ +

Die folgenden Methoden zeichnen Text auf dem Canvas. Siehe auch das {{domxref("TextMetrics")}} - Objekt für die Texteigenschaften.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Zeichnet einen gegebenen Text (gefüllt) an die gegebene Position (x, y).
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Zeichnet einen gegebenen Text (Umrisse) an die gegebene Position (x, y).
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Gibt ein {{domxref("TextMetrics")}}-Objekt zurück.
+
+ +

Linienstile

+ +

Die folgenden Methoden und Eigenschaften beeinflussen die Art und Weise, wie Linien gezeichnet werden.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Linienbreite. Standard: 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Typ des Linienabschlusses. Mögliche Werte: butt (default), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Definiert den Typ der Ecken, wo sich zwei Linien treffen. Mögliche Werte: round, bevel, miter (default).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Verbindungsecken-Größe. Standard: 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Gibt das aktuelle Linienstrich-Array zurück, welches eine gerade Anzahl positiver Zahlen enthält.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Setzt das aktuelle Linienstrich-Array auf einen neuen Wert.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Spezifiziert, wo auf einer Linie ein Strich-Array beginnt.
+
+ +

Textstile

+ +

Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Font-Einstellung. Standard: 10px sans-serif
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Ausrichtungs-Einstellung. Mögliche Werte: start (default), end, left, right oder center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Ausrichtungseinstellung zur Basislinie. Mögliche Werte: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Direktionalität. Mögliche Werte: ltr, rtl, inherit (default).
+
+ +

Füll- und Linienfarbe

+ +

Die Füllfarbe (fillStyle) wird innerhalb von Formen angewendet, die Linienfarbe (strokeStyle) auf die Randlinie von Formen. Beides kann statt einer Farbe auch ein Farbverlauf oder ein Muster sein.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Farbe oder Stil für innerhalb von Formen. Standardwert #000 (schwarz).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Farbe oder Stil für die Randlinie von Formen. Standardwert #000 (schwarz).
+
+ +

Farbverläufe und Muster

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Erzeugt einen linearen Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Erzeugt einen radialen (kreisförmigen) Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Erzeugt ein Muster aus dem angegebenen Bild (ein {{domxref("CanvasImageSource")}}). Es wiederholt das Bild in den Richtungen, die mit dem repetition Parameter definiert werden. Diese Methode gibt ein {{domxref("CanvasPattern")}} zurück.
+
+ +

Schatten

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Definiert den Unschärfe-Effekt. Standardwert 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Farbe des Schattens. Standardwert: komplett transparentes Schwarz.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontale Entfernung des Schattens. Standardwert 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertikale Entfernung des Schattens. Standardwert 0.
+
+ +

Pfade

+ +

Die folgende Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Rufe diese Methode auf, wenn du einen neuen Pfad starten willst.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Es wird versucht eine greade Linie von der aktuellen Position zum Beginn der Linie zu zeichen. Wenn die Form schon geschlossen wurde oder nur einen Punkt enthält, macht diese Funktion nichts.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Bewegt den Anfangspunkt für einen neuen Unterpfad zu den übergebenen (x, y) Koordinaten.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Verbindet den letzten Punkt im Unterpfad mit den übergebenen (x, y) Koordinaten in einer geraden Linie.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Fügt eine kubische Bézierkurve zum Pfad hinzu. Diese benötigt drei Punkte. Die ersten zwei sind Kontrollpunkte für die Krümmung, der dritte ist das Ende der Kurve. Die Kurve beginnt am letzten Punkt im aktuellen Pfad, dieser kann davor mit moveTo() geändert werden.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Fügt einen Kreisbogen zum Pfad hinzu, mit Kreismittelpunkt (x, y) und Radius r. Der Startwinkel ist startAngle, der Endwinkel endAngle, Richtung gegen den Uhrzeigersinn.
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Fügt einen Kreisbogen zum Pfad mit den gegebenen Kontrollpunkten und Radius hinzu, verbunden mit dem letzten Punkt im Pfad durch eine gerade Linie.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Fügt eine Ellipse zum Pfad hinzu, mit dem Zentrum (x, y) und den Radien radiusX und radiusY, beginnend bei startAngle und endend bei endAngle, Richtung gegen den Uhrzeigersinn.
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Erzeugt einen Pfad mit einem Rechteck an der Position (x, y) und den Dimensionen width und height.
+
+ +

Pfade zeichnen

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Füllt den Unterpfad mit der aktuellen Füllfarbe (bzw. Farbverlauf, Muster).
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Zeichnet die Linien des Unterpfades mit der aktuellen Linienfarbe (bzw. Farbverlauf, Muster).
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
Wenn ein gegebenes Element fokussiert wird, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrollt den aktuellen Pfad oder einen bestimmten Pfad in Sicht.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Erzeugt einen zugeschnittenen Pfad aus den aktuellen Unterpfaden. Alles, was nach clip() gezeichnet wird, erscheint nur im zugeschnittenen Pfad. Für ein Beispiel, siehe  Clipping paths im Canvas Tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Gibt zurück, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Gibt zurück, ob der angegebene Punkt innerhalb des bemalten Bereichs im Pfad ist oder nicht.
+
+ +

Transformationen

+ +

Objekte im CanvasRenderingContext2D-Renderkontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Pfad erzeugt wird und wenn Text, Formen oder {{domxref("Path2D")}} Objekte gemalt werden. Folgende Methoden sind hier für historische und Kompatibilitätszwecke aufgelistet, da heutzutage meistens {{domxref("SVGMatrix")}} Objekte verwendet werden und in Zukunft diese Methoden ersetzen werden.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}
+
Die momentane Transformationsmatrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Fügt eine Drehung zur Transformationsmatrix hinzu. Der angle-Parameter stellt einen Drehwinkel im Uhrzeigersinn dar und wird in radians ausgedrückt.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Fügt eine skalierende Transformation zu den Längeneinheiten des canvas hinzu (horizontal um Faktor x, vertikal um Faktor y). Was nach scale() auf das canvas gezeichnet wird, wird also dementsprechend gestaucht oder gestreckt.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Fügt eine übersetzende Transformation hinzu, die die Position des canvas relativ zu seinem Koordinatensystem verschiebt (horizontal um x, vertikal um y). Was nach translate() gezeichnet wird, ist also um (x, y) verschoben.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Parameter dieser Funktion beschrieben wird.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Setzt die aktuellen Transformationen zurück und ruft dann die transform() Methode mit den selben Parametern auf.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Setzt die aktuellen Transformationen zurück.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha-Wert bzw. Deckkraft, die auf alle Formen und Bilder angewendet wird, bevor diese auf dem canvas gezeichnet werden. Standardwert 1.0 (undurchsichtig).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
Zusammen mit globalAlpha legt dieser Wert fest, wie Formen und Bilder abhängig vom Hintergrund auf das canvas gezeichnet werden sollen.
+
+ +

Bilder zeichnen

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Zeichnet das übergebene Bild. Diese Methode ist in diversen Formaten verfügbar, wodurch sie große Flexibilität in der Nutzung bietet.
+
+ +

Pixelmanipulation

+ +

Siehe auch das {{domxref("ImageData")}} Objekt.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Erzeugt ein neues, leeres {{domxref("ImageData")}} Objekt mit den angegebenen Dimensionen. Alle Pixel in diesem Objekt sind transparent schwarz.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Gibt ein {{domxref("ImageData")}} Objekt zurück, das die dem canvas zugrunde liegenden Pixeldaten enthält. Die Methode wird auf einen bestimmten Ausschnitt des canvas angewendet, beginnend bei (sx, sy), mit Breite sw und Höhe sh.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Malt Pixeldaten des {{domxref("ImageData")}} Objekts auf das canvas. Wenn ein dreckiges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.
+
+ +

Bildglättung

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.
+
+ +

Der Leinwand-Zustand

+ +

Der CanvasRenderingContext2D-Renderkontext enthält eine Vielzahl an Zeichnungszuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen mit diesen Zuständen zu arbeiten:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Trefferregionen

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Fügt eine Trefferregion (hit region) zur Leinwand hinzu.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Entfernt eine Trefferregion mit gegebener id von der Leinwand.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Entfernt alle Trefferregionen von der Leinwand.
+
+ +

Filter

+ +
+
{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.
+
+ +

Unstandardisierte APIs

+ + + +

Die meisten dieser APIs sind veraltet und wurden kurz nach Chrome 36 entfernt.

+ +
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.clearShadow()
+
Entfernt alle Schatteneinstellungen wie  {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
Das ist redundant zum equivalenten Überladung von  drawImage.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setAlpha()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.globalAlpha")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineWidth()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineWidth")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineJoin()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineJoin")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setLineCap()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineCap")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.miterLimit")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.strokeStyle")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setFillColor()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.fillStyle")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.setShadow()
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitLineDash
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.getLineDash()")}} und {{domxref("CanvasRenderingContext2D.setLineDash()")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.lineDashOffset")}} anstelle dieser Methode.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Verwenden Sie {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} anstelle dieser Methode.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.CanvasRenderingContext2D")}}

+
+ + + +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..5eac7321fe --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,206 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +
{{APIRef}}
+ +

Die Methode CanvasRenderingContext2D.isPointInPath() der Canvas 2D API entscheidet darüber, ob ein Punkt in einem gegeben Pfad enthalten ist.

+ +

Syntax

+ +
boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, fillRule);
+
+boolean ctx.isPointInPath(path, x, y);
+boolean ctx.isPointInPath(path, x, y, fillRule);
+
+ +

Parameter

+ +
+
x
+
Die X-Koordinate des zu prüfenden Punktes.
+
y
+
Die Y-Koordinate des zu prüfenden Punktes.
+
fillRule
+
Der Algorithmus, der prüft, ob der Punkt innerhalb oder außerhalb des Pfades liegt.
+ Mögliche Werte: + +
+
path
+
Ein {{domxref("Path2D")}} Objekt.
+
+ +

Rückgabewert

+ +
+
{{jsxref("Boolean")}}
+
Ein Boolean, welcher true ist, wenn der gegebene Punkt innerhalb des gegeben Pfades liegt, ansonsten false.
+
+ +

Beispiele

+ +

Benutzung der Methode isPointInPath

+ +

Dies ist ein einfaches Snippet, welches die isPointinPath Methode nutzt, um zu prüfen, ob ein Punkt in gegebenem Pfad enthalten ist.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+
+ +

Editieren Sie den folgenden Quelltext. Die Änderungen werden in Echtzeit übernommen und Log-Ausgaben in die console ausgegeben:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Path parameter{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Compatibility notes

+ + + +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/scale/index.html b/files/de/web/api/canvasrenderingcontext2d/scale/index.html new file mode 100644 index 0000000000..b26824a51e --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/scale/index.html @@ -0,0 +1,223 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Referenz +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +
{{APIRef}}
+ +

Die Methode CanvasRenderingContext2D.scale() der Canvas 2D API skaliert das Canvas-Element um den Faktor x horizontal und um den Faktor y vertikal.

+ +

Normalerweise ist eine Einheit auf dem Canvas genau ein Pixel. Wenn wir zum Beispiel einen Skalierungsfaktor von 0,5 Pixeln anwenden, ist eine Einheit 0,5 Pixel und alle Objekte werden mit der halben Größe gezeichnet. Analog dazu vergößert der Skalierungsfaktor 2,0 die Längeneinheit auf zwei Pixel. Die Objekte werden dann doppelt so groß gezeichnet.

+ +

Syntax

+ +
void ctx.scale(x, y);
+
+ +

Parameter

+ +
+
x
+
Skalierungsfaktor in horizontaler Richtung.
+
y
+
Skalierungsfaktor in vertikaler Richtung
+
+ +

Beispiele

+ +

Die Methode scale verwenden

+ +

Dies ist nur ein kurzes Beispiel, das die Methode scale benutzt.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Editieren Sie den folgenden Code und sehen Sie die Änderungen sofort im Canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.scale(10, 3);
+ctx.fillRect(10,10,10,10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

scale verwenden, um horizontal oder vertikal zu spiegeln

+ +

Sie können ctx.scale(-1, 1) benutzen, um den Inhalt horizontal zu spiegeln und ctx.scale(1, -1), um ihn vertikal zu spiegeln.

+ +
+
Playable code2
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.scale(-1, 1);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -320, 120);
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code2', 700, 360) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompabilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html new file mode 100644 index 0000000000..a7d5bd82c3 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -0,0 +1,179 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +
{{APIRef}}
+ +

The CanvasRenderingContext2D.setLineDash() method of the Canvas 2D API sets the line dash pattern.

+ +

Syntax

+ +
void ctx.setLineDash(segments);
+
+ +

Parameters

+ +
+
segments
+
An {{jsxref("Array")}}. A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. An empty array clears the dashes, so that a solid line will be drawn.
+
+ +

Examples

+ +

Using the setLineDash method

+ +

This is just a simple code snippet which uses the setLineDash method to draw a dashed line.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.setLineDash([5, 15]);
+
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();
+
+ +

Edit the code below and see your changes update live in the canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.setLineDash([5, 15]);
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{ CompatGeckoDesktop(27) }}{{ CompatIE(11) }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile(27) }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Gecko-specific notes

+ + + +

WebKit-specific notes

+ + + +

See also

+ + diff --git a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..1f1651f456 --- /dev/null +++ b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

Die CanvasRenderingContext2D.textAlign Eigenschaft der Canvas 2D API spezifiert die aktuelle Textausrichtung welche beim zeichnen von Text verwendet wird.

+ +

Nehmen Sie in Acht, dass die Ausrichtung auf dem x Wert der {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} Methode basiert. Wenn textAlign  "center" ist,  dann würde der Text an der Stelle x - (width / 2) gezeichnet werden.

+ +

Syntax

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

Optionen

+ +

Mögliche Werte:

+ +
+
left
+
Der Text wird linksbündig ausgerichtet.
+
right
+
Der Text wird rechtsbündig ausgerichtet.
+
center
+
Der Text wird zentiert ausgerichtet.
+
start
+
Der Text wird am normalen Start der Zeile ausgerichtet. (Links -oder rechtsbündig, je nach Sprache).
+
end
+
Der Text wird am normalen Ende der Zeile ausgerichtet (Links -oder rechtsbündig, je nach Sprache).
+
+ +

Der Standardwert ist start.

+ +

Beispiele

+ +

Benutzung der textAlign Eigenschaft

+ +

Ein einfaches Beispiel welches die textAlign Eigenschaft benutzt um die Textausrichtung zu ändern.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Ändern Sie den Code um Ihre Änderungen im Canvas zu sehen:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/childnode/index.html b/files/de/web/api/childnode/index.html new file mode 100644 index 0000000000..07dcc1cb33 --- /dev/null +++ b/files/de/web/api/childnode/index.html @@ -0,0 +1,190 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +
{{APIRef("DOM")}}
+ +

The ChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.

+ +

ChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.

+ +

Properties

+ +

There are neither inherited, nor specific properties.

+ +

Methods

+ +

There are no inherited methods.

+ +
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Removes this ChildNode from the children list of its parent.
+
{{domxref("ChildNode.before()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ChildNode.after()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
+
Replaces this ChildNode in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and ChildNode. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatChrome(23.0)}}{{CompatNo}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatChrome(29.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatNo}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatOpera(39)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatNo}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
+
+ +

See also

+ + diff --git a/files/de/web/api/childnode/remove/index.html b/files/de/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..bae33f75c0 --- /dev/null +++ b/files/de/web/api/childnode/remove/index.html @@ -0,0 +1,97 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +tags: + - API + - ChildNode + - DOM + - Experimentell + - Méthode +translation_of: Web/API/ChildNode/remove +--- +
{{APIRef("DOM")}}
+ +

Die ChildNode.remove() Methode entfernt ein Objekt aus der Baumstruktur ("tree") zu der es gehört.

+ +

Syntax

+ +
node.remove();
+
+ +

Beispiel

+ +

Benutzung von remove()

+ +
<div id="div-01">Dies ist div-01</div>
+<div id="div-02">Dies ist div-02</div>
+<div id="div-03">Dies ist div-03</div>
+
+ +
var el = document.getElementById('div-02');
+el.remove(); // Entfernt das div Element mit der id 'div-02'
+
+ +

ChildNode.remove() kann nicht gescopet werden

+ +

Die remove() Methode kann nicht mit dem with Statement gescopet werden. {{jsxref("Symbol.unscopables")}} enthält mehr Informationen darüber.

+ +
with(node) {
+  remove();
+}
+// Erzeught einen ReferenceError
+ +

Polyfill

+ +

Ein Polyfill der remove() Methode in Internet Explorer 9 und höher sieht folgendermaßen aus:

+ +
// von:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        if (this.parentNode !== null)
+          this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Specifikationen

+ + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Erste Definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ChildNode.remove")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/console/assert/index.html b/files/de/web/api/console/assert/index.html new file mode 100644 index 0000000000..834e253ce5 --- /dev/null +++ b/files/de/web/api/console/assert/index.html @@ -0,0 +1,98 @@ +--- +title: Console.assert() +slug: Web/API/Console/assert +translation_of: Web/API/console/assert +--- +
{{APIRef("Console API")}}
+ +

Schreibt eine Fehlermeldung in die Konsole, wenn eine Behauptung falsch ist. Wenn die Behauptung wahr ist, passiert nichts.

+ +

{{AvailableInWorkers}}

+ +

Die Methode console.assert() wurde in älteren Node.js Versionen anders implementiert als in Browsern. In Browsern wird durch den Aufruf von console.assert() mit einer falschen Behauptung message in die Konsole ausgegeben, ohne die Ausführung des nachfolgenden Codes zu unterbrechen. Vor Node.js v10.0.0 bewirkt eine falsche Behauptung jedoch auch, dass ein AssertionError ausgelöst wird. Diese Diskrepanz wurde mit Node v10 behoben, so dass console.assert() jetzt sowohl in Node als auch im Browser gleich funktioniert.

+ +

Syntax

+ +
console.assert(assertion, obj1 [, obj2, ..., objN]);
+console.assert(assertion, msg [, subst1, ..., substN]); // c-ähnliche Formatierung
+
+ +

Parameter

+ +
+
assertion
+
Jeder boolesche Ausdruck. Wenn die Behauptung falsch ist, wird message in der Console ausgegeben.
+
obj1 ... objN
+
Eine Liste der auszugebenden JavaScript-Objekte. Die String-Darstellungen jedes dieser Objekte werden in der angegebenen Reihenfolge zusammengefügt und ausgegeben.
+
msg
+
Ein JavaScript-String, der keine oder mehrere Ersetzungsstrings enthält.
+
subst1 ... substN
+
JavaScript-Objekte, mit denen Ersetzungsstrings in msg ersetzt werden sollen. Dieser Parameter gibt Ihnen zusätzliche Kontrolle über das Format der Ausgabe.
+
+ +

Beispiele

+ +

Im folgenden Codebeispiel wird die Verwendung eines JavaScript-Objekts nach der Behauptung veranschaulicht:

+ +
const errorMsg = 'the # is not even';
+for (let number = 2; number <= 5; number += 1) {
+    console.log('the # is ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // oder mit ES2015 Object Property Shorthand:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// Ausgabe:
+// the # is 2
+// the # is 3
+// Assertion failed: {number: 3, errorMsg: "the # is not even"}
+// the # is 4
+// the # is 5
+// Assertion failed: {number: 5, errorMsg: "the # is not even"}
+ +

Beachten Sie, dass ein String, der einen Ersatzstring enthält, als Parameter für console.log() in Node und vielen, wenn nicht allen Browsern, funktioniert...

+ +
console.log('the word is %s', 'foo');
+// Ausgabe: the word is foo
+ +

...die Verwendung eines solchen Strings als Parameter für console.assert() jedoch derzeit nicht in allen Browsern wie erwartet funktioniert:

+ +
console.assert(false, 'the word is %s', 'foo');
+// korrekte Ausgabe in Node (e.g. v8.10.0) und einigen Browsern
+//     (z. B. Firefox v60.0.2):
+// Assertion failed: the word is foo
+// inkorrekte Ausgabe in einigen Browsern
+//     (z. B. Chrome v67.0.3396.87):
+// Assertion failed: the word is %s foo
+ +

Weitere Informationen finden Sie in der Dokumentation von {{domxref("console")}} unter Text in der Konsole ausgeben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Console API", "#assert", "console.assert()")}}{{Spec2("Console API")}}Initiale Definition
+ +

Browserkompatibilität

+ +

{{Compat("api.Console.assert")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/console/clear/index.html b/files/de/web/api/console/clear/index.html new file mode 100644 index 0000000000..3ff370c14b --- /dev/null +++ b/files/de/web/api/console/clear/index.html @@ -0,0 +1,49 @@ +--- +title: Console.clear() +slug: Web/API/Console/clear +translation_of: Web/API/Console/clear +--- +
{{APIRef("Console API")}}
+ +

Leert die Konsole.

+ +

Der Inhalt der Konsole wird mit einer informativen Nachricht wie "Konsole wurde geleert" ersetzt.

+ +

Beachten Sie, dass der Aufruf console.clear() in Google Chrome keine Wirkung hat, wenn der Benutzer in den Einstellungen die Option "Log bei Navigation nicht leeren" aktiviert hat.

+ +

Syntax

+ +
console.clear();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Console API", "#clear", "console.clear()")}}{{Spec2("Console API")}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Console.clear")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/console/count/index.html b/files/de/web/api/console/count/index.html new file mode 100644 index 0000000000..4fdcf42299 --- /dev/null +++ b/files/de/web/api/console/count/index.html @@ -0,0 +1,103 @@ +--- +title: Console.count() +slug: Web/API/Console/count +translation_of: Web/API/Console/count +--- +
{{APIRef("Console API")}}
+ +

Die Methode count() protokolliert, wie oft sie an einer Stelle oder mit einem Bezeichner aufgerufen wurde. Sie nimmt ein optionales Argument label entgegen.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.count([label]);
+
+ +

Parameter

+ +
+
label {{optional_inline}}
+
Ein {{jsxref("String")}}. Wenn angegeben, gibt count() die Anzahl der Aufrufe mit diesem Label aus, ansonsten mit der Bezeichnung "default".
+
+ +

Beispiele

+ +

Nehmen wir folgenden Code als Beispiel:

+ +
let user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+ +

Sieht die Ausgabe in der Konsole in etwa so aus:

+ +
"default: 1"
+"default: 2"
+"default: 3"
+"default: 4"
+
+ +

Das Label wird als default angezeigt, da kein explizites Label angegeben wurde.

+ +

Wenn wir die Variable user als das Argument label an den ersten Aufruf von count() übergeben und den String "alice" an den zweiten:

+ +
let user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");
+ +

Sieht die Ausgabe so aus:

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"
+ +

Wir führen jetzt separate Zählungen ein, die nur auf dem Wert von label basieren.

+ +
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Console.count")}}

diff --git a/files/de/web/api/console/debug/index.html b/files/de/web/api/console/debug/index.html new file mode 100644 index 0000000000..15d8e258fc --- /dev/null +++ b/files/de/web/api/console/debug/index.html @@ -0,0 +1,63 @@ +--- +title: Console.debug() +slug: Web/API/Console/debug +translation_of: Web/API/Console/debug +--- +
{{APIRef("Console API")}}
+ +

Die Methode debug() gibt eine Nachricht der Protokollstufe "debug" auf der Konsole aus. Die Nachricht wird dem Benutzer nur angezeigt, wenn die Konsole für die Anzeige von Debug-Ausgaben konfiguriert ist.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.debug(obj1 [, obj2, ..., objN]);
+console.debug(msg [, subst1, ..., substN]);
+
+ +

Parameter

+ +
+
obj1 ... objN {{optional_inline}}
+
Eine Liste der auszugebenden JavaScript-Objekte. Die String-Darstellungen jedes dieser Objekte werden in der angegebenen Reihenfolge zusammengefügt und an die Konsole ausgegeben.
+
msg {{optional_inline}}
+
Ein JavaScript String, die keine oder mehrere Stringersetzungen enthält, die in aufeinanderfolgender Reihenfolge durch subst1 bis substN ersetzt werden.
+
subst1 ... substN {{optional_inline}}
+
JavaScript-Objekte, mit denen Stringersetzungen in msg ersetzt werden sollen. Dies gibt Ihnen zusätzliche Kontrolle über das Format der Ausgabe. Eine Beschreibung der Funktionsweise von Ersetzungen finden Sie unter {{SectionOnPage("/de-de/docs/Web/API/Console", "Verwenden von Ersatzstrings")}}.
+
+ +

Weitere Informationen finden Sie unter Text in der Konsole ausgeben in der Dokumentation des Objekts {{domxref("console")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#debug", "console.debug()")}}{{Spec2("Console API")}}Initiale definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Console.debug")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/console/dir/index.html b/files/de/web/api/console/dir/index.html new file mode 100644 index 0000000000..bd54b88c46 --- /dev/null +++ b/files/de/web/api/console/dir/index.html @@ -0,0 +1,56 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +translation_of: Web/API/Console/dir +--- +
{{APIRef("Console API")}}
+ +

Zeigt eine interaktive Liste der Eigenschaften des angegebenen JavaScript-Objekts an. Die Ausgabe wird als hierarchische Liste mit Aufklapp-Dreiecken angezeigt, in denen Sie den Inhalt untergeordneter Objekte sehen können.

+ +

Mit anderen Worten: Mit console.dir() können Sie alle Eigenschaften eines angegebenen JavaScript-Objekts in der Konsole anzeigen und problemlos abrufen.

+ +

{{AvailableInWorkers}}

+ +

console-dir.png

+ +

Syntax

+ +
console.dir(object);
+
+ +

Parameter

+ +
+
object
+
Ein JavaScript-Objekt, dessen Eigenschaften angezeigt werden sollen.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Console API", "#consoledirobject", "console.dir()")}}{{Spec2("Console API")}}Initiale Definition
+ +

Browserkompatibilität

+ +

{{Compat("api.Console.dir")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/console/index.html b/files/de/web/api/console/index.html new file mode 100644 index 0000000000..4f045815f1 --- /dev/null +++ b/files/de/web/api/console/index.html @@ -0,0 +1,296 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - DOM + - Debugging + - Reference + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

Das Console Objekt bietet Zurgiff auf die Debugging-Konsole des Browsers (z. B. die Web-Konsole in Firefox). Die Einzelheiten der Funktionsweise sind von Browser zu Browser unterschiedlich, es gibt jedoch de facto eine Reihe von Funktionen, die normalerweise bereitgestellt werden.

+ +

Auf das Console Objekt kann von jedem globalen Objekt aus zugegriffen werden. {{domxref("Window")}} im Browser und {{domxref("WorkerGlobalScope")}} als spezifische Varianten in Workern über die Property-Konsole. Es wird unter {{domxref("Window.console")}} zur Verfügung gestellt und kann als einfache Konsole referenziert werden. Zum Beispiel:

+ +
console.log("Failed to open the specified link")
+ +

Diese Seite dokumentiert die {{anch("Methods", "Methoden")}}, die für das Console Objekt verfügbar sind und enthält einige {{anch("Usage", "Anwendungsbeispiele")}}.

+ +

{{AvailableInWorkers}}

+ +

Methoden

+ +
+
{{domxref("Console.assert()")}}
+
Protokolliert eine Nachricht und eine Stack-Ablaufverfolgung in der Konsole, wenn das erste Argument false ist.
+
{{domxref("Console.clear()")}}
+
Leert die Konsole.
+
{{domxref("Console.count()")}}
+
Protokolliert, wie oft diese Zeile mit dem angegebenen Label aufgerufen wurde.
+
{{domxref("Console.countReset()")}}
+
Setzt den Wert des Zählers mit der angegebenen Bezeichnung zurück.
+
{{domxref("Console.debug()")}}
+
Gibt eine Nachricht mit der Protokollebene "debug" in der Konsole aus. +
Hinweis: Ab Chromium 58 wird diese Methode nur in Chromium-Browserkonsolen angezeigt, wenn die Stufe "Verbose" ausgewählt ist.
+
+
{{domxref("Console.dir()")}}
+
Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. In dieser Auflistung können Sie Offenlegungsdreiecke verwenden, um den Inhalt untergeordneter Objekte zu untersuchen.
+
{{domxref("Console.dirxml()")}}
+
+

Zeigt eine XML/HTML-Elementdarstellung des angegebenen Objekts an, falls möglich, oder die JavaScript-Objektansicht, falls dies nicht möglich ist.

+
+
{{domxref("Console.error()")}}
+
Gibt eine Fehlermeldung aus. Sie können Stringersetzung und zusätzliche Argumente mit dieser Methode verwenden.
+
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Ein Alias für error().
+
{{domxref("Console.group()")}}
+
Erstellt eine neue Inline-Gruppe, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Um eine Ebene wieder zu verlassen, rufen Sie groupEnd() auf.
+
{{domxref("Console.groupCollapsed()")}}
+
Erstellt eine neue Inline-Gruppe, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Anders als bei group() beginnt die Inline-Gruppe eingeklappt und muss über einen Button erst aufgeklappt werden. Um eine Ebene wieder zu verlassen, rufen Sie groupEnd() auf.
+
{{domxref("Console.groupEnd()")}}
+
Verlässt die aktuelle Inline-Gruppe.
+
{{domxref("Console.info()")}}
+
Informative Protokollierung von Informationen. Sie können Stringersetzung und zusätzliche Argumente mit dieser Methode verwenden.
+
{{domxref("Console.log()")}}
+
Zur allgemeinen Ausgabe von Protokollinformationen. Sie können Stringersetzung und zusätzliche Argumente mit dieser Methode verwenden.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
Startet den integrierten Profiler des Browsers (z. B. das Firefox-Leistungstool). Sie können einen optionalen Namen für das Profil angeben.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Stoppt den Profiler. Das resultierende Profil wird im Leistungstool des Browsers angezeigt (z. B. im Firefox-Leistungstool).
+
{{domxref("Console.table()")}}
+
Zeigt tabellarische Daten als Tabelle an.
+
{{domxref("Console.time()")}}
+
Startet einen Timer mit einem als Eingabeparameter angegebenen Namen. Auf einer Seite können bis zu 10.000 gleichzeitige Timer ausgeführt werden.
+
{{domxref("Console.timeEnd()")}}
+
Stoppt den angegebenen Timer und protokolliert die abgelaufene Zeit in Sekunden seit dem Start.
+
{{domxref("Console.timeLog()")}}
+
Protokolliert den Wert des angegebenen Timers in der Konsole.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Fügt der Zeitleiste oder dem Wasserfallwerkzeug des Browsers eine Markierung hinzu.
+
{{domxref("Console.trace()")}}
+
Gibt eine Stapelablaufverfolgung (stack trace) aus.
+
{{domxref("Console.warn()")}}
+
Gibt eine Warnmeldung aus. Sie können Stringersetzung und zusätzliche Argumente mit dieser Methode verwenden.
+
+ +

Benutzung

+ +

Text auf der Konsole ausgeben

+ +

Die am häufigsten verwendete Funktion der Konsole ist das Protokollieren von Text und anderen Daten. Sie können vier Ausgabekategorien erstellen, die Sie mit den Methoden {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} und {{domxref("console.error()")}} generieren können. Jedes dieser Ergebnisse hat eine unterschiedliche Ausgabe im Protokoll. Sie können die von Ihrem Browser bereitgestellten Filtersteuerelemente verwenden, um nur die Arten von Ausgaben anzuzeigen, die Sie interessieren.

+ +

Es gibt zwei Möglichkeiten, jede der Ausgabemethoden zu verwenden. Sie können einfach eine Liste von Objekten übergeben, deren Stringdarstellungen zu einem String verkettet werden, dann an die Konsole ausgegeben werden, oder Sie können einen String übergeben, der keine oder mehrere Ersatzstrings enthält, gefolgt von einer Liste von Objekten, um diese zu ersetzen.

+ +

Ein einzelnes Objekt ausgeben

+ +

Die einfachsten Methoden zur Verwendung der Protokollierungsmethoden sind die Ausgabe eines einzelnen Objekts:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

Die Ausgabe sieht ungefähr so aus:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Mehrere Objekte ausgeben

+ +

Sie können auch mehrere Objekte ausgeben, indem Sie sie beim Aufrufen der Protokollierungsmethode einfach nacheinander auflisten:

+ +
var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);
+ +

Diese Ausgabe sieht folgendermaßen aus:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+
+ +

String-Ersetzungen verwenden

+ +

Wenn Sie einen String an eine der Methoden des Konsolenobjekts übergeben, die einen String akzeptiert (z. B. log()), können Sie folgende Ersatzstrings verwenden:

+ + + + + + + + + + + + + + + + + + + + + + + + +
ErsatzstringBeschreibung
%o ode %OGibt ein JavaScript-Objekt aus. Durch Klicken auf den Objektnamen werden weitere Informationen dazu im Inspektor geöffnet.
%d oder %i +

Gibt eine Ganzzahl aus. Zahlenformatierung wird unterstützt, z. B. gibt console.log("Foo %.2d", 1.1) die Zahl als zwei signifikante Ziffern mit einer führenden 0 aus: Foo 01

+
%sGibt einen String aus.
%f +

Gibt einen Gleitkommawert aus. Die Formatierung wird unterstützt, zum Beispiel gibt console.log("Foo %.2f", 1.1) die Zahl mit 2 Dezimalstellen aus: Foo 1.10

+
+ +
+

Hinweis: Die Präzisionsformatierung funktioniert in Chrome nicht

+
+ +

Jedes dieser Elemente zieht das nächste Argument nach dem Formatstring aus der Parameterliste. Zum Beispiel:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

Die Ausgabe sieht folgendermaßen aus:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Konsolenausgaben stylen

+ +

Sie können die %c Direktive verwenden, um einen CSS-Stil auf die Konsolenausgabe anzuwenden:

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +
Der Text vor der Direktive wird nicht beeinflusst. Der Text nach der Direktive wird jedoch mit den CSS-Deklarationen im Parameter formatiert.
+ +
 
+ +
+ +
 
+ +
+

Hinweis: Es werden etliche CSS-Eigenschaften von diesem Stil unterstützt. Sie sollten experimentieren und sehen, welche sich als nützlich erweisen.

+
+ +
 
+ +
{{h3_gecko_minversion("Gruppen in der Konsole verwenden", "9.0")}}
+ +

Sie können verschachtelte Gruppen verwenden, um Ihre Ausgabe zu organisieren, indem Sie verwandtes Material visuell kombinieren. Um einen neuen verschachtelten Block zu erstellen, rufen Sie console.group() auf. Die Methode console.groupCollapsed() ist ähnlich, erstellt den neuen Block jedoch zusammengeklappt und erfordert die Verwendung einer Schaltfläche zum Öffnen.

+ +
Hinweis: Minimierte Gruppen werden in Gecko noch nicht unterstützt. Die Methode groupCollapsed() ist zu diesem Zeitpunkt die gleiche wie group().
+ +

Um die aktuelle Gruppe zu verlassen, rufen Sie einfach console.groupEnd() auf. Zum Beispiel mit diesem Code:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

Die Ausgabe sieht folgendermaßen aus:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timer", "10.0")}}
+ +

Um die Dauer einer bestimmten Operation zu berechnen, hat Gecko 10 die Unterstützung von Timern im console-Objekt eingeführt. Um einen Timer zu starten, rufen Sie die Methode console.time() auf und geben Sie ihm als einzigen Parameter einen Namen. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden abzurufen, rufen Sie einfach die Methode console.timeEnd() auf und übergeben den Namen des Timers erneut als Parameter. Auf einer Seite können bis zu 10.000 Timer gleichzeitig ausgeführt werden.

+ +

Zum Beispiel mit diesem Code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+
+ +

Protokolliert die Zeit, die der Benutzer zum Deaktivieren des Alert-Felds benötigt, schreibt die benötigte Zeit in der Konsole, wartet, bis der Benutzer die zweite Alert-Nachricht wegklickt und protokolliert dann die Endzeit in der Konsole:

+ +

timerresult.png

+ +

Beachten Sie, dass der Name des Timers sowohl beim Start als auch beim Stoppen des Timers angezeigt wird.

+ +
+

Hinweis: Es ist wichtig zu beachten, dass der Timer die Gesamtzeit für die Transaktion angibt, wenn Sie das Timing für den Netzwerkverkehr protokollieren. Die im Netzwerkbereich aufgeführte Zeit ist nur die Zeit, die der Header benötigt. Wenn Sie die Antwort-Body-Protokollierung aktiviert haben, sollte die angegebene Zeit für den Antwortheader und den Nachrichtentext der Anzeige in der Konsolenausgabe entsprechen.

+
+ +

Stapelverfolgung (Strack Traces)

+ +

Das Konsolenobjekt unterstützt auch die Ausgabe eines Stack-Trace. Daraufhin wird der Anrufpfad angezeigt, mit dem Sie den Punkt erreichen, an dem Sie {{domxref("console.trace()")}} aufrufen. Gegebener Code wie folgt:

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

Die Ausgabe in der Konsole sieht ungefähr so aus:

+ +

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Console")}}

+ +

Hinweise

+ + + +

Siehe auch

+ + + +

Andere Implementierungen

+ + diff --git a/files/de/web/api/console/log/index.html b/files/de/web/api/console/log/index.html new file mode 100644 index 0000000000..3f26aec9c3 --- /dev/null +++ b/files/de/web/api/console/log/index.html @@ -0,0 +1,180 @@ +--- +title: Console.log() +slug: Web/API/Console/log +tags: + - API + - Debugging + - NeedsBrowserCompatibility + - Web Entwicklung + - Web Konsole + - console + - console.dir + - console.log +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +

Gibt eine Nachricht auf der Web-Konsole aus.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Parameter

+ +
+
obj1 ... objN
+
Eine Liste von auszugebenden JavaScript-Objekten. Die Zeichenfolgedarstellungen der Objekte werden in der angegebenen Reihenfolge aneinandergehängt und ausgegeben.
+
msg
+
Eine JavaScript-Zeichenfolge, die Null oder mehr Ersatzzeichefolgen enthält.
+
subst1 ... substN
+
JavaScript-Objekte durch die die Ersatzzeichenfolgen in msg ersetzt werden sollen. Dies gibt Ihnen zusätzliche Kontrolle über die Formatierung der Ausgabe.
+
+ +

Weitere Details finden Sie im Abschnitt Outputting text to the console in der Dokumentation zu {{domxref("console")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Erste Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Ersatzzeichenfolgen{{CompatVersionUnknown}}
+ {{CompatChrome(28)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}10[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Verfügbar in Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Ersatzzeichenfolgen{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Verfügbar in Workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Weisst man %d einen negativen Wert zu, wird dieser zur nächsten negative Ganzzahl abgerundet; z. B. wird -0.1 zu -1.

+ +

[2] %c wird nicht unterstützt; %d wird als 0 angezeigt, falls der Wert keine Nummer ist.

+ +

Unterschied zu console.dir()

+ +

In Firefox generieren beide Kommandos dieselbe Ausgabe, wenn als Parameter ein DOM-Element mitgegeben wird: Man erhält in beiden Fällen eine JSON-artige Baumstruktur.

+ +

In Chrome besteht aber bei gleicher Eingabe ein nützlicher Unterschied:

+ +

+ +

Bemerkung:

+ + + +

Mit console.log werden DOM-Elemente also speziell behandelt. Bei console.dir ist dies nicht der Fall. Dies ist oft dann nützlich, wenn man die vollständige Darstellung des DOM-JS-Objekts ansehen möchte.

+ +

Mehr Informationen dazu finden Sie unter Chrome Console API reference.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/console/table/index.html b/files/de/web/api/console/table/index.html new file mode 100644 index 0000000000..c641bf0c6f --- /dev/null +++ b/files/de/web/api/console/table/index.html @@ -0,0 +1,214 @@ +--- +title: Console.table() +slug: Web/API/Console/table +tags: + - Konsole + - Tabelle + - log + - tabellarisch +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}
+ +

Zeigt tabellarische Daten als Tabelle im Log an.

+ +

Diese Funktion benötigt einen Parameter data, welcher ein Array oder ein Objekt sein muss und außerdem einen optionalen Parameter columns.

+ +

Die Funktion zeigt data als Tabelle im Log an. Jedes Element im Array (bzw. jede zählbare Eigenschaft im data Objekt) wird als Tabellenzeile angezeigt.

+ +

Die erste Tabellenspalte wird mit (index) bezeichnet. Wenn data ein Array ist, dann erscheinen in dieser Spalte die Arrayindizes. Wenn data ein Objekt ist, dann erscheinen in dieser Spalte die Eigenschaftsnamen. Beachten Sie, dass (bei Firefox) console.table maximal 1000 Zeilen anzeigt. (Die erste Zeile ist die Überschriftszeile mit der Bezeichnung index).

+ +

{{AvailableInWorkers}}

+ +

Sammlungen (Collections) mit primitiven Datentypen

+ +

Der data Parameter kann ein Array oder ein Objekt sein.

+ +
// Ein String-Array
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// Ein Objekt mit Eigenschaften, die Strings sind
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Sammlungen (Collections) mit zusammengesetzen Typen

+ +

Wenn die Arrayinhalte oder die Objekteigenschaften selbt Arrays oder Objekte sind, dann werden deren Elemente einzeln in jeder Spalte dargestellt:

+ +
// Ein Array, welches Arrays enthält
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// Ein Array mit Objekten
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Beachten Sie: Wenn das Array Objekte enthält, dann werden die Spalten mit dem Eigenschaftsnamen beschriftet.

+ +

Table displaying array of objects

+ +
// Ein Objekt mit Eigenschaften, welche wiederum ein
+// Objekt sind
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Auswahl der anzuzeigenden Spalten

+ +

Nromalerweise zeigt console.table() alle Elemente in jeder Zeile an. Sie können aber den optionalen Parameter columns verwenden, um nur bestimmte Spalten anzuzeigen:

+ +
// Ein Array mit Objekten, nur der "firstName"
+// wird angezeigt.
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Tabelle sortieren

+ +

Sie können die Tabelle durch einen Klick auf den jeweiligen Spaltenkopf umsortieren.

+ +

Syntax

+ +
console.table(data [, columns]);
+
+ +

Parameter

+ +
+
data
+
Die anzuzeigenden Daten. Diese müssen ein Array oder ein Objekt sein.
+
columns
+
Ein Array mit den anzuzeigenden Spalten.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Initial definition
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/de/web/api/console/time/index.html b/files/de/web/api/console/time/index.html new file mode 100644 index 0000000000..850c459e99 --- /dev/null +++ b/files/de/web/api/console/time/index.html @@ -0,0 +1,56 @@ +--- +title: Console.time() +slug: Web/API/Console/time +translation_of: Web/API/Console/time +--- +
{{APIRef("Console API")}}
+ +

Startet einen Timer, den man benutzen kann, um zu überprüfen wie lange eine bestimmte Operation. Man kann jedem Timer einen einzigartigen Namen geben und kann bis zu 10000 Timer gleichzeitig auf einer Seite laufen lassen. Wenn man {{domxref("console.timeEnd()")}} mit dem selben Namen aufruft, gibt der Browser die Zeit in Millisekunden zurück, die seit dem Starten des Timers verstrichen ist.

+ +

Siehe auch Timer in der {{domxref("console")}} Dokumentation für weitere Details und Beispiele.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.time(Bezeichnung);
+
+ +

Parameter

+ +
+
Bezeichnung
+
Der Name des neuen Timers. Dieser wird den Timer identifizieren; Der selbe Name sollte beim aufrufen von {{domxref("console.timeEnd()")}} genutzt werden, um den Timer zu stoppen und das Ergebnis in die Konsole zu drucken.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#time", "console.time()")}}{{Spec2("Console API")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Console.time")}}

+ +

See also

+ + diff --git a/files/de/web/api/console/timeend/index.html b/files/de/web/api/console/timeend/index.html new file mode 100644 index 0000000000..65c6242a83 --- /dev/null +++ b/files/de/web/api/console/timeend/index.html @@ -0,0 +1,57 @@ +--- +title: Console.timeEnd() +slug: Web/API/Console/timeEnd +translation_of: Web/API/Console/timeEnd +--- +
{{APIRef("Console API")}}
+ +

Stopt einen Timer, der zuvor mit {{domxref("console.time()")}} gestartet wurde.

+ +

Siehe auch Timer in der Dokumentation für mehr Details und Beispiele

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.timeEnd(Bezeichnung);
+
+ +

Parameter

+ +
+
Bezeichnung
+
Der Name des zu stoppenden Timers. Nachdem der Timer gestoppt wurde, wird die verstrichene Zeit automatisch in der Web Konsole ausgegeben.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Initial definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.Console.timeEnd")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/console/warn/index.html b/files/de/web/api/console/warn/index.html new file mode 100644 index 0000000000..a481fda12b --- /dev/null +++ b/files/de/web/api/console/warn/index.html @@ -0,0 +1,147 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +translation_of: Web/API/Console/warn +--- +
{{APIRef("Console API")}}{{non-standard_header}}
+ +

Ausgabe einer Warnmeldung in der Web-Konsole.

+ +

{{AvailableInWorkers}}

+ +

{{Note("In Firefox haben Warnungen in der Web-Console ein kleines Ausrufzeichen Symbol neben dem Meldungstext.")}}

+ +

Syntax

+ +
console.warn(obj1 [, obj2, ..., objN]);
+console.warn(msg [, subst1, ..., substN]);
+
+ +

Parameter

+ +
+
obj1 ... objN
+
Eine Liste von JavaScript Objecten, die ausgegeben werden sollen. Die String-Darstellung jedes einzelnen Objekts wird in der angegebenen Reihenfolge aneinander gehangen und ausgegeben.
+
msg
+
Ein JavaScript String der keinen oder mehrere Platzhalter-Strings enthält.
+
subst1 ... substN
+
JavaScript Objekte, die in die Platzhalter-Strings in msg eingesetzt werden. Dadurch kann das Ausgabeformat der Meldung zusätzlich beeinflusst werden.
+
+ +

Sie Textausgabe in der Konsole in der Dokumentation von {{domxref("console")}} für weitere Details.

+ +

Spekifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Console API", "#consolewarnobject--object-", "console.warn()")}}{{Spec2("Console API")}}Initial definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Substitution strings{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Substitution strings{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/crypto/index.html b/files/de/web/api/crypto/index.html new file mode 100644 index 0000000000..0bf9eb23fc --- /dev/null +++ b/files/de/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interface + - Referenz + - Schnittstelle + - Web Crypto API +translation_of: Web/API/Crypto +--- +

{{APIRef("Web Crypto API")}}

+ +

Die Crypto-Schnittstelle bietet grundlegende kryptographische Funktionen, die im aktuellen Kontext verfügbar sind. Sie ermöglicht den Zugriff auf kryptographische Primitive wie z.B. einen verschlüsselungstechnisch starken Zufallszahlengenerator.

+ +

Ein Objekt mit dieser Schnittstelle ist im Web-Kontext über die Eigenschaft {{domxref("Window.crypto")}} verfügbar.

+ +

Eigenschaften

+ +

Diese Schnittstelle implementiert Eigenschaften, die unter {{domxref("RandomSource")}} definiert sind.

+ +
+
{{domxref("Crypto.subtle")}} {{readOnlyInline}}
+
Gibt ein {{domxref("SubtleCrypto")}}-Objekt zurück, das Zugriff auf einfache kryptographische Methoden wie Hash-Funktionen, Signierung, Ver- und Entschlüsselung ermöglicht.
+
 
+
+ +

Methoden

+ +

Diese Schnittstelle implementiert Methoden, die unter {{domxref("RandomSource")}} beschrieben sind.

+ +
+
{{domxref("Crypto.getRandomValues()")}}
+
Füllt das übergebene {{ jsxref("TypedArray") }} mit kryptographisch sinnvollen Zufallswerten.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +
+ + +

{{Compat("api.Crypto")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/css/escape/index.html b/files/de/web/api/css/escape/index.html new file mode 100644 index 0000000000..904da32560 --- /dev/null +++ b/files/de/web/api/css/escape/index.html @@ -0,0 +1,79 @@ +--- +title: CSS.escape() +slug: Web/API/CSS/escape +tags: + - API + - CSS + - CSSOM + - Méthode + - Referenz + - Statisch + - escape() + - maskieren +translation_of: Web/API/CSS/escape +--- +

{{APIRef("CSSOM")}}{{SeeCompatTable}}

+ +

Die statische Methode CSS.escape() gibt ein {{DOMxRef("CSSOMString")}} zurück, das die maskierte Zeichenfolge des übergebenen String Parameters enthält, hauptsächlich zur Verwendung als Teil eines CSS Selektors.

+ +

Syntax

+ +
escapedStr = CSS.escape(str);
+
+ +

Parameter

+ +
+
str
+
Die zu maskierende Zeichenfolge {{DOMxRef("CSSOMString")}}.
+
+ +

Beispiele

+ +

Grundlegende Ergebnisse

+ +
CSS.escape(".foo#bar")        // "\.foo\#bar"
+CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
+CSS.escape('--a')             // "--a"
+CSS.escape(0)                 // "\30 ", the Unicode code point of '0' is 30
+CSS.escape('\0')              // "\ufffd", the Unicode REPLACEMENT CHARACTER
+ +

Verwendung im Kontext

+ +

Um einen String als Teil eines Selektors zu maskieren kann die escape() Methode verwendet werden:

+ +
var element = document.querySelector('#' + CSS.escape(id) + ' > img');
+ +

Die escape() Methode kann auch verwendet werden um Strings zu maskieren. Die Maskierung wird dabei auf Zeichen angewendet, die streng genommen nicht maskiert werden müssen.

+ +
var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS.escape()')}}{{Spec2('CSSOM')}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.CSS.escape")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/css/index.html b/files/de/web/api/css/index.html new file mode 100644 index 0000000000..fe659bba03 --- /dev/null +++ b/files/de/web/api/css/index.html @@ -0,0 +1,90 @@ +--- +title: CSS +slug: Web/API/CSS +tags: + - API + - CSSOM + - Interface + - NeedsTranslation + - Painting + - Reference + - TopicStub +translation_of: Web/API/CSS +--- +
{{APIRef("CSSOM")}}
+ +

The CSS interface holds useful CSS-related methods. No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.

+ +

Properties

+ +

The CSS interface is a utility interface and no object of this type can be created: only static properties are defined on it.

+ +

Static properties

+ +
+
{{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}
+
Provides access to the Worklet responsible for all the classes related to painting.
+
+ +

Methods

+ +

The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.

+ +

Static methods

+ +

No inherited static methods.

+ +
+
{{DOMxRef("CSS.registerProperty()")}}
+
Registers {{cssxref('--*', 'custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value.
+
{{DOMxRef("CSS.supports()")}}
+
Returns a {{JSxRef("Boolean")}} indicating if the pair property-value, or the condition, given in parameter is supported.
+
{{DOMxRef("CSS.escape()")}}
+
Can be used to escape a string mostly for use as part of a CSS selector.
+
{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}
+
Can be used to return a new CSSUnitValue with a value of the parameter number of the units of the name of the factory function method used.
+
+ 
CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}{{Spec2('CSS Painting API')}}Adds the paintWorklet static property.
{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}{{Spec2('CSSOM')}}Adds the escape() static method.
{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}{{Spec2('CSS3 Conditional')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.CSS", 1)}}

+ +

See Also

+ + diff --git a/files/de/web/api/css_painting_api/guide/index.html b/files/de/web/api/css_painting_api/guide/index.html new file mode 100644 index 0000000000..536040de4e --- /dev/null +++ b/files/de/web/api/css_painting_api/guide/index.html @@ -0,0 +1,534 @@ +--- +title: Die CSS Painting API verwenden +slug: Web/API/CSS_Painting_API/Guide +translation_of: Web/API/CSS_Painting_API/Guide +--- +

Die CSS Paint API wurde entworfen, um Entwicklern zu ermöglichen, programmatisch Bilder festzulegen, die überall dort verwendet werden können, wo ein CSS Bild aufgerufen werden kann, wie in CSS background-image, border-image, mask-image, etc.

+ +

Um programmatisch ein Bild zu erstellen, das von einem CSS stylesheet verwendet wird, müssen wir folgende Schritte abarbeiten:

+ +
    +
  1. Lege ein "paint worklet" mit der registerPaint() Funktion fest.
    2. +
  2. Melde das worklet an.
    3. +
  3. Binde mit Include die {{cssxref('paint()','paint()')}} CSS Funktion ein.
    4. +
+ +

Zum besseren Verständnis dieser einzelnen Schritte werden wir eine halbhohe farbliche Markierung wie in folgender Titelzeile erstellen:

+ +

Text reading 'My Cool Header' with a solid yellow background image block on the bottom left two thirds of the header

+ +

CSS paint worklet

+ +

In einer externen Skript-Datei nutzen wir die registerPaint() Funktion, um unser CSS Paint worklet zu benennen. Diese benötigt zwei Parameter. Der erste ist der Name, den wir dem worklet geben — diesen Namen werden wir als einen Parameter von der paint() Funktion verwenden, wenn wir das Bild einem Element hinzufügen wollen. Der zweite Parameter ist die Klasse, die die ganze Magie ausführt: die die Kontext-Entscheidungen festlegt und natürlich das Bild, das wir auf unsere Oberfläche malen wollen.

+ +
registerPaint('headerHighlight', class {
+
+  /*
+       definiere dies, wenn die Alphatransparenz erlaubt ist;
+       alpha ist standardmäßig true; wenn auf false gesetzt, sind
+       alle Farben, die auf der Canvas genutzt werden, opak
+    */
+  static get contextOptions() {
+           return { alpha: true };
+    }
+
+    /*
+        ctx ist der 2D Zeichen Kontext
+        eine Untermenge der HTML5 Canvas API.
+    */
+  paint(ctx) {
+        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
+        ctx.fillRect(0, 15, 200, 20);     /* order: x, y, w, h */
+  }
+});
+ +

In diesem Klassenbeispiel haben wir die Umstände (options) eines einzelnen Kontexts mit der contextOptions() Funktion festgelegt: wir haben ein einfaches Objekt zurückgegeben, das aussagt, dass die Alphatransparenz erlaubt ist.

+ +

Wir haben dann die paint() Funktion verwendet, um unser Objekt auf die Canvas zu zeichnen.

+ +

Die paint() Funktion kann drei Parameter aufnehmen. Hier übergeben wir nur ein Argument: den Rendering Kontext (wir schauen uns das im weiteren Verlauf noch genauer an), der oftmals mit dem Variablennamen ctx bezeichnet wird. Der 2D Rendering Context ist eine Untermenge der HTML5 Canvas API; die Version, die für CSS Houdini verfügbar is (auch PaintRenderingContext2D genannt), ist eine weitere Untermenge, die über die meisten Zusätze verfügt, die auch in der Canvas API vorhanden sind, mit Ausnahme von CanvasImageData, CanvasUserInterface, CanvasText, und CanvasTextDrawingStyles APIs.

+ +

Wir weisen mit fillStyle den Wert hsla(55, 90%, 60%, 1.0) zu, ein blasses Gelb, und rufen dann fillRect() auf, um ein farbiges Rechteck zu erstellen. Die Parameter von fillRect() sind, in der Abfolge, x-Achse und y-Achse (und zugleich die feste Koordinate), Breite und Höhe. fillRect(0, 15, 200, 20) erstellt ein Rechteck von 200 Einheiten Breite und 20 Einheiten Höhe, die 0 Einheiten von der linken und 15 Einheiten von der oberen Seite der Box entfernt sind, in der das Rechteck eingezeichnet wird.

+ +

Wir können die CSS background-size and background-position Eigenschaften (properties) verwenden, um das Hintergrundbild in seiner Größe und Position zu verändern, aber die oben festgelegten Werte sind die Standardwerte der gelben Box, die wir in unserem paint worklet definiert haben.

+ +

Wir haben dieses Beispiel einfach gehalten. Für mehr Möglichkeiten werfen Sie bitte einen Blick in die Canvas Dokumentation. Wir werden weiter unten im Tutorial auch komplexere Beispiele nutzen.

+ +

Das paint worklet verwenden

+ +

Um das paint worklet zu verwenden, müssen wir dies mit addModule() anmelden und in unsere CSS einfügen, wobei wir sicherstellen müssen, dass der CSS Selektor zu einem DOM Knoten in unserem HTML-Code passt.

+ +

Das worklet anmelden

+ +

Wir haben unser paint worklet in einer externen script-Datei erstellt, wie oben geziegt. Wir müssen jetzt unser worklet in unserer Hauptanwendung anmelden:

+ +
CSS.paintWorklet.addModule('nameOfPaintWorkletFile.js');
+ +

Dazu benutzen wir die von Paint Worklet bereitgestellte Funktion addModule() in einem <script>-Block innerhalb unseres HTML oder in einer externen JavaScript-Datei, die dann seinerseits von der Hauptanwendung aufgerufen werden muss.

+ +

In unserem Beispiel ist das worklet auf GitHub gespeichert.

+ +
+
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/01partOne/header-highlight.js');
+ +

Auf das paint worklet in CSS verweisen

+ +

Haben wir das paint worklet angemeldet, können wir es in CSS benutzen. Dabei kann man die Funktion paint() so benutzen, wie man auch jeden anderen <image> Typ verwendet. In paint() wird als Parameter derselbe Name des worklets übergeben, den wir bei registerPaint() eingetragen haben.

+ +
.fancy {
+  background-image: paint(headerHighlight);
+}
+ +

Alles zusammensetzen

+ +

Nun können wir die fancy-Klasse aus CSS einem HTML-Element ganz normal in der Property class übergeben, um die gelbe Box als Hintergrundbild erscheinen zu lassen:

+ +
<h1 class="fancy">My Cool Header</h1>
+ +

Das folgende Beispiel wird wie das obige Beispiel in einem Browsers, der die CSS Painting API unterstützt, aussehen.

+
+ +

{{EmbedLiveSample("paintapi", 120, 120)}}

+ +

Während Sie vom HTML aus das worklet nicht mehr (innerlich) verändern können, können Sie trotzdem mit CSS über background-size und background-position Größe und Position des Bildes anpassen.

+ +

PaintSize

+ +

Im Beispiel oben haben wir eine Box aus 20x200 Einheiten erstellt, die 15 Einheiten vom oberen Rand der umgebenen Box - eines HTML-Elements - entfernt liegt, gleichgültig, welche Größe die umhüllende Box selbst hat. Ist der Text klein, sieht die Box wie eine große Unterstreichung aus, ist er groß und lang, ist die Box gleich einem Balken unter den ersten Buchstaben. Günstiger wäre aber, wenn das Hintergrundbild relativ zur Größe des umhüllenden Elementes wäre. Dafür können wir die paintSize Property, bzw. size.width und size.height, verwenden. Diese übernimmt die Breite und Höhe des umliegenden Elements und rechnet die Größe des worklets dafür aus.

+ +

The background is 50% of the height and 60% of the width of the element

+ +

In diesem Beispiel-Bild ist der Hintergrund proportional zu der Größe des umhüllenden Elements. Das dritte Beispiel hat als Breite width: 50%; das Hintergrundbild passt sich in den ersten beiden Beispielen der Größe der Schrift an und damit der Höhe des Blocks, im dritten Beispiel sieht man aber auch deutlich, dass die Breite ebenfalls passend gemacht wird.

+ +

Der Code, mit dem das möglich ist, sieht dann folgendermaßen aus:

+ +
registerPaint('headerHighlight', class {
+
+  static get contextOptions() {
+           return { alpha: true };
+  }
+
+    /*
+        ctx is the 2D drawing context
+        size is the paintSize, the dimensions (height and width) of the box being painted
+    */
+
+  paint(ctx, size) {
+        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
+        ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 );
+  }
+});
+ +

Der Code unterscheidet sich an zwei Stellen vom ersten Beispiel:

+ +
    +
  1. Wir haben ein zweites Argument in paint() eingefügt, die Größe size.
    2. +
  2. Wir berechnen die Dimensionen und die Position unseres Rechtecks relativ zu dieser Größe size und nicht mehr mit absoluten Werten, mit Hilfe der Properties .width und .height.
    3. +
+ +

Unsere HTML-Elemente haben nur ein Hintergrundbild, welches sich in Größe und Breite ändert.

+ + + +

Wenn du mit diesem worklet herumspielst, kannst du dessen Größe über die Eigenschaften font-size und width des umhüllenden Elements ändern.

+ +

In Browsern, die CSS Paint API unterstützen, erscheint das unten aufgeführte Beispielt wie das Bild oben.

+ +

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

+ +

Properties anpassen

+ +

Zusätzlich zu der Größe des Elements kann ein worklet auch auf andere CSS-Eigenschaften zugreifen.

+ +
registerPaint('cssPaintFunctionName', class {
+     static get inputProperties() { return ['PropertyName1', '--customPropertyName2']; }
+     static get inputArguments() { return ['<color>']; }
+     static get contextOptions() { return {alpha: true}; }
+
+     paint(drawingContext, elementSize, styleMap) {
+         // Paint code goes here.
+     }
+});
+
+ +

Die drei Parameter der Funktion paint() enthalten den Zeichenkontext, die Größe des Malgrundes (meist des umgebenden Elements) und Eigenschaften (properties). Um auf die Eigenschaften zugreifen zu können, muss man die statische Methode inputProperties() aufrufen, die den Zugriff auf die CSS properties ermöglicht, sowohl der regulären als auch angepasster Eigenschaften. Diese liefert ein array mit den Namen der Eigenschaften zurück (wir werfen im letzten Abschnitt einen näheren Blick auf inputArguments).

+ +

Example

+ +
+

Legen wir dazu eine Liste an, deren Hintergrundbild zwischen drei verschiedenen Farben und drei unterschiedlichen Breiten wechselt.

+ +

The width and color of the background image changes based on the custom properties

+ +

In unserer CSS weisen wir verschiedene Farben und eine Anpassung der Breite des worklets über die --boxColor und --widthSubtractor Eigenschaften zu.

+ + + + + +
li {
+   background-image: paint(boxbg);
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   --widthSubtractor: 20;
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   --widthSubtractor: 40;
+}
+
+ +

Beachte, dass wir im CSS Eigenschaften verwenden, die nicht zum normalen CSS gehören, sondern von uns selbst definiert worden sind: boxColor und widthSubtractor. Auf diese können wir im worklet zugreifen, wenn wir diese über inputProperties() zugänglich machen.

+ +
registerPaint('boxbg', class {
+
+  static get contextOptions() { return {alpha: true}; }
+
+  /*
+     use this function to retrieve any custom properties (or regular properties, such as 'height')
+     defined for the element, return them in the specified array
+  */
+  static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
+
+  paint(ctx, size, props) {
+    /*
+       ctx -> drawing context
+       size -> paintSize: width and height
+       props -> properties: get() method
+    */
+
+    ctx.fillStyle = props.get('--boxColor');
+    ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
+  }
+});
+ +

Wir haben die Methode inputProperties() in der registerPaint() Klasse verwendet, um die Werte der beiden von uns definierten Eigenschaften zu erhalten, die das worklet boxbg anwenden. Mit inputProperties() legen wir uns einen Array an, der normale CSS-Eigenschaften wie auch selbst definierte erhalten kann.

+ +

In unserem <script>-Block melden wir das worklet an:

+ +
+
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklet/boxbg.js');
+
+ +

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

+ +

In der Anwendung können wir zwar nicht das Script des worklets verändern, aber alle Werte, die über CSS übergeben werden und die vom worklet verarbeitet werden.

+ +

Komplexität hinzufügen

+ +

Das obenstehende Beispiel ist nicht sonderlich aufregend, da man es ebenso mit CSS in wenigen Schritten und ohne den Aufwand eines worklets programmieren kann, etwa, indem man dekorative Inhalte mit ::before hinzufügt oder mit background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; - Was die CSS Painting API so interessant und machtvoll macht, ist die Möglichkeit, komplexe Bilder zu erstellen und Variablen zu übergeben.

+ +

Werfen wir einen Blick auf ein komplexeres Beispiel.

+ +
registerPaint('headerHighlight', class {
+  static get inputProperties() { return ['--highColour']; }
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props) {
+
+		/* set where to start the highlight & dimensions */
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const highlightHeight = size.height * 0.85;
+        const color = props.get('--highColour');
+
+		ctx.fillStyle = color;
+
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + highlightHeight, highlightHeight );
+		ctx.lineTo( x, highlightHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+
+		/* create the dashes */
+		for (let i = 0; i < 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( (blockWidth) + (start * 10) + 10, y );
+			ctx.lineTo( (blockWidth) + (start * 10) + 20, y );
+			ctx.lineTo( (blockWidth) + (start * 10) + 20 + (highlightHeight), highlightHeight );
+			ctx.lineTo( (blockWidth) + (start * 10) + 10 + (highlightHeight), highlightHeight );
+			ctx.lineTo( (blockWidth) + (start * 10) + 10, y );
+			ctx.closePath();
+			ctx.fill();
+		}
+  } // paint
+});
+ +
+

Wir können dann einige Zeilen HTML mit der entsprechenden Klasse aus CSS schreiben:

+ +
<h1 class="fancy">Largest Header</h1>
+<h3 class="fancy">Medium size header</h3>
+<h6 class="fancy">Smallest Header</h6>
+ +

Dann geben wir den einzelnen HTML-Elementen je einen verschiedenen Wert für die von uns definierte Eigenschaft --highColour:

+ +
.fancy {
+  background-image: paint(headerHighlight);
+}
+h1 { --highColour: hsla(155, 90%, 60%, 0.7); }
+h3 { --highColour: hsla(255, 90%, 60%, 0.5); }
+h6 { --highColour: hsla(355, 90%, 60%, 0.3); }
+ +

Und wir melden das worklet an:

+ +
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/03partThree/header-highlight.js');
+ +

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

+ +

Während man das worklet selbst nicht ändern kann, kann man mit CSS und HTML jedoch herumspielen. Vielleicht probieren Sie mal float und clear bei den Titelzeilen <h1>, <h3> und <h6> aus.

+ +

Man kann natürlich auch Hintergrundbilder ohne CSS paint API erstellen. Das kann allerdings zu einem großen Mehraufwand und wesentlich mehr Code führen. Mit CSS Paint API kann ein worklet immer wieder verwendet werden und über eine Parameter-Übergabe rasch angepasst werden.

+
+ +

Parameter übergeben

+ +

Mit der CSS Paint API können wir nicht nur auf selbstdefinierte Eigenschaften zugreifen, sondern auch über die CSS-Funktion paint() auch Parameter übergeben.

+ +

Nehmen wir an, wir wollen ab und zu den Hintergrund nur mit einem Strich statt vollständig füllen. Dafür können wir ein Extra-Argument übergeben, welches dann im worklet abgefragt und entsprechend verarbeitet wird.

+ +
li {
+	background-image: paint(hollowHighlights, stroke);
+}
+
+ +

Mit der Methode inputArguments() in der Klasse registerPaint() machen wir das zusätzliche Argument aus der CSS-Funktion paint() zugänglich:

+ +
static get inputArguments() { return ['*']; }
+
+ +

Und wenn wir darauf zugreifen wollen:

+ +
paint(ctx, size, props, args) {
+
+	// use our custom arguments
+	const hasStroke = args[0].toString();
+
+	// if stroke arg is 'stroke', don't fill
+	if (hasStroke === 'stroke') {
+		ctx.fillStyle = 'transparent';
+		ctx.strokeStyle = colour;
+	}
+	...
+}
+
+ +

Wir können auch mehr als ein Argument übergeben:

+ +
li {
+	background-image: paint(hollowHighlights, stroke, 10px);
+}
+
+ +

Wir können auch den Datentyp genau angeben. Wenn wir die Werte der Argumente mit get holen, fragen wir dann speziell nach einer <length> Einheit.

+ +
static get inputArguments() { return ['*', '<length>']; }
+ +

In diesem Fall haben wir spezifisch nach einem <length> Attribut gefragt. Das erste Element des Arrays wird dann als CSSUnparsedValue, das zweite als CSSStyleValue übergeben.

+ +

Wenn das selbstdefinierte Argument ein CSS-Wert ist, zum Beispiel eine Maßeinheit, können wir die Typed OM CSSStyleValue Klasse (und deren Unterklassen) aufrufen, indem wir das Schlüsselwort für diesen Typen in der Methode inputArguments() nutzen.

+ +

Fügen wir einfach ein weiteres Argument für die Pixel-Breite unserer Hintergrundlinie hinzu:

+ +
li {
+	background-image: paint(hollowHighlights, stroke, 10px);
+}
+
+ +

Wenn wir mit get unsere Argumentenliste holen, können wir direkt nach der <length> Einheit fragen.

+ +
static get inputArguments() { return ['*', '<length>']; }
+
+ +

Nun können wir Typen und Werte der Properties übergeben, was bedeutet: wir können die Anzahl der Pixel und den Typ Nummer direkt verwenden (zugegeben nimmt ctx.lineWidth einen Float als Wert und eigentlich keinen Wert mit Längeneinheiten, aber um des Beispiels willen ...).

+ +
paint(ctx, size, props, args) {
+
+		const strokeWidth = args[1];
+
+		if (strokeWidth.unit === 'px') {
+			ctx.lineWidth = strokeWidth.value;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+
+	...
+}
+
+ +

Es ist wichtig, hier den Unterschied zwischen selbsterstellten Properties und den Argumenten zu erwähnen. Selbsterstellte Properties (und auch alle Properties für einen bestimmten Selektor) sind global - sie können überall in unserem CSS und JS verwendet werden.

+ +

Wenn Sie zum Beispiel ein --mainColor definiert haben, der dazu dient, eine Farbe mit der Funktion paint() zu setzen, kann dieser auch dazu verwendet werden, anderswo im CSS Farben zu setzen. Wenn Sie diesen Wert speziell für paint ändern wollen, kann sich das als schwierig erweisen. Hier kommt dann das angepasste Argument ins Spiel. Argumente dienen dazu, das zu kontrollieren, was man aktuell zeichnet, während Properties dazu dienen, den Stil zu kontrollieren.

+ +

The list items have a background image that is either pink, purple or green, with different stroke widths, and the green one being filled.

+ +

Nun können wir die Vorteile dieser API sehen: wir können zahlreiche selbsterstellte Properties und Argumente dafür verwenden, um wiederverwendbare und vollkommen kontrollierbare Styling-Funktionen zu erstellen.

+ +
registerPaint('hollowHighlights', class {
+
+  static get inputProperties() { return ['--boxColor']; }
+  // Input arguments that can be passed to the `paint` function
+  static get inputArguments() { return ['*','']; }
+
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props, args) {
+    // ctx   -> drawing context
+    // size  -> size of the box being painted
+    // props -> list of custom properties available to the element
+	// args  -> list of arguments set when calling the paint() function in the css
+
+		// where to start the highlight & dimensions
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const blockHeight = size.height * 0.85;
+
+		// the values passed in the paint() function in the CSS
+		const colour = props.get( '--boxColor' );
+		const strokeType = args[0].toString();
+		const strokeWidth = parseInt(args[1]);
+
+
+		// set the stroke width
+		if ( strokeWidth ) {
+			ctx.lineWidth = strokeWidth;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+		// set the fill type
+		if ( strokeType === 'stroke' ) {
+			ctx.fillStyle = 'transparent';
+			ctx.strokeStyle = colour;
+		} else if ( strokeType === 'filled' ) {
+			ctx.fillStyle = colour;
+			ctx.strokeStyle = colour;
+		} else {
+			ctx.fillStyle = 'none';
+			ctx.strokeStyle = 'none';
+		}
+
+		// block
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + blockHeight, blockHeight );
+		ctx.lineTo( x, blockHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+		// dashes
+		for (let i = 0; i < 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( blockWidth + (start * 10) + 10, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10, y);
+			ctx.closePath();
+			ctx.fill();
+			ctx.stroke();
+		}
+
+  } // paint
+});
+
+ +

Wir können verschiedene Farbe und Strichstärken setzen und entscheiden, ob das Hintergrundbild gefüllt oder leer ist:

+ +
+
li {
+   --boxColor: hsla(155, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, stroke, 5px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(255, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(355, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}
+ + + +

In unserem <script>-Block melden wir das Worklet an:

+ +
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hollow.js');
+
+ +

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

+ +

Siehe auch

+ + diff --git a/files/de/web/api/css_painting_api/index.html b/files/de/web/api/css_painting_api/index.html new file mode 100644 index 0000000000..799979f66b --- /dev/null +++ b/files/de/web/api/css_painting_api/index.html @@ -0,0 +1,199 @@ +--- +title: CSS Painting API +slug: Web/API/CSS_Painting_API +tags: + - API + - CSS + - CSS Paint API + - Houdini + - NeedsTranslation + - Painting + - Reference + - TopicStub +translation_of: Web/API/CSS_Painting_API +--- +
{{DefaultAPISidebar("CSS Painting API")}}
+ +

The CSS Painting API — part of the CSS Houdini umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content.

+ +

Concepts and usage

+ +

Essentially, the CSS Painting API contains functionality allowing developers to create custom values for {{cssxref('paint', 'paint()')}}, a CSS <image> function. You can then apply these values to properties like {{cssxref("background-image")}} to set complex custom backgrounds on an element.

+ +

For example:

+ +
aside {
+  background-image: paint(myPaintedImage);
+}
+ +

The API defines {{domxref('PaintWorklet')}}, a {{domxref('worklet')}} that can be used to programmatically generate an image that responds to computed style changes. To find out more about how this is used, consult Using the CSS Painting API.

+ +

Interfaces

+ +
+
{{domxref('PaintWorklet')}}
+
Programmatically generates an image where a CSS property expects a file. Access this interface through CSS.paintWorklet.
+
{{domxref('PaintWorkletGlobalScope')}}
+
The global execution context of the paintWorklet.
+
{{domxref('PaintRenderingContext2D')}}
+
+

Implements a subset of the CanvasRenderingContext2D API. It has an output bitmap that is the size of the object it is rendering to.

+
+
{{domxref('PaintSize')}}
+
Returns the read-only values of the output bitmap's width and height.
+
+ +

Dictionaries

+ +
+
{{domxref('PaintRenderingContext2DSettings')}}
+
A dictionary providing a subset of CanvasRenderingContext2D settings.
+
+ +

Examples

+ +

To draw directly into an element's background using JavaScript in our CSS, we define a paint worklet using the registerPaint() function, tell the document to include the worklet using the paintWorklet addModule() method, then include the image we created using the CSS paint()  function.

+ +

We create our PaintWorklet called 'hollowHighlights' using the registerPaint() function:

+ +
registerPaint('hollowHighlights', class {
+
+  static get inputProperties() { return ['--boxColor']; }
+
+  static get inputArguments() { return ['*','<length>']; }
+
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props, args) {
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const blockHeight = size.height * 0.85;
+
+		const theColor = props.get( '--boxColor' );
+		const strokeType = args[0].toString();
+		const strokeWidth = parseInt(args[1]);
+
+		console.log(theColor);
+
+		if ( strokeWidth ) {
+			ctx.lineWidth = strokeWidth;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+
+		if ( strokeType === 'stroke' ) {
+			ctx.fillStyle = 'transparent';
+			ctx.strokeStyle = theColor;
+		} else if ( strokeType === 'filled' ) {
+			ctx.fillStyle = theColor;
+			ctx.strokeStyle = theColor;
+		} else {
+			ctx.fillStyle = 'none';
+			ctx.strokeStyle = 'none';
+		}
+
+
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + blockHeight, blockHeight );
+		ctx.lineTo( x, blockHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+
+		for (let i = 0; i < 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( blockWidth + (start * 10) + 10, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10, y);
+			ctx.closePath();
+			ctx.fill();
+			ctx.stroke();
+		}
+  }
+});
+ +
+

We then include the paintWorklet:

+ + + +
  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
+
+ +

Then we can use the {{cssxref('<image>')}} with the CSS {{cssxref('paint()')}} function:

+ +
li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}
+
+

We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.

+ +

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

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Painting API')}}{{Spec2('CSS Painting API')}}Initial definition.
+ +

Browser compatibility

+ +

See the browser compatibility data for each CSS Painting API Interfaces.

+ +

See Also

+ + diff --git a/files/de/web/api/cssmediarule/index.html b/files/de/web/api/cssmediarule/index.html new file mode 100644 index 0000000000..cf00ea0100 --- /dev/null +++ b/files/de/web/api/cssmediarule/index.html @@ -0,0 +1,120 @@ +--- +title: CSSMediaRule +slug: Web/API/CSSMediaRule +tags: + - API + - CSSOM + - Referenz + - Schnittstelle +translation_of: Web/API/CSSMediaRule +--- +

{{ APIRef("CSSOM") }}

+ +

Die CSSMediaRule ist eine Schnittstelle, die eine einzelne CSS-Regel darstellt. Sie implementiert die {{domxref("CSSConditionRule")}}-Schnittstelle und somit auch die {{domxref("CSSGroupingRule")}}- sowie die {{domxref("CSSRule")}}-Schnittstelle mit einem Typwert von 4 (CSSRule.MEDIA_RULE).

+ +

Syntax

+ +

Die Syntax wird mittels der WebIDL definiert.

+ +
interface CSSMediaRule : CSSConditionRule {
+    readonly attribute MediaList media;
+}
+
+ +

Eigenschaften

+ +

Als eine {{ domxref("CSSConditionRule") }}, und somit der {{domxref("CSSGroupingRule")}} und {{ domxref("CSSRule") }}, implementiert die CSSMediaRule auch gleichzeitig die Eigenschaften dieser Schnittstellen. Darüber hinaus hat sie die folgende spezielle Eigenschaft:

+ +
+
{{domxref("CSSMediaRule.media")}} {{readonlyinline()}}
+
Definiert {{domxref("MediaList")}}, welches das zugedachte Zielmedium für die Style-Informationen wiedergibt.
+
+ +

Methoden

+ +

Wie eine {{ domxref("CSSConditionRule") }} und daher eine {{domxref("CSSGroupingRule")}} als auch eine {{ domxref("CSSRule") }}, implementiert CSSMediaRule auch die Methoden dieser Schnittstelle. Sie selbst hat keine speziellen Methoden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}{{ Spec2('CSS3 Conditional')}}Als Ableitung von  {{domxref("CSSConditionRule")}}.
{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}{{ Spec2('CSSOM') }}Keine Abweichungen von  {{SpecName('DOM2 Style')}}
{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}{{ Spec2('DOM2 Style') }} 
+ +

Browser Kompatibilität 

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{ CompatChrome(45.0) }}{{ CompatVersionUnknown }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{ CompatUnknown() }}{{ CompatChrome(45.0) }}{{ CompatGeckoMobile("17") }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatChrome(45.0) }}
+
+ +

[1] Das Setzen des Werts von conditionText in Gecko ist nur ab Firefox 20 möglich.

diff --git a/files/de/web/api/csspagerule/index.html b/files/de/web/api/csspagerule/index.html new file mode 100644 index 0000000000..c6a30fc95e --- /dev/null +++ b/files/de/web/api/csspagerule/index.html @@ -0,0 +1,129 @@ +--- +title: CSSPageRule +slug: Web/API/CSSPageRule +tags: + - API + - CSSOM + - Referenz +translation_of: Web/API/CSSPageRule +--- +

{{ APIRef("CSSOM") }}

+ +

Übersicht

+ +

CSSPageRule ist eine Schnittstelle, die eine einzelne CSS {{cssxref("@page")}} Regel repräsentiert. Sie implementiert die {{domxref("CSSRule")}} Schnittstelle mit dem Typwert 6 (CSSRule.PAGE_RULE).

+ +

Syntax

+ +

Die Syntax wird im WebIDL Format beschrieben.

+ +
interface CSSPageRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};
+
+ +

Eigenschaften

+ +

Als eine {{ domxref("CSSRule") }} implementiert CSSPageRule auch die Eigenschaften dieser Schnittstelle. Sie hat die folgenden speziellen Eigenschaften:

+ +
+
{{domxref("CSSPageRule.selectorText")}}
+
Repräsentiert den Text eines zur At-Regel gehörenden Seitenselektors.
+
{{domxref("CSSPageRule.style")}} {{readonlyinline()}}
+
Gibt den zur At-Regel gehörenden Deklarationsblock zurück.
+
+ +

Methoden

+ +

Als eine {{ domxref("CSSRule") }} implementiert CSSPageRule auch die Methoden dieser Schnittstelle. Sie hat keine speziellen Methoden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSSOM', '#the-csspagerule-interface', 'CSSPageRule') }}{{ Spec2('CSSOM') }}Keine Änderungen bezüglich {{SpecName('DOM2 Style')}}
{{SpecName('DOM2 Style', 'css.html#CSS-CSSPageRule', 'CSSPageRule') }}{{ Spec2('DOM2 Style') }} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("19") }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
selectorText{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{ CompatUnknown() }}{{ CompatGeckoMobile("19") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
selectorText{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/de/web/api/cssrule/csstext/index.html b/files/de/web/api/cssrule/csstext/index.html new file mode 100644 index 0000000000..789cd7519a --- /dev/null +++ b/files/de/web/api/cssrule/csstext/index.html @@ -0,0 +1,31 @@ +--- +title: CSSRule.cssText +slug: Web/API/CSSRule/cssText +tags: + - API + - CSSOM + - Eigenschaft + - Referenz +translation_of: Web/API/CSSRule/cssText +--- +
+ {{ APIRef() }}
+

Übersicht

+

cssText gibt den eigentlichen Text der Styleregel zurück. Um eine Stylesheet Regel dynamisch setzen zu können, siehe Dynamische Stylinginformationen verwenden.

+

Syntax

+
string = cssRule.cssText
+
+

Beispiel

+
<style>
+body { background-color: darkblue; }
+</style>
+<script>
+  var stylesheet = document.styleSheets[0];
+  alert(stylesheet.cssRules[0].cssText); // body { background-color: darkblue; }
+</script>
+
+
+

Spezifikation

+ diff --git a/files/de/web/api/cssrule/index.html b/files/de/web/api/cssrule/index.html new file mode 100644 index 0000000000..eeca8828cf --- /dev/null +++ b/files/de/web/api/cssrule/index.html @@ -0,0 +1,258 @@ +--- +title: CSSRule +slug: Web/API/CSSRule +tags: + - CSSOM +translation_of: Web/API/CSSRule +--- +
{{APIRef("CSSOM")}}
+ +

An object implementing the CSSRule DOM interface represents a single CSS at-rule. References to a CSSRule-implementing object may be obtained by looking at a CSS style sheet's {{domxref("CSSStyleSheet","cssRules")}} list.

+ +

There are several kinds of rules. The CSSRule interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types.

+ +

Syntax

+ +

The syntax is described using the WebIDL format.

+ +
interface CSSRule {
+    const unsigned short STYLE_RULE = 1;
+    const unsigned short CHARSET_RULE = 2;
+    const unsigned short IMPORT_RULE = 3;
+    const unsigned short MEDIA_RULE = 4;
+    const unsigned short FONT_FACE_RULE = 5;
+    const unsigned short PAGE_RULE = 6;
+    const unsigned short KEYFRAMES_RULE = 7;
+    const unsigned short KEYFRAME_RULE = 8;
+    const unsigned short NAMESPACE_RULE = 10;
+    const unsigned short COUNTER_STYLE_RULE = 11;
+    const unsigned short SUPPORTS_RULE = 12;
+    const unsigned short DOCUMENT_RULE = 13;
+    const unsigned short FONT_FEATURE_VALUES_RULE = 14;
+    const unsigned short VIEWPORT_RULE = 15;
+    const unsigned short REGION_STYLE_RULE = 16;
+    readonly attribute unsigned short type;
+    attribute DOMString cssText;
+    readonly attribute CSSRule? parentRule;
+    readonly attribute CSSStyleSheet? parentStyleSheet;
+};
+ +

Properties common to all CSSRule instances

+ +
+
{{domxref("CSSRule.cssText")}}
+
Represents the textual representation of the rule, e.g. "h1,h2 { font-size: 16pt }"
+
{{domxref("CSSRule.parentRule")}} {{readonlyinline}}
+
Returns the containing rule, otherwise null. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.
+
{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}
+
Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule
+
{{domxref("CSSRule.type")}} {{readonlyinline}}
+
One of the {{anch("Type constants")}} indicating the type of CSS rule.
+
+ +

Constants

+ +

Type constants

+ +

The CSSRule interface specifies integer constants that can be used in conjunction with a CSSRule's {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeValueRule-specific interface
CSSRule.STYLE_RULE1{{domxref("CSSStyleRule")}}
CSSRule.MEDIA_RULE4{{domxref("CSSMediaRule")}}
CSSRule.FONT_FACE_RULE5{{domxref("CSSFontFaceRule")}}
CSSRule.PAGE_RULE6{{domxref("CSSPageRule")}}
CSSRule.IMPORT_RULE3{{domxref("CSSImportRule")}} : IDL: nsIDOMCSSImportRule
CSSRule.CHARSET_RULE2{{domxref("CSSCharsetRule")}} {{obsolete_inline}}
CSSRule.UNKNOWN_RULE0{{domxref("CSSUnknownRule")}}{{obsolete_inline}}
CSSRule.KEYFRAMES_RULE7{{domxref("CSSKeyframesRule")}} [1] {{experimental_inline}}
CSSRule.KEYFRAME_RULE8{{domxref("CSSKeyframeRule")}} [1] {{experimental_inline}}
Reserved for future use9Should be used to define color profiles in the future
CSSRule.NAMESPACE_RULE10{{domxref("CSSNamespaceRule")}} {{experimental_inline}}
CSSRule.COUNTER_STYLE_RULE11{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}
CSSRule.SUPPORTS_RULE12{{domxref("CSSSupportsRule")}}
CSSRule.DOCUMENT_RULE13{{domxref("CSSDocumentRule")}} {{experimental_inline}}
CSSRule.FONT_FEATURE_VALUES_RULE14{{domxref("CSSFontFeatureValuesRule")}}
CSSRule.VIEWPORT_RULE15{{domxref("CSSViewportRule")}} {{experimental_inline}}
CSSRule.REGION_STYLE_RULE16{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}
+ +

An up-to-date informal list of constants can be found on the CSSWG Wiki.

+ +

[1] On Gecko, before Firefox 19, the keyframe-related constants existed only in their prefixed version: CSSRule.MOZ_KEYFRAMES_RULE and CSSRule.MOZ_KEYFRAME_RULE. From Firefox 20 onwards, both versions are available. The prefixed version will be removed in the future.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}{{Spec2('CSSOM')}}Obsoleted values CHARSET_RULE and UNKNOWN_RULE. Added value NAMESPACE_RULE.
{{SpecName("CSS3 Animations",'#cssrule', 'CSSRule')}}{{Spec2('CSS3 Animations')}}Added values KEYFRAMES_RULE and KEYFRAME_RULE.
{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}{{Spec2('CSS3 Fonts')}}Added value FONT_FEATURE_VALUES_RULE.
{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}{{Spec2("CSS3 Counter Styles")}}Added value COUNTER_STYLE_RULE.
{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}{{Spec2('CSS3 Conditional')}}Added value SUPPORTS_RULE. (DOCUMENT_RULE has been pushed to CSS Conditional Rules Level 4)
{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}{{Spec2('DOM2 Style')}}Initial definition.
+ +

Browser compatibility

+ +

To get browser compatibility information about the different type constant value, please consult the compatibility table of the associated interface.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/customelementregistry/define/index.html b/files/de/web/api/customelementregistry/define/index.html new file mode 100644 index 0000000000..b51ed46c37 --- /dev/null +++ b/files/de/web/api/customelementregistry/define/index.html @@ -0,0 +1,241 @@ +--- +title: CustomElementRegistry.define() +slug: Web/API/CustomElementRegistry/define +tags: + - API + - CustomElementRegistry + - Method + - Reference + - Web Components + - Webkomponente + - benutzerdefiniert + - custom elements + - define +translation_of: Web/API/CustomElementRegistry/define +--- +

{{APIRef("CustomElementRegistry")}}

+ +

Die define() Methode der {{domxref("CustomElementRegistry")}} Schnittstelle beschreibt ein neues benutzerdefiniertes Element.

+ +

Es gibt zwei Arten von benutzerdefinierten Elementen, die erstellt werden können:

+ + + +

Syntax

+ +
customElements.define(name, constructor, options);
+
+ +

Parameter

+ +
+
name
+
Name des neuen benutzerdefinierten Elements. Beachte, dass Namen von benutzerdefinierten Elementen einen Bindestrich enthalten müssen.
+
constructor
+
Konstruktor für das neue, benutzerdefinierte Element.
+
options {{optional_inline}}
+
Objekt, das steuert, wie das Element definiert ist. Eine Option wird derzeit unterstützt: +
    +
  • extends: String des Namens eines integrierten Elements das erweitert werden soll. Wird verwendet um ein angepasstes integriertes Element  zu erzeugen.
    • +
+
+
+ +

Return value

+ +

Void.

+ +

Ausnahmebehandlung

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
NotSupportedError +

Das {{domxref("CustomElementRegistry")}} enthält bereits einen Eintrag mit dem gleichen Namen oder dem gleichen Konstruktor (oder ist auf andere Weise bereits definiert), oder extends ist angegeben und es ist ein gültiger benutzerdefinierter Elementname oder extends ist angegeben, aber das Element, das es zu erweitern versucht, ist ein unbekanntes Element.

+
SyntaxErrorDer angegebene Name ist kein gültiger benutzerdefinierter Elementname.
TypeErrorDer referenzierte Konstruktor ist kein Konstruktor.
+ +
+

Hinweis: Du wirst oftmals  NotSupportedErrors geworfen bekommen, die so erscheinen als würde define() fehlschlagen, aber stattdessen wahrscheinlich ein Problem mit {domxref("Element.attachShadow()")}} sind.

+
+ +

Beispiele

+ +

Autonomes benutzerdefiniertes Element

+ +

Der folgende Code entstammt dem popup-info-box-web-component Beispiel (siehe Live).

+ +
// Create a class for the element
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create spans
+    var wrapper = document.createElement('span');
+    wrapper.setAttribute('class','wrapper');
+    var icon = document.createElement('span');
+    icon.setAttribute('class','icon');
+    icon.setAttribute('tabindex', 0);
+    var info = document.createElement('span');
+    info.setAttribute('class','info');
+
+    // Take attribute content and put it inside the info span
+    var text = this.getAttribute('text');
+    info.textContent = text;
+
+    // Insert icon
+    var imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+    var img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Create some CSS to apply to the shadow dom
+    var style = document.createElement('style');
+
+    style.textContent = '.wrapper {' +
+                           'position: relative;' +
+                        '}' +
+
+                         '.info {' +
+                            'font-size: 0.8rem;' +
+                            'width: 200px;' +
+                            'display: inline-block;' +
+                            'border: 1px solid black;' +
+                            'padding: 10px;' +
+                            'background: white;' +
+                            'border-radius: 10px;' +
+                            'opacity: 0;' +
+                            'transition: 0.6s all;' +
+                            'position: absolute;' +
+                            'bottom: 20px;' +
+                            'left: 10px;' +
+                            'z-index: 3;' +
+                          '}' +
+
+                          'img {' +
+                            'width: 1.2rem' +
+                          '}' +
+
+                          '.icon:hover + .info, .icon:focus + .info {' +
+                            'opacity: 1;' +
+                          '}';
+
+    // attach the created elements to the shadow dom
+
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Define the new element
+customElements.define('popup-info', PopUpInfo);
+
+ +
<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card.">
+ +
+

Hinweis: Konstruktoren für autonome benutzerdefinierte Elemente müssen {{domxref("HTMLElement")}} extenden.

+
+ +

Benutzerdefiniertes integriertes Element

+ +

Der folgende Code entstammt dem word-count-web-component Beispiel (siehe Live).

+ +
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.CustomElementRegistry.define")}}

+
diff --git a/files/de/web/api/customelementregistry/index.html b/files/de/web/api/customelementregistry/index.html new file mode 100644 index 0000000000..db8bc5b464 --- /dev/null +++ b/files/de/web/api/customelementregistry/index.html @@ -0,0 +1,106 @@ +--- +title: CustomElementRegistry +slug: Web/API/CustomElementRegistry +tags: + - API + - CustomElementRegistry + - Experimental + - Interface + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web Components + - custom elements +translation_of: Web/API/CustomElementRegistry +--- +

{{DefaultAPISidebar("Web Components")}}

+ +

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the {{domxref("window.customElements")}} property. 

+ +

Methods

+ +
+
{{domxref("CustomElementRegistry.define()")}}
+
Defines a new custom element.
+
{{domxref("CustomElementRegistry.get()")}}
+
Returns the constuctor for the named custom element, or undefined if the custom element is not defined.
+
{{domxref("CustomElementRegistry.upgrade()")}}
+
Upgrades a custom element directly, even before it is connected to its shadow root.
+
{{domxref("CustomElementRegistry.whenDefined()")}}
+
Returns an empty {{jsxref("Promise", "promise")}} that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.
+
+ +

Examples

+ +

The following code is taken from our word-count-web-component example (see it live also). Note how we use the {{domxref("CustomElementRegistry.define()")}} method to define the custom element after creating its class.

+ +
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
+

Note: The CustomElementRegistry is available through the {{domxref("Window.customElements")}} property.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("api.CustomElementRegistry")}}

+ +

 

diff --git a/files/de/web/api/dedicatedworkerglobalscope/index.html b/files/de/web/api/dedicatedworkerglobalscope/index.html new file mode 100644 index 0000000000..2aaef1f2e7 --- /dev/null +++ b/files/de/web/api/dedicatedworkerglobalscope/index.html @@ -0,0 +1,114 @@ +--- +title: DedicatedWorkerGlobalScope +slug: Web/API/DedicatedWorkerGlobalScope +translation_of: Web/API/DedicatedWorkerGlobalScope +--- +

{{APIRef("Web Workers API")}}

+ +

Auf das DedicatedWorkerGlobalScope Objekt (Der globale Scope des {{domxref("Worker")}}) kann durch das Schlüsselwort {{domxref("window.self","self")}} zugegriffen werden. Einzelne weitere globale Funktionen, namespace Objekte und Konstruktoren, die nicht typischerweise mit dem Scope des Workers in Verbindung stehen, jedoch darauf verfügbar sind, können in der JavaScript Reference gefunden werden. Siehe auch: Functions available to workers.

+ +

Eigenschaften

+ +

Dieses Interface erbt seine Eigenschaften aus dem Interface {{domxref("WorkerGlobalScope")}} und seinem übergeordneten Interface {{domxref("EventTarget")}}. Deshalbt implementiert es die Eigenschaften {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}
+
Der dem {{domxref("Worker")}} (optional) gegebene Name, als er im Konstruktor {{domxref("Worker.Worker", "Worker()")}} erzeugt wurde. Hauptsächlich nützlich für Debuggin.
+
+ +

Von WorkerGlobal Scope geerbte Eigenschaften

+ +
+
{{domxref("WorkerGlobalScope.self")}}
+
Gibt eine Objektreferenz auf das DedicatedWorkerGlobalScope Objekt selbst zurück.
+
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
+
Gibt das mit dem Worker verbundene {{domxref("Console")}} Objekt zurück.
+
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+
Gibt das mit dem Worker verbundene {{domxref("WorkerLocation")}} Objekt zurück. Bei WorkerLocation handelt es sich um ein spezifisches location Objekt, welches aus Teilen des {{domxref("Location")}} Objekts des Browserscope besteht,  jedoch für den Worker angepasst wurde.
+
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+
Git das mit dem Worker verbundene {{domxref("WorkerNavigator")}} Objekt  zurück. Bei WorkerNavigator handelt es sich um ein spezifisches navigations Objekt, welches aus Teilen des {{domxref("Navigator")}} Objekts des Browserscope besteht, jedoch für den Worker angepasst wurde.
+
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Git das mit dem Worker verbunde {{domxref("Performance")}} Objekt zurück. Dabei handelt es sich um ein reguläres performance Objekt,  welches jedoch nur teile der Eigenschaften und Methoden umfasst.
+
+ +

Eventhandler

+ +

Dieses Interface erbt seine Eventhandler  aus dem Interface {domxref("WorkerGlobalScope")}} und seinen übergeordneten Interface {{domxref("EventTarget")}}. Deshalb sind Eventhandler {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}} implementiert.

+ +
+
{{domxref("DedicatedWorkerGlobalScope.onmessage")}}
+
Der entsprechende Code eines {{domxref("EventHandler")}} der beim Aufruf des Events {{event("message")}} aufgerufen wird. Diese Events sind vom Typ {{domxref("MessageEvent")}} und werden aufgerufen, wenn der Worker eine Nachricht aus dem Dokument erhält, welcher Ihn gestartet hat (Beispiel: {{domxref("Worker.postMessage")}} Methode.) 
+
{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}
+
Der entsprechende Code eines {{domxref("EventHandler")}} der beim Aufruf des Events {{event("messageerror")}} aufgerufen wird.
+
+ +

Methoden

+ +

Dieses Interface erbt seine Methoden aus dem Interface {{domxref("WorkerGlobalScope")}} und seinen übergordneten Interface {{domxref("EventTarget")}}. Dementsprechend implementiert es Methoden von {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("DedicatedWorkerGlobalScope.close()")}}
+
Verwirft alle im WorkerGlobalScope's Eventloop eingereihten Aufgaben und schließt den entsprechenden Scope.
+
{{domxref("DedicatedWorkerGlobalScope.postMessage()")}}
+
Sendet eine Nachricht — welche aus Javascript Objecten vom Typ any bestehen — zum übergeordneten Dokument, welches den Worker gestartet hat.
+
+ +

Geerbt vom WorkerGlobalScope

+ +
+
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+
Gibt eine Nachricht in der Konsole aus.
+
{{domxref("WorkerGlobalScope.importScripts()")}}
+
Importiert ein oder mehrere Skripte in den Worker Scope. Es ist möglich beliebig viele, durch Kommas getrennt, zu spezifizieren. Beispiel: importScripts('foo.js', 'bar.js');
+
+ +

Aus verschiedenen Orten implementiert

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Dekodiert einen String von Daten welcher mit base-64 codiert wurde.
+
{{domxref("WindowBase64.btoa()")}}
+
Erzeugt einen base-64 codierten ASCII String aus einem String von Binärdaten.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Bricht die wiederholte Ausführung mit {{domxref("WindowTimers.setInterval()")}} ab.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Bricht die wiederholte Ausführung mit {{domxref("WindowTimers.setTimeout()")}} ab.
+
{{domxref("WindowTimers.setInterval()")}}
+
Plant die Ausführung einer Funktion alle X Millisekunden
+
{{domxref("WindowTimers.setTimeout()")}}
+
Setzt eine X Millisekunden Verzögerung für die Ausführung einer Funktion
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Kompatibilität

+ +
+ + +

{{Compat("api.DedicatedWorkerGlobalScope")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html b/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html new file mode 100644 index 0000000000..8e457d414a --- /dev/null +++ b/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html @@ -0,0 +1,83 @@ +--- +title: 'DedicatedWorkerGlobalScope: message event' +slug: Web/API/DedicatedWorkerGlobalScope/message_event +translation_of: Web/API/DedicatedWorkerGlobalScope/message_event +--- +
{{APIRef}}
+ +

Das messageEreignis wird auf ein DedicatedWorkerGlobalScopeObjekt ausgelöst, wenn der Worker eine Nachricht von seinem übergeordneten Objekt empfängt (dh wenn der übergeordnete Benutzer eine Nachricht sendet mit Worker.postMessage()).

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler propertyonmessage
+ +

Examples

+ +

Dieser Code erstellt einen neuen Worker und sendet ihm eine Nachricht mit Worker.postMessage():

+ +
const worker = new Worker("static/scripts/worker.js");
+
+worker.addEventListener('message', (event) => {
+    console.log(`Received message from worker: ${event.data}`)
+});
+ +

Der Worker kann auf diese Nachricht warten, indem er addEventListener() verwendet:

+ +
// inside static/scripts/worker.js
+
+self.addEventListener('message', (event) => {
+    console.log(`Received message from parent: ${event.data}`);
+});
+ +

Alternativ könnte er es mit der onmessage Event-Handler-Eigenschaft abhören:

+ +
// static/scripts/worker.js
+
+self.onmessage = (event) => {
+    console.log(`Received message from parent: ${event.data}`);
+};
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.DedicatedWorkerGlobalScope.message_event")}}

+ +

See also

+ + diff --git a/files/de/web/api/document/adoptnode/index.html b/files/de/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..c996e689c5 --- /dev/null +++ b/files/de/web/api/document/adoptnode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden.

+ +

Unterstützt seit Gecko 1.9 (Firefox 3)

+ +

Syntax

+ +
knoten = document.adoptNode(externerKnoten);
+
+ +
+
   knoten
+
Ist der übertragene Knoten, welcher nun dieses Dokument als sein ownerDocument hat.  Der Elternknoten (parentNode) is null, da er noch nicht in den Dokumentenbaum eingefügt wurde. Zu beachten ist, dass knoten und externerKnoten nach dem Funktionsaufruf das gleiche Objekt sind.  
+
externerKnoten
+
Ist der Knoten eines anderes Dokumentes, der übertragen werden soll.
+
+ +

Beispiel

+ +

{{todo}}

+ +

Anmerkungen

+ +

Es kann oassieren, dass der Aufruf von adoptNode fehlschlägt, wenn der Ursprungsknoten von einer anderen Implementierung kommt, was aber bei Browser-Implementierungen kein Problem darstellen sollte.

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/alinkcolor/index.html b/files/de/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..0c656de5cc --- /dev/null +++ b/files/de/web/api/document/alinkcolor/index.html @@ -0,0 +1,30 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

Gibt das Farbattribut eines aktiven Links im Dokumenten body wieder oder setzt es. Ein Link wird in der Zeit eines mousedown und mouseup Events als "aktiv" bezeichnet .

+ +

Syntax

+ +
color = document.alinkColor
+document.alinkColor =color
+
+ +

color ist ein String der den Namen der Farbe (z.B., "blue", "darkblue", etc.) oder  den Hexadezimalwert der Farbe(z.B., #0000FF) enthält. Die Farben samt zugehöriger Hexadezimalcodes können zum Teil hier oder auf ähnlichen Seiten eingesehen werden: https://html-color-codes.info/

+ +

Anmerkungen

+ +

Der Default Wert dieser Eigenschaft in Mozilla Firefox ist rot (#ee0000 in hexadezimal).

+ +

document.alinkColor ist laut DOM Level 2 HTML veraltet. Eine Alternative wäre der CSS Selektor {{ Cssxref(":active") }}.

+ +

Eine weitere Alternative ist document.body.aLink, obwohl diese laut HTML 4.01 ebenfalls veraltet ist und der CSS Selektor präferiert wird.

+ +

Gecko unterstützt sowohl alinkColor/:active als auch{{ Cssxref(":focus") }}. Der Internet Explorer 6 und 7 unterstützen lediglich alinkColor/:active für HTML anchor (<a>) links und verhält sich ähnlich wie :focus bei Gecko. :focus wird im IE nicht unterstützt.

+ +

Browser compatibility

+ +

{{Compat("api.Document.alinkColor")}}

diff --git a/files/de/web/api/document/body/index.html b/files/de/web/api/document/body/index.html new file mode 100644 index 0000000000..cc546cb0ae --- /dev/null +++ b/files/de/web/api/document/body/index.html @@ -0,0 +1,140 @@ +--- +title: Document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

Gibt den {{HTMLElement("body")}} oder {{HTMLElement("frameset")}} Knoten des aktuellen Dokuments wieder, oder null falls keines dieser Elemente existiert.

+ +

Syntax

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Beispiel

+ +
// in HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

Anmerkungen

+ +

document.body ist das Element, welches den Inhalt eines Dokuments enthält. In Dokumenten mit <body> Inhalt, gibt das <body> Element den Inhalt aus, in Frameset Dokumenten wiederum, wird das äußerste <frameset> Element ausgegeben.

+ +

Da body setzbar ist, wird das Setzen eines neuen Body Elements alle aktuellen Elemente des existierenden <body> Elements entfernen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Initiale Definition.
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}269.6 (möglicherweise früher)4 (möglicherweise früher)
+
+ +
+

 

+ +
+
    +
  1. +

    Obwohl document.body eine sehr gute Methode ist, um das <body> Element in HTML anzusprechen, wird es von Firefox nicht unterstützt, wenn der Content-Type nicht text/html oder application/xhtml+xml ist. Eine sicherere Methode um das <body> Element anzusprechen ist es, document.getElementsByTagName("body") zu verwenden, welches einen Array mit einem einzigen Item ausgibt. Das ist übertragbar auf HTML und XHTML. Bei denen ist der Content-Type nicht im HTTP response header angegeben.

    +
    2. +
+
+ +

 

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5 (probably earlier)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/createattribute/index.html b/files/de/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..009c6c898d --- /dev/null +++ b/files/de/web/api/document/createattribute/index.html @@ -0,0 +1,76 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

createAttribute erstellt einen neuen Attributsknoten und gibt ihn zurück.

+ +

Syntax

+ +
attribute = document.createAttribute(name)
+
+ +

Parameter

+ + + +

Beispiel

+ +
<html>
+
+<head>
+<title> create/set/get Attribut Beispiel</title>
+
+<script type="text/javascript">
+
+function doAttrib() {
+  var node = document.getElementById("div1");
+  var a = document.createAttribute("my_attrib");
+  a.value = "newVal";
+  node.setAttributeNode(a);
+  alert(node.getAttribute("my_attrib")); // "newVal"
+}
+
+// Alternative form ohne die Verwendung von createAttribute
+//function doAttrib() {
+//  var node = document.getElementById("div1");
+//  node.setAttribute("my_attrib", "newVal");
+//  alert(node.getAttribute("my_attrib")); // "newVal"
+//}
+
+</script>
+</head>
+
+<body onload="doAttrib();">
+<div id="div1">
+<p>Some content here</p>
+</div>
+</body>
+</html>
+
+ +

Bemerkungen

+ +

Der Rückgabewert ist ein Knoten des Typs attribute. Sobald man diesen wie im vorangegangenen Beispiel hat, kann man ihren Wert festlegen, indem man der nodeValue property einen String zuweist, oder in der alternativen Form durch Benutzung der setAttribute() Methode. Der DOM beschränkt auf diese Art nicht, welche Arten von Attributen an das jeweilige Element zugewiesen werden dürfen.

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/createdocumentfragment/index.html b/files/de/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e7ba848e49 --- /dev/null +++ b/files/de/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - DocumentFragment + - Method + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ApiRef("DOM")}}
+ +

Erzeugt ein neues {{domxref("DocumentFragment")}} Objekt.

+ +

Syntax

+ +
var fragment = document.createDocumentFragment();
+
+ +

fragment ist hierbei eine Referenz zu einem neu erstellten, leeren {{domxref("DocumentFragment")}} Objekt.

+ +

Beschreibung

+ +

DocumentFragments sind DOM Knoten (DOM Nodes). Sie sind nicht Teil des Haupt- oder Seiten-DOM-Baums. Üblicherweise werden sie verwendet, um einen Teilbaum mit Objekten und Unterobjekten zu erstellen und das Ergebnis anschließend in den Seiten-DOM-Baum einzufügen. In dem DOM-Baum wird das document fragment dann ersetzt mit allen Kindelementen.

+ +

Da das gesamte DocumentFragment nur im Speicher vorliegt ("in memory") und nicht Teil des Seiten-DOM-Baums ist, führen Veränderungen in dem DocumentFragment, wie etwa das Hinzufügen von Elementen, nicht zu einem page reflow (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer besseren Performance.

+ +

Beispiel

+ +

Dieses Beispiel erzeugt eine Liste gängiger Browser.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusAnmerkungen
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Initiale Definition in der DOM 1 Spezifikation
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html new file mode 100644 index 0000000000..8b053c1379 --- /dev/null +++ b/files/de/web/api/document/createelement/index.html @@ -0,0 +1,153 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Méthode +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ + + +

In einem HTML Dokument erstellt die Document.createElement() Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.

+ +

Syntax

+ +
var element = document.createElement(tagName, [optionen]);
+
+ +

Parameter

+ +
+
tagName
+
Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von tagName initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.
+
optionen {{optional_inline}}
+
Ein optionales ElementCreationOptions-Objekt, welches eine einzige Eigenschaft namens is besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit customElements.define() definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.
+
+ +

Rückgabewert

+ +

Das neue Element.

+ +

Beispiele

+ +

Grundlegendes Beispiel

+ +

Dies erstellt ein neues <div> und fügt es vor dem Element mit der ID div1 ein.

+ +
+

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Arbeiten mit Elementen||</title>
+</head>
+<body>
+  <div id="div1">Der obere Text wurde dynamisch erstellt.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // erstelle ein neues div Element
+  // und gib ihm etwas Inhalt
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hi there and greetings!");
+  newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu.
+
+  // füge das neu erstellte Element und seinen Inhalt ins DOM ein
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Web-Komponentenbeispiel 

+ +

Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die {{domxref("HTMLUListElement")}}, welche das {{htmlelement("ul")}}  Element repräsentiert. 

+ +
// Erstelle eine Klasse für das Element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Rufe immer super() in einem Konstruktor auf.
+    super();
+
+    // Konstruktordefinition wurde der kürze halber weggelassen
+    ...
+  }
+}
+
+// Definiere das neue Element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: 

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Dem neuen Element wird ein is Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. 

+ +
+

Notiz: Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist. 

+
+ +

Notizen

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ + + +

Browser-Kompatibiltät

+ +

{{Compat("api.Document.createElement")}}

+ +

Siehe auch

+ + + + diff --git a/files/de/web/api/document/createelementns/index.html b/files/de/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..3f310fdb49 --- /dev/null +++ b/files/de/web/api/document/createelementns/index.html @@ -0,0 +1,175 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +
{{ApiRef("DOM")}}
+ +
Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.
+ +
 
+ +
Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode createElement.
+ +

Syntax

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

Parameter

+ +
+
namespaceURI
+
Ein String, der die mit dem Element verknüpfte Namespace-URL angibt. Die Eigenschaft namespaceURI des neu erstellten Elements wird mit dem Wert von namespaceURI initialisiert (siehe Gültige Namespace-URLs).
+
qualifiedName
+
Ein String, der den Namen des Elements angibt. Die Eigenschaft nodeName des neu erstellten Elements wird mit dem Wert von qualifiedName initialisiert.
+
optionsOptional
+
Das optionale Objekt ElementCreationOptions enthält eine einzelne Eigenschaft mit Namen  is, dessen Wert der Tag-Name eines zuvor mit customElements.define() definierten angepassten Elements ist. Aus Gründen der Abwärtskompatibilität erlauben einige Browser hier auch die Übergabe eines Strings mit dem Taf-Namen (s. Custom Elements specification). Siehe Extending native HTML elements für weitere Informationen zur Verwendung dieses Parameters.
+
Das neue Element erhält ein Attribut mit Namen is dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.
+
+ +

Rückgabewert

+ +

Das neu erstelle Element.

+ +

Gültige Namespace-URLs

+ + + +

Beispiel

+ +

Dies erstellt ein neues Element vom Typ <div> im XHTML-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles XUL-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()">
+
+<script type="text/javascript"><![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
+   The script on this page will add dynamic content below:
+  </html:div>
+ </vbox>
+
+</page>
+
+ +
+

Das obige Beispiel verwendet ein Inline-Skript, was für XHTML-Dokumente nicht empfohlen wird. Dieses Beispiel ist eigentlich ein XUL-Dokument mit eingebettetem XHTML. Nichts desto trotz bleibt die Empfehlung bestehen.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezigikationStatusKpmmentar
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
options argument{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In vorangegangenen Versionen dieser Spezifikation war dieses Argument ein einfacher String, dessen Wert der Tag-Name eines angepassten Elements ist. Aus Gründen der Abwärtskompatibilität akzeptiert Chrome hier beide Formate

+ +

[2] Siehe [1] oben: Wie Chrome, akzeptiert hier auch Firefox einen String anstelle eines Objekts. Allerdings erst ab Version 51 aufwärts. In Version 50 muss  options ein Objekt sein.

+ +

[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen  dom.webcomponents.enabled und dom.webcomponents.customelements.enabled auf true gesetzt werden.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/createtextnode/index.html b/files/de/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..53fae2cc1c --- /dev/null +++ b/files/de/web/api/document/createtextnode/index.html @@ -0,0 +1,131 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthode + - Referenz + - Textknoten + - Textnode +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

Erzeugt einen Textknoten.

+ +

Syntax

+ +
var text = document.createTextNode(data);
+
+ + + +

Example

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('JA! ');">JA!</button>
+  <button onclick="addTextNode('NEIN! ');">NEIN!</button>
+  <button onclick="addTextNode('WIR SCHAFFEN DAS! ');">WIR SCHAFFEN DAS!</button>
+
+  <hr />
+
+  <p id="p1">Erste Zeile des Absatzes.</p>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}Keine Änderung
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/de/web/api/document/createtreewalker/index.html b/files/de/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..61e526b92c --- /dev/null +++ b/files/de/web/api/document/createtreewalker/index.html @@ -0,0 +1,241 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - DOM + - DOM-Referenz + - Document + - Dokument + - Méthode +translation_of: Web/API/Document/createTreeWalker +--- +
{{ApiRef("Document")}}
+ +

Die Methode Document.createTreeWalker() erzeugt ein neues {{domxref("TreeWalker")}} Objekt und gibt dieses zurück.

+ +

Syntax

+ +
treeWalker = document.createTreeWalker(wurzel, anzeigeFilter, filter, entityReferenceExpansion);
+
+ +

Parameter

+ +
+
wurzel
+
Ist der Ursprungs- oder Wurzelknoten {{domxref("Node")}} des {{domxref("TreeWalker")}}-Durchlaufens. Normalerweise ist dies ein Element, das zum Dokument gehört.
+ +
anzeigeFilter {{optional_inline}}
+
Optionale unsigned longBitmaske, erstellt durch bitweise ODER-Verknüpfung der Konstanten von NodeFilter. Erlaubt eine bequeme Filterung auf bestimmte Knotentypen. Der Standardwert ist 0xFFFFFFFF, auch repräsentiert durch die SHOW_ALL-Konstante. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Konstantenumerischer WertBeschreibung
NodeFilter.SHOW_ALL-1 (Maximalwert von unsigned long)Zeigt alle Knoten.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Zeigt Attribut-Knoten {{domxref("Attr")}}. Das ist nur sinnvoll, wenn der {{domxref("TreeWalker")}} mit einem {{domxref("Attr")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der Attribut-Knoten an der ersten Position bei der Durchquerung. Da Attribute nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Zeigt {{domxref("CDATASection")}}-Knoten.
NodeFilter.SHOW_COMMENT128Zeigt {{domxref("Comment")}}-Knoten.
NodeFilter.SHOW_DOCUMENT256Zeigt {{domxref("Document")}}-Knoten.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Zeigt {{domxref("DocumentFragment")}}-Knoten.
NodeFilter.SHOW_DOCUMENT_TYPE512Zeigt {{domxref("DocumentType")}}-Knoten.
NodeFilter.SHOW_ELEMENT1Zeigt {{domxref("Element")}}-Knoten.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Zeigt {{domxref("Entity")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Entity")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Entity")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Shows {{domxref("EntityReference")}} nodes.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Zeigt {{domxref("Notation")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Notation")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Notation")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Zeigt {{domxref("ProcessingInstruction")}}-Knoten.
NodeFilter.SHOW_TEXT4Zeigt {{domxref("Text")}}-Knoten.
+
+ +
filter {{optional_inline}}
+
Ein optionaler {{domxref("NodeFilter")}}. Muss ein ein Objekt mit einer Methode namens acceptNode sein, die vom {{domxref("TreeWalker")}} aufgerufen wird. Diese Methode entscheidet, ob ein übergebener Knoten, der schon von anzeigeFilter durchgelassen wurde, ausgegeben wird oder nicht.
+ +
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
Optionaler {{domxref("Boolean")}}-Schalter. Entscheidet, ob der Teilbaum unter einer {{domxref("EntityReference")}} ausgelassen werden soll, wenn das Element ausgelassen wird.
+
+ +

Beispiel

+ +

Das folgende Beispiel läuft über alle Knoten im body, filtert die Menge auf Elementknoten und gibt im filter jeden Knoten als durchlässig an (die Filterung auf die Elementknoten hätte auch in der acceptNode()-Methode erfolgen können). +Mithilfe des treeWalker werden alle durchgelassenen Knoten in ein Array gesammelt.

+ +
var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+
+ +

Spezfikationen

+ + + + + + + + + + + + + + + + + + + +
SpezfikationStatusBemerkung
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}expandEntityReferences-Parameter wurde entfernt. whatToShow- und filter-Parameter wurden als optional markiert.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Initiale Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
grundsätzliche Unterstützung1.0{{CompatGeckoDesktop("1.8.1")}}9.09.03.0
whatToShow und filter optional1.0{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences1.0{{CompatGeckoDesktop("1.8.1")}}
+ In {{CompatGeckoDesktop("12")}} entfernt.		9.09.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}9.03.0
whatToShow und filter optional{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}
+ In {{CompatGeckoDesktop("12")}} entfernt		{{CompatVersionUnknown}}9.03.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/dir/index.html b/files/de/web/api/document/dir/index.html new file mode 100644 index 0000000000..532837e9dd --- /dev/null +++ b/files/de/web/api/document/dir/index.html @@ -0,0 +1,95 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}

+ +

Die Document.dir Eigenschaft ist ein {{domxref("DOMString")}}, welcher die direktionaler Bedeutung von einem Text eines Dokuments repräsentiert. Entweder von links nach rechts (Standard) oder rechts nach links. Mögliche Werte sind 'rtl' rechts nach links, und 'ltr', links nach rechts.

+ +

Syntax

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}Initiale Spezifikation
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basis Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basis Unterstützung{{ CompatUnknown() }}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Vor Firefox 23, hat die Document.dir Eigenschaft "ltr" wiedergegeben. unabhängig der Einstellung von dem dir-Attribut im Haupt-Element (root) {{htmlelement("html")}}. Und wenn eine Richtung im <html> gesetzt war, hatte die Veränderung der Sichtbarkeit keinen Effekt (obwohl der spätere Abruf des Document.dir wird behaupten, dass die Direktionalität geändert wurde). Wenn ein solches Attribut nicht im <html> gesetzt ist und die Eigenschaft geändert wurde, werden beide sichtbaren direktionale geändert und die document.dir  Eigenschaft wird die Änderung korrekt wiedergeben.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/document/index.html b/files/de/web/api/document/document/index.html new file mode 100644 index 0000000000..ce3bddf174 --- /dev/null +++ b/files/de/web/api/document/document/index.html @@ -0,0 +1,45 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - Dokument + - Méthode + - Reference +translation_of: Web/API/Document/Document +--- +
{{APIRef}}
+ +

Die Document Methode erstellt ein neues {{domxref("Document")}} Objekt das als Webseite im Browser geladen werden kann und bietet Möglichkeiten auf diese Inhalte zuzugreifen.

+ +

Konstruktor

+ +
new Document();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-document-document','Document')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser-Kompatibilität

+ + + +
{{Compat("api.Document.Document")}}
diff --git a/files/de/web/api/document/documentelement/index.html b/files/de/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..aac46ae3ea --- /dev/null +++ b/files/de/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +

{{ApiRef}}

+ +

Zusammenfassung

+ +

Lesbar, nicht schreibbar

+ +

Gibt das Element zurück, das die Wurzel des document ist (zum Beispiel, das <html> Element für HTML Dokumente).

+ +

Syntax

+ +
var element = document.documentElement;
+
+ +

Beispiel

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier ist die NodeList von direkten Kindern des Wurzel-Elementes
+for (var i = 0; i < firstTier.length; i++) {
+   // hier irgendwas mit den direkten Kindern des Wurzel-Elementes mit Hilfe
+   // von firstTier[i] erledigen
+}
+ +

Beobachtungen

+ +

Dieses Objekt ist lesbar aber nicht schreibbar. Es ist praktisch um auf die Wurzel eines beliebigen Dokumentes zuzugreifen.

+ +

HTML Dokumente enthalten typischerweise ein einziges Tochter-Element, <html>, manchmal mit einem DOCTYPE. XML-Doumente enthalten oft mehrere Tochter-Elemente, einen DOCTYPE und Verarbeitungshinweise.

+ +

Deswegen sollte document.documentElement statt {{Domxref("document.firstElementChild")}} benutzt werden, um auf das Wurzel-Element zuzugreifen.

+ +

Spezifikation

+ + diff --git a/files/de/web/api/document/fullscreenchange_event/index.html b/files/de/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..7c8026858c --- /dev/null +++ b/files/de/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,87 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +

Das onfullscreenchange Event wird gesendet, wenn der Browser den Vollbildmodus startet oder beendet.

+ +

Allgemeine Information

+ +
+
Speifikation
+
Fullscreen
+
Schnittstelle
+
Event
+
Blubbert
+
Ja
+
Abbrechbar
+
Nein
+
Ziel
+
Dokument
+
Standardaktion
+
Keine
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Beispiel

+ +
// Diese API hat noch immer Vendor Prefixe in den Browsern, die sie implementieren
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // Das Event selber hat keine Informationen über darüber, ob sich der Browser
+    // im Vollbildmodus befindet, aber man kann diesen über die Fullscreen API
+    // erhalten
+    if ( document.fullscreen ) {
+
+        // Das Ziel des Events ist immer das Dokument,
+        // aber man kann das eigentliche Element im Vollbildmodus über die API
+        // abrufen
+        document.fullscreenElement;
+    }
+
+});
+ +

Verwandte Events

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/getelementbyid/index.html b/files/de/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..dfb6cc0d36 --- /dev/null +++ b/files/de/web/api/document/getelementbyid/index.html @@ -0,0 +1,131 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +
Gibt eine Referenz zu einem Element anhand seiner ID zurück.
+ +
 
+ +

Syntax

+ +
element = document.getElementById(id);
+
+ +

Parameter

+ + + +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>getElementById Beispiel</title>
+  <script>
+  function changeColor(newColor) {
+    var elem = document.getElementById("para1");
+    elem.style.color = newColor;
+  }
+  </script>
+</head>
+<body>
+  <p id="para1">Irgendein Text</p>
+  <button onclick="changeColor('blue');">Blau</button>
+  <button onclick="changeColor('red');">Rot</button>
+</body>
+</html>
+
+ +

Anmerkungen

+ +

Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein muss, damit der Code funktioniert - 'getElementByID' funktioniert nicht, auch wenn es richtig zu sein scheint.

+ +

Wenn kein Element mit der angegebenen id existiert, gibt die Funktion null zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass document.getElementById("Main") anstatt des Elements <div id="main"> null zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.

+ +

Elemente die sich nicht im Dokument befinden werden nicht von getElementById gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit insertBefore oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit getElementById zugreifen kann.

+ +
var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el wird null!
+
+ +

Nicht-HTML-Dokumente. Die DOM-Implementierung muss eine Information enthalten, welche angibt, welches Attribut vom Typ ID ist. Attribute mit dem Namen "id" sind solange nicht vom Typ ID bis sie in der Dokumenttypdefinition als solche definiert werden. Das id-Attribut ist in gebräuchlichen Fällen wie bei XHTML, XUL und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß null zurück.

+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Spezifikation

+ +

getElementById wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. 

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/getelementsbyclassname/index.html b/files/de/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..182fef2f42 --- /dev/null +++ b/files/de/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,105 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - DOM Element Methoden + - Gecko + - Gecko DOM Referenz + - HTML5 + - Méthode + - Referenz +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Gibt ein Array-ähnliches Objekt von allen Kindelementen welche den gegebenen Klassennamen besitzen. Wenn dies auf das document-Objekt ausgeführt wird, wird das gesamte Dokument durchsucht, inklusive des root-Knoten. Man kann ebenfalls {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} mit jedem Element aufrufen; es werden nur Nachfolgende Elemente des gegebenenen root-Element zurückgegeben.

+ +

Syntax

+ +
var elements = document.getElementsByClassName(names); // oder:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Beispiele

+ +

Alle Elemente der Klasse 'test' holen:

+ +
document.getElementsByClassName('test');
+ +

Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:

+ +
document.getElementsByClassName('red test');
+ +

Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Man kann auch Methoden von Array.prototype auf {{ domxref("HTMLCollection") }} anwenden, in dem die HTMLCollection  in dem sie an die this Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Browserkompabilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}3.09.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Spezifikation

+ + diff --git a/files/de/web/api/document/head/index.html b/files/de/web/api/document/head/index.html new file mode 100644 index 0000000000..63b389112d --- /dev/null +++ b/files/de/web/api/document/head/index.html @@ -0,0 +1,73 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - Referenz +translation_of: Web/API/Document/head +--- +

{{APIRef("DOM")}}

+ +

Gibt das {{HTMLElement("head")}} Element des aktuellen Dokuments aus. Ist mehr als ein <head>  Element vorhanden, wird das erste Element ausgegeben.

+ +

Syntax

+ +
var objRef = document.head;
+
+ +

Beispiel

+ +
// in HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Anmerkungen

+ +

document.head ist nur lesbar. Der Versuch dieser Eigenschaft einen Wert zu zuweisen, wird ohne Ausgabe einer Fehlermeldung fehlschlagen, oder, bei verwendetem
+ ECMAScript Strict Mode in einem Gecko Browser, mit einem TypeError quittiert.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initiale Definition.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
+ +

Browser Kompatibilität

+ +

 

+ + + +

{{Compat("api.Document.head")}}

+ +

 

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/importnode/index.html b/files/de/web/api/document/importnode/index.html new file mode 100644 index 0000000000..8420b6f794 --- /dev/null +++ b/files/de/web/api/document/importnode/index.html @@ -0,0 +1,93 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +tags: + - API + - DOM + - Dokument + - Knoten + - Kopie + - Méthode + - Referenz + - importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

Die {{domxref("Document")}}-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens ({{domxref("Node")}}) oder Dokumenten-Fragments ({{domxref("DocumentFragment")}}) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann.  An dieser Stelle ist es noch nicht im Dokumentenbaum eingefügt, um das zu erreichen, muss eine Methode wie {{domxref("Node.appendChild", "appendChild()")}} oder {{domxref("Node.insertBefore", "insertBefore()")}} aufgerufen werden.

+ +

Syntax

+ +
var knoten = document.importNode(externerKnoten, deep);
+
+ +
+
externerKnoten
+
Der neue Knoten oder das neue Dokumenten-Fragment, welches in das aktuelle Dokument importiert werden soll. Nach dem Import ist der Elternknoten null, da der neue Knoten noch nicht in den Dokumentenbaum eingefügt wurde.
+
deep
+
Ein boolscher Wert der anzeigt, ob der komplette Unterbaum vonexternalNode importiert werden soll. Ist dieser Parameter true, werden externalNode so wie all seine Nachfahren kopiert; Ist er false, wird nur der einzelne Knoten, externalNode, importiert.
+
+ +
+

In der DOM4-Spezifikation, ist deep als optionales Argument angeführt. Wird es weggelassen, verhält sich die Methode als ob der Wert von deeptrue wäre, was zu standardmäßigen tiefen Kopieren führt. Um flach zu kopieren, muss deep explizit auf false gesetzt werden.

+ +

Dieses Verhalten wurde in der letzten Spezifikation geändert, der Wert von deep wird bei Weglassen auf false gesetzt. Obwohl es immer noch optional ist, empfehlen wir für Vorwärts- und Rückwärtskompatibilität das deep-Argument immer explizit anzugeben. Seit Gecko 28.0 {{geckoRelease(28)}} ist eine Konsolenwarnung implementiert, wenn das Argument weggelassen wird. Seit Gecko 29.0 {{geckoRelease(29)}}) ist flaches Kopieren das Standardverhalten.

+
+ +

Beispiel

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Anmerkungen

+ +

Der Originalknoten wird nicht aus dem Ursprungsdokument entfernt. Der importierte Knoten ist des Weiteren eine Kopie des ursprünglichen.

+ +

 

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

+ +

 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Ursprüngliche Definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Document.importNode")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/index.html b/files/de/web/api/document/index.html new file mode 100644 index 0000000000..f9b00cacfc --- /dev/null +++ b/files/de/web/api/document/index.html @@ -0,0 +1,405 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Gecko DOM Referenz +translation_of: Web/API/Document +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Zusammenfassung

+ +

Jede im Browswer geladene Webseite hat ihr eigenen document Objekt.  Das Document Interface dient als Einstiegspunkt in den Inhalt der Webseite (der DOM tree, beinhaltet Elemente wie {{HTMLElement("body")}} und {{HTMLElement("table")}}) und unterstützt Funktionen, die global für das Dokument gelten(z.B. das Aufrufen der URL der Seite und das Erstellen neuer Elemente im Dokument).

+ +

Ein Dokument-Objekt kann von verschiedenen APIs bezogen werden:

+ + + +

Depending on the kind of the document (e.g. HTML or XML), different APIs may be available on the document object.

+ + + +

In der Zukunft, alle diese Interfaces werden zusammengefasst zum Document Interface.

+ +

Eigenschaften

+ +
+

Hinweis: Das Document Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.

+
+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Provides access to all elements with an id. This is a legacy non-standard interface, you should use the {{domxref("Document.getElementById()")}} method instead.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Used with {{domxref("document.load")}} to indicate an asynchronous request.
+
{{domxref("Document.characterSet")}} {{experimental_inline}}
+
Returns the character set being used by the document.
+
{{domxref("Document.compatMode")}} {{experimental_inline}}
+
Indicates whether the document is rendered in Quirks or Strict mode.
+
{{domxref("Document.contentType")}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}}
+
Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}}
+
Returns the document URL.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.implementation")}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}
+
Returns the encoding used when the document was parsed.
+
{{domxref("Document.lastStyleSheetSet")}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
true if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Erweiterung für HTML Dokumente

+ +

Das Document Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder, ist seit HTML5 erweitert für solche Dokumente:

+ +
+
{{domxref("Document.activeElement")}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Returns the title of the current document.
+
{{domxref("Document.URL")}}
+
Returns a string containing the URL of the current document.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns the event handling code for the readystatechange event.
+
+ +

Methoden

+ +
+

Hinweis: Das Document Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.

+
+ +
+
{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}
+
See {{domxref("window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}
+
Gets a {{domxref("CaretPosition")}} based on two coordinates.
+
{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment","Document.createComment(String comment)")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement","Document.createElement(String name)")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent","Document.createEvent(String interface)")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}
+
Creates a text node.
+
{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}
+
Returns the element visible at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}
+
Returns a clone of a node from an external document.
+
{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("window.releaseEvents")}}.
+
{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("window.routeEvent")}}.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("Document.getElementById","Document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Erweiterung für HTML Dokumente

+ +

Das Document Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder ist seit HTML5 erweitert für solche Dokumente:

+ +
+
{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("Document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("Document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("Document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("Document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formatting command.
+
{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}
+
Registers a new custom element in the browser and returns a constructor for the new element.
+
{{domxref("Document.write","Document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("Document.writeln","Document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend Document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser Kompatibilität

+ +

Firefox Hinweise

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer Hinweise

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..7fadcd87ce --- /dev/null +++ b/files/de/web/api/document/queryselector/index.html @@ -0,0 +1,129 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Funktion + - Methode(2) + - Méthode + - Referenz + - Selektor + - Selektoren +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

Die Methode querySelector() von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird null zurückgegeben.

+ +
+

Hinweis: Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (depth-first pre-order) durchlaufen werden.

+
+ +

Syntax

+ +
element = document.querySelector(selectors);
+
+ +

Parameter

+ +
+
selectors
+
Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine SYNTAX_ERR Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln.
+
+ +
+

Hinweis: Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.

+
+ +

Rückgabewert

+ +

Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von CSS-Selektoren entspricht, oder null, wenn keine Übereinstimmungen vorhanden sind.

+ +

Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.

+ +

Exceptions

+ +
+
SYNTAX_ERR
+
Die Syntax der angegebenen Selektoren ist ungültig.
+
+ +

Nutzungshinweise

+ +

Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.

+ +

CSS-Pseudoelemente geben niemals Elemente zurück, wie in der Selektoren-API angegeben.

+ +

Sonderzeichen maskieren

+ +

Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("\") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals zweimal maskieren (einmal für den JavaScript String und einmal für querySelector()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+</script>
+ +

Beispiele

+ +

Erstes Element ermitteln, das mit einer Klasse übereinstimmt

+ +

In diesem Beispiel wird das erste Element im Dokument mit der Klasse "myclass" zurückgegeben:

+ +
var el = document.querySelector(".myclass");
+
+ +

Ein komplexerer Selektor

+ +

Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<input name="login"/>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<div class="user-panel main">), im Dokument zurückgegeben:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Initiale Definition
+ +

Browserkompatibilität

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/queryselectorall/index.html b/files/de/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..80ab2a83c2 --- /dev/null +++ b/files/de/web/api/document/queryselectorall/index.html @@ -0,0 +1,172 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Document + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Die Methode querySelectorAll() von {{domxref("Document")}} gibt eine statische (nicht live) {{domxref("NodeList")}} zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.

+ +
+

Hinweis: Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.

+
+ +

Syntax

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parameter

+ +
+
selectors
+
Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider CSS-Selektor-String sein, andernfalls wird eine SyntaxError Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.
+
+ +
+

Hinweis: Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.

+
+ +

Rückgabewert

+ +

Eine statische (nicht-live) {{domxref("NodeList")}} mit je einem {{domxref("Element")}}-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere {{domxref("NodeList")}} im Falle keiner Übereinstimmungen.

+ +
+

Hinweis: Wenn selectors ein CSS Pseudo-Element enthält ist die zurückgegebene Liste immer leer.

+
+ +

Exceptions

+ +
+
SyntaxError
+
Die Syntax des selectors-String ist ungültig.
+
+ +

Beispiele

+ +

Eine Liste von Übereinstimmungen erhalten

+ +

Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:

+ +
var matches = document.querySelectorAll("p");
+ +

Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder "note" oder "alert" ist:

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Hier erhalten wir eine Liste von <p>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse "highlighted" ist und die sich in einem Container befinden, dessen ID "test" ist.

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Das folgende Beispiel nutzt einen Attribut-Selektor, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein "data-src" Attribut besitzen:

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID "userlist" enthalten sind und deren Attribut "data-active" den Wert "1" hat:

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Auf Übereinstimmungen zugreifen

+ +

Sobald die {{domxref("NodeList")}} der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft length 0 ist), wurden keine Übereinstimmungen gefunden.

+ +

Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Benutzerhinweise

+ +

querySelectorAll() verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.

+ +

HTML

+ +

Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

Wenn Sie in diesem Beispiel ".outer .inner" im Kontext des <div> mit der Klasse "select" auswählen, wird das Element mit der Klasse ".inner" immer noch gefunden, obwohl .outer kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (".select"). Standardmäßig überprüft querySelectorAll() nur, ob sich das letzte Element im Selektor im Suchbereich befindet.

+ +

Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Lebender Standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Keine Änderung
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Initiale Definition
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Originale Definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/readystate/index.html b/files/de/web/api/document/readystate/index.html new file mode 100644 index 0000000000..da2593e9c7 --- /dev/null +++ b/files/de/web/api/document/readystate/index.html @@ -0,0 +1,111 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - HTML DOM + - Property + - Referenz +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

Zusammenfassung

+ +

Die Eigenschaft Document.readyState eines {{ domxref("document") }}-Objektes beschreibt dessen Ladezustand.

+ +

Werte

+ +

Die Eigenschaft readyState kann folgende Werte haben:

+ +
+
loading
+
Das Dokument wird noch geladen.
+
interactive
+
Das Dokument selbst wurde vollständig eingelesen und verarbeitet, aber das Laden weiterer Bestandteile wie Bilder, Stylesheets und Frames ist noch nicht abgeschlossen.
+ Dieser Status zeigt an, dass das Ereignis {{event("DOMContentLoaded")}} ausgelöst wurde.
+
complete
+
Das Dokument und seine Bestandteile wurden geladen.
+ Dieser Status zeigt an, dass das Ereignis {{event("load")}} ausgelöst wurde.
+
+ +

Ändert sich der Wert dieser Eigenschaft, wird das Ereignis {{event("readystatechange")}} des zugehörigen {{domxref("document") }}-Objekts augelöst.

+ +

Syntax

+ +
var string = document.readyState;
+
+ +

Beispiele

+ +

Verschiedene Ladezustände

+ +
switch (document.readyState) {
+  case "loading":
+    // Das Dokument wird noch geladen.
+    break;
+  case "interactive":
+    // Das Dokument wurde geladen. Wir können nun die DOM-Elemente ansprechen.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // Die Seite ist komplett geladen.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange als eine Alternative zum Ereignis DOMContentLoaded

+ +
// Alternative zum Ereignis DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange als eine Alternative zum Ereignis load

+ +
// Alternative zum Ereignis load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}} 
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Initiale Spezifikation.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/referrer/index.html b/files/de/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8c1cd8d888 --- /dev/null +++ b/files/de/web/api/document/referrer/index.html @@ -0,0 +1,46 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - Referenz +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Gibt den URI der Seite aus, von der die aktuelle Seite aufgerufen wurde.

+ +

Syntax

+ +
var string = document.referrer;
+
+ +

Wert

+ +

Der Wert ist eine leere Zeichenkette, wenn der Benutzer direkt auf die Seite navigiert ist (nicht über einen Link, sondern z.B. über ein Lesezeichen). Da es sich bei dieser Eigenschaft lediglich um einen String handelt, ist der Zugriff auf das DOM der referenzierenden Seite nicht möglich.

+ +

Innerhalb eines {{HTMLElement("iframe")}}, wird der Document.referrer anfänglich auf den identischen Wert wie {{domxref("HTMLHyperlinkElementUtils/href", "href")}} der {{domxref("Window/location", "Window.location")}} des übergeordneten Fensters gesetzt.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}{{Spec2('HTML WHATWG')}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Document.referrer")}}

diff --git a/files/de/web/api/document/registerelement/index.html b/files/de/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..f563250e8e --- /dev/null +++ b/files/de/web/api/document/registerelement/index.html @@ -0,0 +1,113 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - DOM + - Veraltet + - Web Components +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}

+ +
+

Warnung: document.registerElement() läuft zu Gunsten von customElements.define() aus.

+
+ +

{{draft}}

+ +

Die document.registerElement()-Methode registriert ein neues benutzerdefiniertes Element im Browser und gibt einen Konstruktor für das neue Element zurück.

+ +
+

Hinweis: Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe Web Components in Firefox erlauben.

+
+ +

Syntax

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parameter

+ +
+
tag-name
+
Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel my-tag.
+
options {{optional_inline}}
+
+

Ein Objekt mit den Eigenschaften prototype, auf dem das benutzerdefinierte Element basieren soll, und extends, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.

+
+
+ +

Beispiel

+ +

Hier ist ein einfaches Beispiel:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Der Tag ist num im Browser registriert. Die Mytag-Variable enthält einen Konstruktor, der benutzt werden kann, um ein my-tag-Element wie folgt im Dokument zu erzeugen:

+ +
document.body.appendChild(new Mytag());
+ +

Das fügt ein leeres my-tag-Element ein, dass sichtbar wird, wenn die Entwicklerwerkzeuge des Browsers benutzt werden aber nicht, wenn mit Hilfe des Brwoser der Quellcode betrachtet wird. So lange dem Tag kein Inhalt beigefügt wird, wird es auch in der normalen Browser-Ansicht nicht sichtbar sein. Inhalt kann beispielsweise folgendermaßen hinzugefügt werden:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung3531[1]{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4.4.431[1]{{CompatNo}}25{{CompatNo}}
+
+ +

[1] Diese API ist hinter einer Einstellung versteckt.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/title/index.html b/files/de/web/api/document/title/index.html new file mode 100644 index 0000000000..9c54e274a6 --- /dev/null +++ b/files/de/web/api/document/title/index.html @@ -0,0 +1,70 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +
{{APIRef("DOM")}}
+ +

Die Eigenschaft document.title holt oder setzt den aktuellen Titel des Dokuments.

+ +

Syntax

+ +
var docTitle = document.title;
+
+ +

docTitle ist eine Zeichenfolge, die den Titel des Dokuments enthält. Wenn der Titel durch das Setzen von document.title überschrieben wurde, enthält er diesen Wert. Andernfalls enthält er den im Markup angegebenen Titel (siehe {{Anch("Anmerkungen")}} unten).

+ +
document.title = newTitle;
+
+ +

newTitle ist der neue Titel des Dokuments. Die Zuweisung beeinflusst den Rückgabewert von document.title, den für das Dokument angezeigten Titel (z.B. in der Titelleiste des Fensters oder Tabs), und sie beeinflusst auch das DOM des Dokuments (z.B. den Inhalt des Elements <title> in einem HTML-Dokument).

+ +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hallo Welt!</title>
+</head>
+<body>
+
+  <script>
+    alert(document.title); // zeigt "Hallo Welt!"
+    document.title = "Tschüss Welt!";
+    alert(document.title); // zeigt "Tschüss Welt!"
+  </script>
+
+</body>
+</html>
+
+ +

Anmerkungen

+ +

Diese Eigenschaft gilt für HTML-, SVG-, XUL- und andere Dokumente in Gecko.

+ +

Bei HTML-Dokumenten ist der Anfangswert von document.title der Textinhalt des Elements <title>. Bei XUL ist es der Wert des {{XULAttr("title")}} Attributs des {{XULElem("window")}} oder eines anderen XUL-Elements der obersten Ebene.

+ +

In XUL hat der Zugriff auf document.title, bevor das Dokument vollständig geladen ist, ein undefiniertes Verhalten: document.title gibt möglicherweise eine leere Zeichenfolge zurück, und das Setzen von document.title hat möglicherweise keine Wirkung.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','#document.title','document.title')}}{{Spec2('HTML WHATWG')}}
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.Document.title")}}

diff --git a/files/de/web/api/document/url/index.html b/files/de/web/api/document/url/index.html new file mode 100644 index 0000000000..29770925ee --- /dev/null +++ b/files/de/web/api/document/url/index.html @@ -0,0 +1,19 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Die schreibgeschützte Eigenschaft URL des {{domxref("Document")}} interface gibt den Ort des Dokuments als String zurück.

+ +

Syntax

+ +
var string = document.URL
+
+ +

Spezifikation

+ + diff --git a/files/de/web/api/document/width/index.html b/files/de/web/api/document/width/index.html new file mode 100644 index 0000000000..5fc3e1c80a --- /dev/null +++ b/files/de/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note: Starting in {{Gecko("6.0")}}, document.width is no longer supported. Instead, use document.body.clientWidth. See {{domxref("element.clientWidth")}}.

+
+ +

Gibt die Breite des {{HTMLElement("body")}} Elements des aktuellen Dokuments in Pixeln zurück.

+ +

Wird nicht vom Internet Explorer unterstützt.

+ +

Syntax

+ +
pixels = document.width;
+
+ +

Beispiel

+ +
function init() {
+    alert("Die Breite des Dokuments beträgt " + document.width + " Pixel.");
+}
+
+ +

Alternativen

+ +
document.body.clientWidth              /* Breite des <body> */
+document.documentElement.clientWidth   /* Breite des <html> */
+window.innerWidth                      /* Breite des Browserfensters */
+
+ +

Spezifikation

+ +

HTML5

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/write/index.html b/files/de/web/api/document/write/index.html new file mode 100644 index 0000000000..3b25f6b658 --- /dev/null +++ b/files/de/web/api/document/write/index.html @@ -0,0 +1,85 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthode + - Referenz +translation_of: Web/API/Document/write +--- +
{{ ApiRef("DOM") }}
+ +

Schreibt eine Zeichenfolge in einen Dokument-Stream, der zuvor mittels document.open() geöffnet wurde.

+ +
Hinweis: da document.write in einen Dokument-Stream schreibt, wird beim Aufruf von document.write auf ein geschlossenes (fertig geladenes) Dokument dieses automatisch wieder mittels document.open geöffnet, wodurch das Dokument geleert wird.
+ +

Syntax

+ +
document.write(markup);
+
+ +

Parameter

+ +
+
markup
+
Ein String, der in das Dokument geschrieben wird.
+
+ +

Beispiel

+ +
<html>
+
+<head>
+  <title>write example</title>
+
+  <script>
+    function newContent() {
+      alert("load new content");
+      document.open();
+      document.write("<h1>Raus mit dem Alten - rein mit dem Neuen!</h1>");
+      document.close();
+    }
+  </script>
+</head>
+
+<body onload="newContent();">
+  <p>originaler Dokumenten-Inhalt</p>
+</body>
+
+</html>
+
+ +

Hinweise

+ +

Wird die Ausgabe auf ein Dokument angewendet, das zuvor nicht mittels document.open() geöffnet wurde, löst dies ein implizites document.open aus. Sobald Sie den Schreibvorgang beendet haben, empfiehlt es sich document.close() aufzurufen, um dem Browser mitzuteilen, dass das Dokument vollständig geladen werden kann. Der geschriebene Text wird in das Strukturmodell des Dokuments eingelesen. Im vorherigen Beispiel wird das h1-Element automatisch in einen Knoten im Dokument umgewandelt.

+ +

Wird der document.write() Aufruf in ein im HTML eingeschlossenes <script> Tag eingebunden, wird document.open() nicht aufgerufen. Zum Beispiel:

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+
+ +
Hinweis: document.write und document.writeln funktionieren nicht in XHTML Documenten (Sie erhalten einen "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] Fehler in der Fehlerkonsole). Dies tritt auf, sobald Sie eine lokale Datei mit der Erweiterung .xhtml laden oder eine Datei öffnen, die mit dem application/xhtml+xml-MIME-Typ vom Server gesendet wurde. Weitere Informationen erhalten Sie in der W3C XHTML FAQ.
+ +
Hinweis: document.write in verzögert geladenen oder asynchronen Scripten wird ignoriert und Sie erhalten eine Nachricht ähnlich dieser in der Fehlerkonsole: "A call to document.write() from an asynchronously-loaded external script was ignored".
+ +
Hinweis (Nur Microsoft Edge): ein wiederholter Aufruf vondocument.write in einem <iframe> erzeugt den Fehler "SCRIPT70: Permission denied".
+ +
Hinweis (Chrome Version 55+): per document.write() injizierte <script>-Elemente werden bei einer 2G Verbindung nach einem HTTP Cache Miss nicht ausgeführt.
+ +

Spezifikationen

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/writeln/index.html b/files/de/web/api/document/writeln/index.html new file mode 100644 index 0000000000..6581924105 --- /dev/null +++ b/files/de/web/api/document/writeln/index.html @@ -0,0 +1,60 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Schreibt eine Textfolge, gefolgt von einem Zeilenumbruchzeichen, in ein Dokument.

+ +

Syntax

+ +
document.writeln(line);
+
+ +

Parameters

+ + + +

Beispiel

+ +
document.writeln("<p>enter password:</p>");
+
+ +

Notes

+ +

document.writeln ist dasselbe wie {{domxref("document.write")}} aber fügt einen Zeilenumbruch hinzu.

+ +
Note: document.writeln (like document.write) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Document.writeln")}}

diff --git a/files/de/web/api/documentfragment/index.html b/files/de/web/api/documentfragment/index.html new file mode 100644 index 0000000000..8dc6abcceb --- /dev/null +++ b/files/de/web/api/documentfragment/index.html @@ -0,0 +1,258 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +tags: + - API + - DOM + - DocumentFragment + - Documents + - Interface + - Reference + - Web Components +translation_of: Web/API/DocumentFragment +--- +
{{ APIRef("DOM") }}
+ +

Das DocumentFragment interface stellt ein einfaches Objekt dar, welches ohne Bezug zu einem parent erstellt und verwendet werden kann. Es kann somit verstanden werden als eine leichtgewichtige Variante des {{domxref("Document")}}, die einen Ausschnitt einer Dokumentstruktur aus Element-Knoten abbildet. Der zentrale Unterschied dabei ist jedoch, dass das Fragment nicht Bestandteil der aktiven Seitenstruktur und des DOM-Baums ist. Dadurch haben Änderungen an dem Fragment keine Auswirkungen auf das aktive Dokument, wodurch unerwünschte Seiteneffekte von DOM-Änderungen wie {{Glossary("reflow")}} oder Performanceeinbußen verhindert werden können.

+ +

Üblicherweise wird das DocumentFragment dazu verwendet, um einen neuen DOM-Teilbaum für eine Seite zu erzeugen und darin beliebig Fragmente und Knoten vorbereiten zu können, diese über das {{domxref("Node")}} interface mittels Methoden wie {{domxref("Node.appendChild", "appendChild()")}} und {{domxref("Node.insertBefore", "insertBefore()")}} hinzuzufügen. Wenn das Frament schließlich in die aktive Dokumentstruktur und deren DOM eingefügt wird, bleibt ein leeres DocumentFragment zurück. Da alle Knoten auf einmal in das aktive Dokument hinzugefügt werden, wird lediglich ein einzelner reflow und render Prozess ausgelöst, anstelle von potentiell unzähligen für jeden einzelnen, separat eingefügten Knoten.

+ +

Das interface wird ebenso bei Web components verwendet: {{HTMLElement("template")}}-Elemente beinhalten ein DocumentFragment in ihrer {{domxref("HTMLTemplateElement.content")}} Eigenschaft.

+ +

Ein leeres DocumentFragment kann jederzeit erzeugt werden über {{domxref("document.createDocumentFragment()")}} oder über den constructor.

+ +

{{InheritanceDiagram}}

+ +

Eigenschaften

+ +

Das interface hat keine spezifischen Eigenschaften, erhält jedoch über Vererbung die des übergeordneten {{domxref("Node")}} und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt eine aktuelle {{domxref("HTMLCollection")}} bereit mit allen {{domxref("Element")}} Objekten, die dem DocumentFragment angehören.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt das {{domxref("Element")}} bereit, welches aktuell das erste Kind des DocumentFragment ist. null falls es keines gibt.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt das {{domxref("Element")}} bereit, welches aktuell das letzte Kind des DocumentFragment ist. null falls es keines gibt.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt als unsigned long die Anzahl der Kindelemente des DocumentFragment bereit.
+
+ +

Constructor

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
+
Erzeugt ein neues, leeres DocumentFragment Objekt.
+
+ +

Methoden

+ +

Das interface erbt die Methoden von {{domxref("Node")}}, und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.

+ +
+
{{domxref("DocumentFragment.find()")}} {{experimental_inline}}
+
Liefert das erste zutreffende {{domxref("Element")}} innerhalb des Baums des DocumentFragment.
+
{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}
+
Liefert eine {{domxref("NodeList")}} mit allen zutreffenden {{domxref("Element")}} innerhalb des Baums des DocumentFragment.
+
{{domxref("DocumentFragment.querySelector()")}}
+
Liefert den {{domxref("Element")}} Knoten im DocumentFragment, der in der Reihenfolge im document als erstes zu dem Selektor passt.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
Liefert eine {{domxref("NodeList")}} mit allen {{domxref("Element")}} Knoden im DocumentFragment, die zu dem angegebenen Selektor passen.
+
+ +
+
{{domxref("DocumentFragment.getElementById()")}}
+
Liefert den ersten {{domxref("Element")}} Knoten im DocumentFragment, dem in der document Reihenfolge zuerst die angegebene ID zugeordnet ist.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkungen
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Added the constructor and the implementation of {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 2')}}Added the find() and findAll() methods.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Added the querySelector() and querySelectorAll() methods.
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Initial definition
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector() and querySelectorAll()1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
findAll() and find() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
DocumentFragment() constructor {{experimental_inline}}28.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatNo}}
ParentNode properties {{experimental_inline}}28.0{{CompatNo}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}15.0{{CompatNo}}
ParentNode methods {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector() and querySelectorAll()2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}8.010.03.2 (525.3)
findAll() and find() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
DocumentFragment() constructor {{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
ParentNode properties {{experimental_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}5.0{{CompatNo}}
ParentNode methods {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/de/web/api/domerror/index.html b/files/de/web/api/domerror/index.html new file mode 100644 index 0000000000..1251609ed3 --- /dev/null +++ b/files/de/web/api/domerror/index.html @@ -0,0 +1,189 @@ +--- +title: DOMError +slug: Web/API/DOMError +tags: + - API + - DOM + - Fehler + - Interface + - Referenz +translation_of: Web/API/DOMError +--- +

{{ APIRef("DOM") }}

+ +

Das DOMError-Interface beschreibt ein Fehler-Objekt, welches ein Fehlername enthält.

+ +

Eigenschaften

+ +
+
{{domxref("DOMError.name")}} {{readOnlyInline}}
+
Gibt ein {{ domxref("DOMString") }} zurück, welcher einer der folgenden Fehlertypnamen repäsentiert (siehe unten).
+
+ +

Fehlertypen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypBeschreibung
IndexSizeErrorDer Index ist ausserhalb des gültigen Bereichs (z. B. bei einem {{ domxref("range") }}-Objekt).
HierarchyRequestErrorDie  Knoten-Baum-Hierarchie ist nicht korrekt.
WrongDocumentErrorDas Objekt ist im falschen {{ domxref("document") }}.
InvalidCharacterErrorDer String beeinhaltet unglütige Charakter.
NoModificationAllowedErrorDas Objekt kann nicht modifiziert werden.
NotFoundErrorDas Objekt kann nicht gefunden werden.
NotSupportedErrorDie Operation wird nicht unterstützt
InvalidStateErrorDas Objekt hat einen ungültigen Status.
SyntaxErrorDer String entspricht nicht den erwarteten Muster.
InvalidModificationErrorDas Objekt kann nicht in dieser Art modifiziert werden.
NamespaceErrorDie Operation ist nicht erlaubt in XML-Namespaces.
InvalidAccessErrorDas Objekt unterstützt diese Operation oder dieses Argument nicht.
TypeMismatchErrorDer Typ des Objekts entspricht nicht dem erwarteten Typ.
SecurityErrorDiese Operation ist unsicher.
NetworkErrorEin Netzwerkfehler ist aufgetreten.
AbortErrorDie Operation wurde abgebrochen.
URLMismatchErrorDie angegebene URL entspricht nicht einer anderen URL.
QuotaExceededErrorDas Kontingent wurde überschritten.
TimeoutErrorTimeout bei der Operation.
InvalidNodeTypeErrorDer Knoten ist nicht korrekt oder hat falsche Vorfahren für die Operation.
DataCloneErrorDas Objekt kann nicht geklont werden.
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}{{Spec2('DOM4')}}Initial definition.
+ +

Browser-Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basissupport{{CompatUnknown}}12.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basissupport{{CompatUnknown}}12.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/domparser/index.html b/files/de/web/api/domparser/index.html new file mode 100644 index 0000000000..8082197658 --- /dev/null +++ b/files/de/web/api/domparser/index.html @@ -0,0 +1,181 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +translation_of: Web/API/DOMParser +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

Der DOMParser kann XML oder HTML aus einem String in ein DOM-Document parsen. Der DOMParser ist spezifiziert in DOM Parsing and Serialization.

+ +

XMLHttpRequest unterstützt das parsen von XML- und HTML-Dokumenten auf die über eine URL zugegriffen wird.

+ +

DOMParser erzeugen

+ +

Um einen neuen DOMParser zu erzeugen benutze einfach new DOMParser().

+ +

Für mehr Informationen über das Erstellen von einem DOMParser in einer Firefox-Erweiterung, konsultiere die nsIDOMParser-Dokumentation.

+ +

XML parsen

+ +

Nachdem du einmal ein Parser-Objekt erzeugt hast, kannst du XML-Strings mit der parseFromString-Methode parsen.

+ +
const parser = new DOMParser();
+const doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+
+ +

Fehlerbehandlung

+ +

Beachte dass derzeit keine Exception ausgelöst wird, wenn es beim Ausführen des Parser-Prozesses zu einem Fehler kommen sollte. Stattdessen wird ein Fehler-Dokument  (s.a. {{Bug(45566)}}) ausgelöst:

+ +
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
+(error description)
+<sourcetext>(a snippet of the source XML)</sourcetext>
+</parsererror>
+
+ +

Die Parsing-Fehler werden auch in der Error-Console, zusammen mit dem Dokument-URl als Fehlerquelle ausgegeben (s.u.).

+ +

Ein SVG- oder HTML-Dokument parsen

+ +

Der DOMParser beherrscht auch SVG {{geckoRelease("10.0")}} und HTML {{geckoRelease("12.0")}}. Es gibt drei mögliche Ergebnisse, die mit der Übergabe eines MIME-Typen ausgewählt werden können. Ist der MIME-Typ text/xml, ist das resultierende Dokument ein XMLDocument, ist er image/svg+xml, wird ein SVGDocument zurückgegeben und für text/html erhält man ein HTMLDocument.

+ +
const xmlDoc = new DOMParser().parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+const svgDoc = new DOMParser().parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+const htmlDoc = new DOMParser().parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+
+ +

DOMParser HTML-Erweiterung für andere Browser

+ +
/* inspiriert von https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+    "use strict";
+
+    const proto = DOMParser.prototype;
+    const nativeParse = proto.parseFromString;
+
+    // Firefox/Opera/IE werfen bei unbekannten Typen Fehler
+    try {
+        // WebKit gibt bei bei unbekannten Typen `null` zurück
+        if (new DOMParser().parseFromString("", "text/html")) {
+            // text/html wird unterstützt
+            return;
+        }
+    } catch (ex) {}
+
+    proto.parseFromString = function(markup, type) {
+        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+            const doc = document.implementation.createHTMLDocument("");
+            if (markup.toLowerCase().includes('<!doctype')) {
+                doc.documentElement.innerHTML = markup;
+            } else {
+                doc.body.innerHTML = markup;
+            }
+            return doc;
+        } else {
+            return nativeParse.apply(this, arguments);
+        }
+    };
+}(DOMParser));
+
+ +

Den DOMParser im Chrome/JSM/XPCOM/Privileged-Scope aufrufen

+ +

Siehe nsIDOMParser

+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XML support{{CompatChrome(1)}}{{CompatGeckoDesktop(1)}}{{CompatIE(9)}}{{CompatOpera(8)}}{{CompatSafari(3.2)}}
SVG support{{CompatChrome(4)}}{{CompatGeckoDesktop(10.0)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(3.2)}}
HTML support{{CompatChrome(30)}}{{CompatGeckoDesktop(12.0)}}{{CompatIE(10)}}{{CompatOpera(17)}}{{CompatSafari(7.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XML support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
SVG support{{CompatUnknown}}{{CompatGeckoMobile(10.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
HTML support{{CompatUnknown}}{{CompatGeckoMobile(12.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/domstring/index.html b/files/de/web/api/domstring/index.html new file mode 100644 index 0000000000..e6b148275c --- /dev/null +++ b/files/de/web/api/domstring/index.html @@ -0,0 +1,57 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - DOM Referenz + - DOMString + - Referenz + - String +translation_of: Web/API/DOMString +--- +

{{APIRef("DOM")}}

+ +

DOMString ist ein UTF-16 String. Obwohl JavaScript bereits solche Strings nutzt wird DOMString direkt zu einem {{jsxref("String")}} gemappt.

+ +

Wird null in einem Parameter oder einer Methode übergeben, so wandelt DOMString dies in den String "null" um.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Anpassung der Definition um
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Keine Änderung von {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Keine Änderung von {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Ursprüngliche Definition.
+ +

See also

+ + diff --git a/files/de/web/api/domtokenlist/add/index.html b/files/de/web/api/domtokenlist/add/index.html new file mode 100644 index 0000000000..2e1b6728c2 --- /dev/null +++ b/files/de/web/api/domtokenlist/add/index.html @@ -0,0 +1,73 @@ +--- +title: DOMTokenList.add() +slug: Web/API/DOMTokenList/add +translation_of: Web/API/DOMTokenList/add +--- +

{{APIRef("DOM")}}

+ +

Die add() Methode des {{domxref("DOMTokenList")}} Interfaces, fügt ein token der Liste an.

+ +

Syntax

+ +
tokenList.add(token1[, token2[, ...]]);
+ +

Parameter

+ +
+
token
+
Ein {{domxref("DOMString")}} ,welches das token repräsentiert, welches an die Liste angefügt werden soll.
+
+ +

Rückgabewert

+ +

undefined

+ +

Beispiele

+ +

Im folgenden Beispiel erhalten wir die Liste der Klassen eines {{htmlelement("span")}} Elementes als DOMTokenList  , mit Hilfe von {{domxref("Element.classList")}}. Wir fügen der Liste dann ein neues token an und schreiben die Liste als inhalt in das <span>.

+ +

Das HTML:

+ +
<span class="a b c"></span>
+ +

Nun das JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+
+ +

Die Ausgabe:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Man kann auch mehrere tokens auf einmal hinzufügen:

+ +
span.classList.add("d", "e", "f");
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ +
+ + +

{{Compat("api.DOMTokenList.add")}}

+
diff --git a/files/de/web/api/domtokenlist/index.html b/files/de/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..c963c053e0 --- /dev/null +++ b/files/de/web/api/domtokenlist/index.html @@ -0,0 +1,125 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +translation_of: Web/API/DOMTokenList +--- +

{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}

+ +

Die DOMTokenList Schnittstelle repräsentiert eine Sammlung von durch Leerzeichen getrennte Zeichen/ Merkmale (Tokens). Solch eine Ansammlung wird wiedergegben von {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} oder {{domxref("HTMLAreaElement.relList")}}. Deren Index beginnt bei 0 wie bei JavaScript {{jsxref("Array")}} Objekten. DOMTokenList achten immer auf die Groß- und Kleinschreibung.

+ +

Eigenschaften

+ +

Die Schnittstelle erbt keine Eigenschaften.

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
Ist eine Ganzzahl, die die Anzahl der im Objekt gespeicherten Objekte darstellt.
+
+ +

Methoden

+ +

Diese Schnittstelle erbt keine Methode.

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Returns an item in the list by its index (or undefined if the number is greater than or equal to the length of the list, prior to {{gecko("7.0")}} returned null)
+
{{domxref("DOMTokenList.contains()")}}
+
Returns true if the underlying string contains token, otherwise false
+
{{domxref("DOMTokenList.add()")}}
+
Fügt token der Liste hinzu.
+
{{domxref("DOMTokenList.remove()")}}
+
Removes token from the underlying string
+
{{domxref("DOMTokenList.replace()")}}
+
Replaces an existing token with a new token.
+
{{domxref("DOMTokenList.supports()")}}
+
Returns true if a given token is in the associated attribute's supported tokens.
+
{{domxref("DOMTokenList.toggle()")}}
+
Removes token from string and returns false. If token doesn't exist it's added and the function returns true
+
{{domxref("DOMTokenList.entries()")}}
+
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.
+
{{domxref("DOMTokenList.forEach()")}}
+
Executes a provided function once per DOMTokenList element.
+
{{domxref("DOMTokenList.keys()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.
+
{{domxref("DOMTokenList.values()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/dragevent/index.html b/files/de/web/api/dragevent/index.html new file mode 100644 index 0000000000..4f6ec7b562 --- /dev/null +++ b/files/de/web/api/dragevent/index.html @@ -0,0 +1,239 @@ +--- +title: DragEvent +slug: Web/API/DragEvent +translation_of: Web/API/DragEvent +--- +
{{APIRef("HTML DOM")}}
+ +

Das drag Event wird ausgelöst, wenn ein Element oder ein Text "gezogen" wird (alle paar hundert Millisekunden).

+ +

Allgemeine Informationen

+ +
+
Spezifikation
+
HTML5
+
Interface
+
DragEvent
+
Steigt auf
+
Ja
+
Abbrechbar
+
Ja
+
Ziel
+
Document, Element
+
Standard-Aktion
+
Mit der drag & drop Operation fortfahren.
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Beispiel

+ +
<div class="dropzone">
+    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+        This div is draggable
+    </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Event wird vom ge-drag-ten Element ausgelöst */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Speichern einer ref auf das drag-bare Element
+      dragged = event.target;
+      // Element halb-transparent machen
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // Transparenz zurücksetzen
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // Standard-Aktion verhindern um das drop-Event zu erlauben
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Hintergrund des möglichen Drop-Zeils anfärben, wenn das drag-bare Element auf das Ziel gezogen wird
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // Hintergrund des möglichen Drop-Ziels, wenn das drag-bare Element vom Ziel wieder weggezogen wird / verlässt
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Standard-Aktion verhindern (Bei einigen Elementen wäre das das Öffnen als Link)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Verwandte Events

+ +

 

+ + + +

 

diff --git a/files/de/web/api/element/classlist/index.html b/files/de/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4e1f9b25df --- /dev/null +++ b/files/de/web/api/element/classlist/index.html @@ -0,0 +1,300 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Das Element.classList ist eine read-only Eigenschaft, welche die aktuelle {{domxref("DOMTokenList")}} Sammlung der Klassen-Attribute des Elements zurückgibt.

+ +

Die Benutzung von classList ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via {{domxref("element.className")}}. 

+ +

Syntax

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses ist eine DOMTokenList, welche die Klassen-Attribute der elementNodeReference repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder elementClasses.length leer ist, wird 0 zurückgegeben. Element.classList selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden add() und remove() angewendet werden.

+ +

Methoden

+ +
+
add( String [, String [, ...]] )
+
Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.
+
remove( String [, String [, ...]] )
+
Ausgewählte Klassenwerte entfernen.
+ Bemerkung: Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.
+
item ( Number )
+
Rückgabewert nach Index in der Sammlung.
+
toggle ( String [, force] )
+
Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann entfernt es diese und gibt false zurück, wenn nicht, dann fügt es diese hinzu und gibt true zurück.
+
Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf true basiert, fügt es den angegebenen Klassenwert hinzu. Wenn es false auswertet, entfernt es ihn.
+
contains( String )
+
Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.
+
replace( oldClass, newClass )
+
Ersetzt einen vorhandenen Klassenwert.
+
+ +

Beispiele

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// Status zum Beginn: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// classList-API zum Entfernen und Ergänzen von Klassen nutzen
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// Wenn visible gesetzt ist entferne es, sonst füge es hinzu
+div.classList.toggle("visible");
+
+// Hinzufügen/Enfernen von visible, abhängig von der Bedingung, ob i kleiner 10 ist
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// Mehrere Klassen hinzufügen / entfernen
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// Mehrere Klassen mittels Spread-Syntax hinzufügen / entfernen
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// Klasse "foo" durch "bar" ersetzen
+div.classList.replace("foo", "bar");
+ +
+

Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Polyfill

+ +
// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+/**
+ * Element.prototype.classList for IE8/9, Safari.
+ * @author    Kerem Güneş <k-gun@mail.com>
+ * @copyright Released under the MIT License <https://opensource.org/licenses/MIT>
+ * @version   1.2
+ * @see       https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+;(function() {
+    // Helpers.
+    var trim = function(s) {
+            return s.replace(/^\s+|\s+$/g, '');
+        },
+        regExp = function(name) {
+            return new RegExp('(^|\\s+)'+ name +'(\\s+|$)');
+        },
+        forEach = function(list, fn, scope) {
+            for (var i = 0; i < list.length; i++) {
+                fn.call(scope, list[i]);
+            }
+        };
+
+    // Class list object with basic methods.
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className = trim(this.element.className +' '+ name);
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className = trim(this.element.className.replace(regExp(name), ' '));
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        item: function(i) {
+            return this.element.className.split(/\s+/)[i] || null;
+        },
+        // bonus
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    // Remove this if statements to override native classList.
+    if (!('classList' in Element.prototype)) {
+    // Use this if statement to override native classList that does not have for example replace() method.
+    // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility.
+    // if (!('classList' in Element.prototype) ||
+    //     !('classList' in Element.prototype && Element.prototype.classList.replace)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // For others replace() support.
+    if (window.DOMTokenList && !DOMTokenList.prototype.replace) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
toggle() method's second argument2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Multiple arguments for add() & remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
toggle method's second argument4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
multiple arguments for add() & remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Not supported for SVG elements.  See a report at Microsoft about that.
+ [2] Internet Explorer never implemented this. See a report at Microsoft about that.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/classname/index.html b/files/de/web/api/element/classname/index.html new file mode 100644 index 0000000000..1af7c129f0 --- /dev/null +++ b/files/de/web/api/element/classname/index.html @@ -0,0 +1,128 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

className holt und setzt den Wert des Attributs class eines bestimmten Elements.

+ +

Syntax

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Beispiel

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

Anmerkungen

+ +

Der Name className wird für diese Eigenschaft anstelle von class benutzt, um Komplikationen mit dem Schlüsselwort "class", welches in vielen Sprachen verwendet wird um das DOM zu verändern, zu vermeiden.

+ +

className kann auch eine Instanz von {{domxref("SVGAnimatedString")}} wenn das element ein {{domxref("SVGElement")}} ist. Es ist besser das Attribut className eines Elements zu ändern, in dem {{domxref("Element.getAttribute")}} verwendet beziehungsweise {{domxref("Element.setAttribute")}}, wenn man mit SVG Elementen arbeitet.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +

 

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Ursprüngliche Definition
+ +

Browserkompabilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunktionalitätChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunktionalitätAndroid webviewChrome für AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..736314305d --- /dev/null +++ b/files/de/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,62 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Die Methode Element.getBoundingClientRect()  gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.

+ +

Syntax

+ +
var domRect = element.getBoundingClientRect();
+
+ +

Rückgabe

+ +

Der zurückgegebene Wert ist ein DOMRect Objekt, welches die Vereinigungsmenge aller von getClientRects() zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.

+ +

Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften left, top, right ,bottom, x, y, width und height, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von width und height, sind realtiv zur linken oberen Ecke des Viewports.

+ +
+

Merke: {{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem DOMRect Objekt hinzu.

+
+ +

Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die top und left Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für top und left zurückgegeben.

+ +

Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo top und left den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.

+ +

Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die top und left Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind relativ zum Viewport und nicht absolut).

+ +

Will man die Position des  Rechtecks in Bezug auf die Linke/Obere Ecke des Dokumentes haben, was der absoluten Position des Rechteckes entspricht, muss man zu den top und left Positionen, die Werte von window.scrollX und window.scrollY, addieren.

+ +

Um Browserkompabilität zu gewährleisten, nutzen Sie window.pageXOffset und window.pageYOffset statt window.scrollY und window.scrollX. Sollten window.pageXOffset, window.pageYOffset, window.scrollX and window.scrollY undefined sein, nutzen Sie (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft and (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop.

+ +

Beispiel

+ +
// rect is a DOMRect object with four properties: left, top, right, bottom
+var rect = obj.getBoundingClientRect();
+
+ +

Browser compatibility

+ +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

Specification

+ + + +

Notes

+ +

getBoundingClientRect() wurde erstmals im DHTML Objektmodell von MS IE implementiert.

+ +

Der Rückgabewert von getBoundingClientRect() ist konstant, es können keine weiteren Eigenschaften hinzugefügt werden.

+ +

See also

+ + diff --git a/files/de/web/api/element/hasattribute/index.html b/files/de/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..991e9b9dcc --- /dev/null +++ b/files/de/web/api/element/hasattribute/index.html @@ -0,0 +1,129 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Die Methode Element.hasAttribute() nimmt einen String als Argument und gibt einen Boolean zurück. Der als Argument übergebene String spezifiziert das gemeinte Attribut und der Rückabe Wert gibt an, ob dieses Attribut in dem jeweiligen Element vorkommt . 

+ +

Syntax

+ +
var result = element.hasAttribute(name);
+
+ +
+
result
+
Rückgabewert, wahr oder falsch.
+
name
+
Ein String, der das jeweilige Attribut spezifiziert.
+
+ +

Beispiel

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // do something
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Notizen

+ +
{{DOMAttributeMethods}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Von {{SpecName('DOM3 Core')}}, verlegt von {{domxref("Node")}} nach {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Keine Veränderungen zu {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Initiale Definition.
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/de/web/api/element/index.html b/files/de/web/api/element/index.html new file mode 100644 index 0000000000..71975f163b --- /dev/null +++ b/files/de/web/api/element/index.html @@ -0,0 +1,522 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Interface +translation_of: Web/API/Element +--- +

{{ APIRef("DOM") }}

+ +

The Element interface represents an object of a {{domxref("Document")}}. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the {{domxref("HTMLElement")}} interface is the base interface for HTML elements, while the {{domxref("SVGElement")}} interface is the basis for all SVG elements.

+ +

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement it.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.attributes") }} {{readOnlyInline}}
+
Returns a {{ domxref("NamedNodeMap") }} that lists all attributes associated with the element.
+
{{ domxref("ParentNode.childElementCount") }}
+
Is a {{jsxref("Number")}} representing the number of child nodes that are elements.
+
{{ domxref("ParentNode.children") }}
+
Is a live {{ domxref("HTMLCollection") }} containing all child elements of the element, as a collection.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.
+
{{ domxref("Element.className") }}
+
Is a {{domxref("DOMString")}} representing the class of the element.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{ domxref("ParentNode.firstElementChild") }}
+
Is a {{ domxref("Element") }}, the first direct child element of an element, or null if the element has no child elements.
+
{{ domxref("Element.id") }}
+
Is a {{domxref("DOMString")}} representing the id of the element.
+
{{ domxref("Element.innerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element's content.
+
{{ domxref("ParentNode.lastElementChild") }}
+
Is a {{ domxref("Element") }}, the last direct child element of an element, or null if the element has no child elements.
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}
+
Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}
+
Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the top scroll offset the an element.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a{{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
...
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Returns a {{domxref("String")}} with the name of the tag for the given element.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("UndoManager")}} associated with the element.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +

Event handlers

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
…
+
{{ domxref("Element.onlostpointercapture") }}
+
…
+
{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}
+
Returns the event handling code for the wheel event.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Registers an event handler to a specific event type on the element.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
Returns the {{domxref("Element")}}, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}
+
…
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.
+
{{domxref("Element.find()")}}{{experimental_inline}}
+
...
+
{{domxref("Element.findAll()")}}{{experimental_inline}}
+
...
+
{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getAttribute()") }}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNS()") }}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Retrievse the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }} {{experimental_inline}}
+
...
+
{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getElementsByClassName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} that contains all descendant of the current element that posses the list of classes given in parameter.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{ domxref("Element.hasAttribute()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{ domxref("Element.querySelector()") }}
+
Returns {{ domxref("Node") }}...
+
{{ domxref("Element.querySelectorAll") }}
+
Returns a {{ domxref("NodeList") }}...
+
{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}
+
…
+
{{domxref("ChildNode.remove()")}}
+
Removes the element from the children list of its parent.
+
{{ domxref("Element.removeAttribute()") }}
+
Removes the named attribute from the current node.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Removes an event listener from the element.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Scrolls the page until the element gets into the view.
+
{{ domxref("Element.setAttribute()") }}
+
Sets the value of a named attribute of the current node.
+
{{ domxref("Element.setAttributeNS()") }}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Setw the node representation of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{domxref("Element.setPointerCapture()")}}
+
…
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimationPlayers() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 2')}}Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{domxref("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Removed the following methods: closest(), setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Removed the schemaTypeInfo property.
+ Modified the return value of getElementsByTag() and getElementsByTagNS().
+ Moved hasAttributes() form the Node interface to this one.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
children{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7.0 with a significant bug [1]
+ 9.0 according to the spec		{{CompatVersionUnknown}}{{CompatNo}}
childElementCount, nextElementSibling, previousElementSibling{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
firstElementChild, lastElementChild{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
classList{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}} {{CompatVersionUnknown}}{{CompatVersionUnknown}}
outerHTML {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clientLeft, clientTop {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getBoundingClientRect(), getClientRects() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector(), querySelectorAll()1.0{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
insertAdjacentHTML() {{experimental_inline}}1.0{{CompatGeckoDesktop("8")}}4.07.04.0 (527)
setCapture() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
oncopy, oncut, onpaste {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}} {{CompatNo}}
onwheel {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ongotpointercapture, onlostpointercapture, setPointerCapture(), and releasePointerCapture(){{CompatNo}}{{CompatNo}}10.0 {{property_prefix("MS")}}{{CompatNo}}{{CompatNo}}
matches() {{experimental_inline}}{{CompatVersionUnknown}} with the non-standard name webkitMatchesSelector{{CompatGeckoDesktop("1.9.2")}} with the non-standard name mozMatchesSelector
+ {{CompatGeckoDesktop("34")}} with the standard name		9.0 with the non-standard name msMatchesSelector11.5 with the non-standard name oMatchesSelector
+ 15.0 with the non-standard name webkitMatchesSelector		5.0 with the non-standard name webkitMatchesSelector
find() and findAll(){{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestPointerLock()16.0 {{property_prefix("webkit")}}, behind an about:flags
+ 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])		{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestFullscreen()14.0 {{property_prefix("webkit")}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}11.0 {{property_prefix("ms")}}12.10
+ 15.0 {{property_prefix("webkit")}}		5.1 {{property_prefix("webkit")}}
undoManager and undoScope{{CompatNo}}{{CompatVersionUnknown}} (behind the dom.undo_manager.enabled pref){{CompatNo}}{{CompatNo}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatGeckoDesktop("22")}}
+ Before this it was available via the {{domxref("Node")}} interface that any element inherits.		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoDesktop("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoMobile("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.

+ +

[2] Chrome 16 allowed webkitRequestPointerLock() only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value webkit-allow-pointer-lock is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.

diff --git a/files/de/web/api/element/innerhtml/index.html b/files/de/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..a5d3d3011d --- /dev/null +++ b/files/de/web/api/element/innerhtml/index.html @@ -0,0 +1,204 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

Die {{domxref("Element")}} Eigenschaft innerHTML ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.

+ +
Hinweis: Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen &, < oder > enthält, gibt innerHTML diese Zeichen als ihre entsprechende HTML-Entitäten "&amp;", "&lt;" bzw. "&gt;" zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.
+ +

Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.

+ +

Syntax

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Wert

+ +

Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von innerHTML festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in htmlString angegebenen HTML-Codes erstellt werden.

+ +

Exceptions

+ +
+
SyntaxError
+
Es wurde versucht, den Wert von innerHTML mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.
+
NoModificationAllowedError
+
Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.
+
+ +

Nutzungshinweise

+ +

Die innerHTML-Eigenschaft kann verwendet werden, um den aktuellen HTML-Quellcode der Seite einschließlich aller Änderungen zu überprüfen, die seit dem erstmaligen Laden der Seite vorgenommen wurden.

+ +

HTML-Inhalte eines Elements auslesen

+ +

Das Lesen von innerHTML bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.

+ +
let contents = myElement.innerHTML;
+ +

Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.

+ +
+

Hinweis: Das zurückgegebene HTML- oder XML-Fragment wird basierend auf dem aktuellen Inhalt des Elements generiert, sodass das Markup und Formatierung des zurückgegebenen Fragments wahrscheinlich nicht mit dem ursprünglichen Seiten-Markup übereinstimmt.

+
+ +

Inhalte eines Element ersetzen

+ +

Durch das Festlegen des Wertes von innerHTML können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.

+ +

Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:

+ +
document.body.innerHTML = "";
+ +

In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen "<" durch die HTML-Entität "&lt;" ersetzt, wodurch der HTML-Code im Wesentlichen in unformatierten Text umgewandelt wird. Dieses wird dann in ein Element {{HTMLElement("pre")}} eingeschlossen. Dann wird der Wert von innerHTML in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Unter der Haube

+ +

Was passiert genau, wenn Sie den Wert von innerHTML festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:

+ +
    +
  1. Der angegebene Wert wird als HTML oder XML analysiert (basierend auf dem Dokumenttyp), sodass ein {{domxref("DocumentFragment")}}-Objekt den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.
    2. +
  2. Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <template> durch das neue DocumentFragment ersetzt, welches in Schritt 1 erstellt wurde.
    3. +
  3. Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.
    4. +
+ +

Sicherheitsüberlegungen

+ +

Es ist nicht ungewöhnlich, dass innerHTML zum Einfügen von Text in eine Webseite verwendet wird. Es besteht jedoch die Möglichkeit, dass dies zu einem Angriffsvektor auf einer Website wird, wodurch ein potenzielles Sicherheitsrisiko entsteht.

+ +
const name = "John";
+// angenommen 'el' ist ein HTML DOM Element
+el.innerHTML = name; // in diesem Fall harmlos
+
+// ...
+
+name = "<script>alert('Ich bin John in einem störenden Alert!')</script>";
+el.innerHTML = name; // in diesem Fall harmlos
+ +

Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit innerHTML eingefügtes {{HTMLElement("script")}}-Tag nicht ausgeführt werden soll.

+ +

Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie innerHTML verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // zeigt den alert
+ +

Aus diesem Grund wird empfohlen, innerHTML nicht zum Einfügen von reinem Text zu verwenden. Verwenden Sie stattdessen {{domxref("Node.textContent", "textContent")}}. Der übergebene Inhalt wird nicht als HTML-Code analysiert, sondern als reiner Text eingefügt.

+ +
+

Warnung: Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von innerHTML höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. Wenn Sie beispielsweise innerHTML in einer Browsererweiterung verwenden und die Erweiterung bei addons.mozilla.org einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.

+
+ +

Beispiel

+ +

In diesem Beispiel wird mit innerHTML ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Logging mouse events inside this container...");
+
+ +

Die Funktion log() erstellt die Protokollausgabe, indem sie mithilfe von {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} die aktuelle Uhrzeit aus einem {{jsxref("Date")}}-Objekt abruft und einen String aus dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an die Box mit der Klasse "log" angehängt.

+ +

Wir fügen eine zweite Methode hinzu, die Informationen zu auf {{domxref("MouseEvent")}} basierenden Ereignissen protokolliert (z. B. {{event("mousedown")}}, {{event("click")}} und {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

Das HTML für unser Beispiel ist denkbar einfach.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Das {{HTMLElement("div")}} mit der Klasse "box" ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <div>, dessen Klasse "log" ist, ist der Container für den Protokolltext.

+ +

CSS

+ +

Das folgende CSS formatiert unseren Beispielinhalt.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Ergebnis

+ +

Der resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll anzeigen, indem Sie die Maus in das Feld hinein- und herausbewegen, darauf klicken und so weiter.

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..14f05ca474 --- /dev/null +++ b/files/de/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - .textContent() + - Geschwindigkeitsvorteil + - HTML einfügen + - Méthode + - Referenz +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

insertAdjacentHTML() interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.
+ Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer innerHTML Manipulation ergibt.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

position beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:

+ +
+
'beforebegin'
+
Vor dem element selbst.
+
'afterbegin'
+
Innerhalb des element, direkt vor dessen erstem Kind-Objekt. 
+
'beforeend'
+
Innerhalb des element, direkt nach dessen letztem Kind-Objekt.
+
'afterend'
+
Nach dem element selbst.
+
+ +

text ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.

+ +

Verdeutlichung der position Bezeichner

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Hinweis: Die beforebegin und afterend Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. 
+ +

Beispiel

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// Danach sieht die neue Struktur so aus:
+// <div id="one">one</div><div id="two">two</div>
+ +

Anmerkungen

+ +

Sicherheitsaspekte

+ +

Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). 

+ +

Für das Einfügen reinen Texts sollte statt insertAdjacentHTML besser node.textContent benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
BeschreibungStatusKommentar
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
grundsätzlich
+ unterstützt		1.0{{ CompatGeckoDesktop("8.0") }}4.07.04.0 (527)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
grundsätzlich
+ unterstützt		{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/queryselector/index.html b/files/de/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..a3cf7d9d89 --- /dev/null +++ b/files/de/web/api/element/queryselector/index.html @@ -0,0 +1,89 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef}}
+ +

Gibt das erste Unterelement des Elements, von dem es aufgerufen wird, zurück, auf das die angegebenen Selektoren zutreffen.

+ +

Syntax

+ +
element = baseElement.querySelector(selectors);
+
+ + + +

Beispiel

+ +

In diesem Beispiel wird das erste style Element aus dem body Element zurückgegeben, das den type text/css oder keinen type hat.

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Bemerkungen

+ +

Gibt null zurück, wenn keine Elemente gefunden werden, andernfalls das Element.

+ +

Eine SYNTAX_ERR Ausnahme tritt auf, wenn die angegebenen Selektoren ungültig sind.

+ +

querySelector() wurde in der WebApps API eingeführt.

+ +

Das Argument querySelector muss der CSS Syntax folgen. Siehe {{domxref("document.querySelector")}} für konkrete Beispiele.

+ +

Browserkompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserSupportAnmerkungen
Internet Explorer8Nur CSS 2.1 Selektoren (IE8)
Firefox (Gecko)3.5 (1.9.1) 
Opera10 
Chrome1 
Safari (webkit)3.2 (525.3)webk.it/16587
+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/element/queryselectorall/index.html b/files/de/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..009a105b89 --- /dev/null +++ b/files/de/web/api/element/queryselectorall/index.html @@ -0,0 +1,206 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - Méthode + - Referenz +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Summary

+ +

Gibt eine statische NodeList aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.

+ +

Syntax

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

wobei:

+ +
+
elementList
+
ist statische Node Liste [ NodeList[elements] ] mit element Objekten.
+
baseElement
+
ist ein element Objekt.
+
selectors
+
ist eine Gruppe von Selektoren die mit dem Element im DOM übereinstimmen soll. 
+
+ +

Beispiele

+ +

Dieses Beispiel gibt eine Liste der p Elementen im HTML body zurück:

+ +
let matches = document.body.querySelectorAll('p');
+
+ +

Dieses Beispiel gibt eine Liste der p Unter-Elementen eines Containers, dessen Überobjekt ein div mit der Klasse 'highlighted' ist:

+ +
let el = document.querySelector('#test');    //return an element with id='test'
+let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
+
+ +

Dieses Beispiel gibt eine Liste der iframe Elementen die ein data Attribut 'src' besitzen:

+ +
let matches = el.querySelectorAll('iframe[data-src]');
+
+ +

Bemerkungen

+ +

If the specified "selectors" are not found inside the DOM of the page, the method queryselectorAll returns an empty NodeList as specified below:

+ +
> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
+> [] //empty NodeList
+ +

querySelectorAll() was introduced in the WebApps API.

+ +

The string argument pass to querySelectorAll must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.

+ +

We could access a single item inside the NodeList in the following way:

+ +
let x = document.body.querySelectorAll('.highlighted');
+x.length; //return the size of x
+x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
+
+ +

We could iterate inside a NodeList with the construct for(....) {...} as in the following code:

+ +
 let x = document.body.querySelectorAll('.highlighted');
+ let index = 0;
+ for( index=0; index < x.length; index++ ) {
+       console.log(x[index]);
+ }
+ +

So in the above way, it is possible to manage and modify the behaviour of the page.

+ +

Quirks

+ +

querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +
let select = document.querySelector('.select');
+let inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In this example, when selecting .outer .inner in the context of .select, .inner is still found, even though .outer is not a descendant of the baseElement (.select).
+ querySelectorAll() only verifies that the last element in the selector is within the baseElement.

+ +

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:

+ +
let select = document.querySelector('.select');
+let inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1{{CompatGeckoDesktop("1.9.1")}}8103.2 (525.3)
:scope pseudo-class{{ CompatVersionUnknown }}32{{CompatNo}}15[1]7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
:scope pseudo-class{{ CompatUnknown }}32{{CompatNo}}{{CompatNo}}7.0
+
+ +

[1] Supported in Opera 15+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform features" flag in chrome://flags.

+ +

See also

+ + diff --git a/files/de/web/api/element/removeattribute/index.html b/files/de/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..91be13b037 --- /dev/null +++ b/files/de/web/api/element/removeattribute/index.html @@ -0,0 +1,42 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute entfernt ein Attribut vom gegebenen Element.

+ +

Syntax

+ +
element.removeAttribute(attrName);
+
+ + + +

Beispiel

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// now: <div id="div1" width="200px">
+
+ +

Anmerkungen

+ +

Man sollte removeAttribute verwenden, statt den Attributswert auf null zu setzen (mit setAttribute).

+ +

Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.

+ +

{{ DOMAttributeMethods() }}

+ +

Spezifikation

+ +

DOM Level 2 Core: removeAttribute (eingeführt in DOM Level 1 Core)

diff --git a/files/de/web/api/element/requestfullscreen/index.html b/files/de/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..01e207e00a --- /dev/null +++ b/files/de/web/api/element/requestfullscreen/index.html @@ -0,0 +1,118 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Die Funktion Element.requestFullscreen() sendet eine asynchrone Anfrage, um das Element in Vollbild darzustellen.

+ +

Es ist nicht garantiert, dass das Element in Vollbild angezeigt werden wird. Wenn die Berechtigung dazu erteilt wird, erhält das Dokument ein {{event("fullscreenchange")}} Event, um es wissen zu lassen, dass nun etwas in Vollbild angezeigt wird. Wird die Berechtigung jedoch verweigert, erhält das Dokument ein {{event('fullscreenerror')}} Event.

+ +
+

Nur Elemente im HTML Namespace (Standard HTML Elemente), plus die {{HTMLElement("svg")}} und {{HTMLElement("math")}} Elemente, welche sich im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut befinden, können im Vollbildmodus angezeigt werden. Das bedeutet, dass ein {{HTMLElement('frame')}} oder ein {{HTMLElement('object')}} dies nicht kann.

+
+ +

Syntax

+ +
Element.requestFullscreen();
+
+ +

Beispiel

+ +

Bevor requestFullScreen() aufgerufen wird, sollte man Eventhandler für die {{event("fullscreenchange")}} und {{event("fullscreenerror")}} Events erstellen, damit man erfährt, wenn das Dokument in den Vollbildmodus wechselt (oder die entsprechende Berechtigung dazu fehlt).

+ +

tbd

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Grundlegene Unterstütung{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegene Unterstütung{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Auch implementiert als webkitRequestFullScreen.

+ +

[2] Implementiert als mozRequestFullScreen (man beachte das große S für Screen). Vor Firefox 44 erlaubte Gecko Elementen innerhalb eines {{HTMLElement('frame')}} oder {{HTMLElement('object')}} fälschlicherweise in den Vollbildmodus zu wechseln. Ab Firefox 44 wurde dieses Verhalten behoben: nur Elemente im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut können in den Vollbildmodus wechseln.

+ +

[3] Siehe Dokumentation auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/scrollintoview/index.html b/files/de/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..ccbcc3e6ea --- /dev/null +++ b/files/de/web/api/element/scrollintoview/index.html @@ -0,0 +1,85 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - API + - CSSOM Views + - Experimentell + - Methode(2) + - Reference +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}{{SeeCompatTable}}
+ +

Die Methode Element.scrollIntoView() scrolled das Element in den sichtbaren Bereich des Browsers.

+ +

Syntax

+ +
element.scrollIntoView(); // Gleich mit element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Boolean Argument
+element.scrollIntoView(scrollIntoViewOptions); // Object Argument
+
+ +

Parameter

+ +
+
alignToTop
+
Dies ist ein {{jsxref("Boolean")}} Wert: +
    +
  • Bei true wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.
    • +
  • Bei false wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.
    • +
+
+
scrollIntoViewOptions
+
Ein Boolean oder Objekt mit den folgenden Optionen:
+
+ 
{
+    behavior: "auto"  | "smooth",
+    block:    "start" | "end",
+}
+
+
Wenn der Wert ein Boolean, enspricht true {block: "start"} und false {block: "end"}.
+
+ +

Beispiel

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Notizen

+ +

Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.

+ +

Technische Daten

+ + + + + + + + + + + + + + +
SpecificationStatusKommentar
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Element.scrollIntoView")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/scrollleft/index.html b/files/de/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..90c28a203e --- /dev/null +++ b/files/de/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

Die Element.scrollLeft Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.

+ +

Beachten Sie:  Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert rtl (right-to-left) aufweist,  ist scrollLeft 0, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts),  und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.

+ +

Syntax

+ +
// Liefert die Anzahl der gescrollten Pixel
+var sLeft = element.scrollLeft;
+
+ +

sLeft ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die element nach links gescrollt ist.

+ +
// Set the number of pixels scrolled
+element.scrollLeft = 10;
+
+ +

scrollLeft kann als Integerwert gesetzt werden. Dabei gilt:

+ + + +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Lorem ipsum dolor sit amet.</div>
+    </div>
+    <button id="slide" type="button">Slide</button>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Browserkompatibilität

+ +

{{Compat("api.Element.scrollLeft")}}

diff --git a/files/de/web/api/element/scrollwidth/index.html b/files/de/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..2968c3ea64 --- /dev/null +++ b/files/de/web/api/element/scrollwidth/index.html @@ -0,0 +1,49 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - Eigenschaft + - Referenz +translation_of: Web/API/Element/scrollWidth +--- +
{{ APIRef("DOM") }}
+ +

Die schreibgeschützte Eigenschaft Element.scrollWidth liefert entweder die Breite (in Pixeln) des Inhaltes eines Elements oder die Breite des Elementes selbst, je nachdem, welche von beiden größer ist. Ist der Inhalt eines Elementes breiter als sein Inhaltsbereich (z.B. wenn Bildlaufleisten mit eingeblendet werden), dann ist die scrollWidth des Elementes größer als seine clientWidth.

+ +
+

Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntax

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth ist die Breite des Inhaltes des Elementes element in Pixeln.

+ +

Beispiel

+ +
<div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">
+  FooBar-FooBar-FooBar
+</div>
+<br>
+<input
+  type="button"
+  value="Show scrollWidth"
+  onclick="alert(document.getElementById('aDiv').scrollWidth);"
+>
+ +

Spezifikation

+ +

Die Eigenschaft scrollWidth ist im CSSOM View Module definiert.

+ +

Referenzen

+ +

{{Compat("api.Element.scrollWidth")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/setattribute/index.html b/files/de/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..292dd24a6f --- /dev/null +++ b/files/de/web/api/element/setattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - Attribut + - Methode(2) + - Méthode +translation_of: Web/API/Element/setAttribute +--- +
{{APIRef("DOM")}}
+ +

Fügt dem angegebenen Element ein Attribut hinzu oder ändert den Wert eines vorhandenen Attributs.

+ +

Syntax

+ +
element.setAttribute(name, value);
+
+ + + +

Beispiel

+ +
var d = document.getElementById("d1");
+
+d.setAttribute("align", "center");
+
+ +

Anmerkungen

+ +

Wenn setAttribute auf einem HTML-Element in einem HTML-Dokument aufgerufen wird, wird der Name des Attributes in Kleinbuchstaben umgewandelt.

+ +

Wenn das angegebene Attribut bereits existiert, ersetzt setAttribute den alten Wert. Falls das Attribut nicht existiert, wird es erzeugt.

+ +

Obwohl getAttribute() für fehlende Attribute null liefert, sollte man removeAttribute() statt elt.setAttribute(attr, null) verwenden um ein Attribut zu entfernen.

+ +

setAttribute() zu benutzen, um einige XUL-Attribute (vor allem value) zu ändern, verhält sich inkonsistent, da das Attribut nur den Standardwert spezifiziert. Um den aktuellen Wert zu ändern sollte man die Eigenschaften direkt verwenden. Zum Beispiel elt.value statt elt.setAttribute('value', val).

+ +
{{DOMAttributeMethods}}
+ +

Spezifikation

+ + diff --git a/files/de/web/api/event/bubbles/index.html b/files/de/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..286bac6a23 --- /dev/null +++ b/files/de/web/api/event/bubbles/index.html @@ -0,0 +1,59 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Zusammenfassung

+ +

Gibt an, ob ein Event in der DOM-Hierarchie nach oben propagiert wird oder nicht.

+ +

Syntax

+ +
event.bubbles
+ +

Wert

+ +

Ein {{domxref("Boolean")}}, welches true ist, falls das Event durch die DOM-Hierarchie nach oben propagiert wird.

+ +

Beispiel

+ +
 function goInput(e) {
+  // checks bubbles and
+  if (!e.bubbles) {
+     // passes event along if it's not
+     passItOn(e);
+  }
+  // already bubbling
+  doOutput(e)
+}
+
+ +
+

Hinweis: Nur bestimmte Events können weiter nach oben propagiert werden. Die Events, die dazu in der Lage sind, haben den Wert true,  für die hier beschriebene Eigenschaft.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}{{ Spec2('DOM2 Events') }}Initial definition.
diff --git a/files/de/web/api/event/event/index.html b/files/de/web/api/event/event/index.html new file mode 100644 index 0000000000..ee30a2064c --- /dev/null +++ b/files/de/web/api/event/event/index.html @@ -0,0 +1,72 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

Der Konstruktor: Event()  erstellt ein neues {{domxref("Event")}}.

+ +

Syntax

+ +
 event = new Event(typeArg, eventInit);
+ +

Values

+ +
+
typeArg
+
ist ein {{domxref("DOMString")}} und bestimmt den Namen des Events.
+
eventInit {{optional_inline}}
+
+ +
+
ist ein {{jsxref("Object")}} und beinhaltet folgende Felder: +
    +
  • "bubbles": (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event gebubbled werden soll. Der Standardwert ist false.
    • +
  • "cancelable": (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event abgebrochen werden kann. Der Standardwert false.
    • +
  • "composed": (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event auch außerhalb eines Shadow-Root-Elements empfangen werden kann. Der Standardwert ist false. 
    • +
+
+
+ +

Example

+ +
// create a look event that bubbles up and cannot be canceled
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// event can be dispached from any elmement, not only the document
+myDiv.dispatchEvent(evt);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Event.Event")}}

+ +

See also

+ + diff --git a/files/de/web/api/event/index.html b/files/de/web/api/event/index.html new file mode 100644 index 0000000000..0962ba6de2 --- /dev/null +++ b/files/de/web/api/event/index.html @@ -0,0 +1,253 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - TopicStub + - UI +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

Das Event Interface repräsentiert jegliches Ereignis, das im DOM auftritt.

+ +

Ein Ereignis kann durch Benutzerinteraktion ausgelöst werden, z.B das Klicken einer Maustaste oder Eingaben der Tastatur, oder durch eine API generiert werden um den Fortschritt eines asynchronen Prozesses zu repräsentieren. Es kann auch durch ein Programm ausgelöst werden, beispielsweise indem die HTMLElement.click() Method eines Elements aufgerufen wird, oder indem ein Ereignis definiert wird und es danach mithilfe von EventTarget.dispatchEvent() an ein Ziel versandt wird.

+ +

Es gibt eine Vielzahl verschiedener Typen von Ereignissen, von denen manche erweiterte Schnittstellen basieren auf dem zentralen Event Interface benutzen. Event beinhaltet alle Attribute und Methoden, die allen Ereignissen gemein sind.

+ +

Viele DOM-Element können für das Empfangen dieser Events konfiguriert werden und rufen Code auf, um sie zu behandeln. Event-Handler werden normalerweise mit unterschiedlichen HTML-Elementen (so wie <button>, <div>, <span>, etc.) verbunden, durch den Aufruf von EventTarget.addEventListener(). Dies ersetzt größtenteils die alten HTML Event Handler Attribute. Die neueren Event-Handler können außerdem nötigenfalls mithilfe von removeEventListener() wieder entfernt werden.

+ +
+

Note: Ein Element kann mehrere solcher Handler besitzen, sogar für das selbe Ereignis—so können sie verschiedene, unabhängige Code-Module angebracht werden, jeweils für deren unabhängige Zwecke. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodel, die beide Videowiedergabe überwachen.)

+
+ +

Gitb es viele verschachtelte Element, jedes mit eigenen Event-Handlern, kann das Verarbeiten von Ereignissen siehr schnell komplex werden—im Speziellen wenn ein Elternelement die selben Ereignissen wie sein Kindelement empfängt, weil sie sich überlappen und so Ereignisse technisch gesehen in beiden geschehen. Die Behandlungsreihenfolge solcher Ereignisse hängen von Event bubbling and capture Konfigurationen jedes ausgelösten Event-Handlers ab.

+ +

Interfaces based on Event

+ +

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".

+ +
+ +
+ +

Constructor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Creates an Event object, returning it to the caller.
+
+ +

Properties

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
A Boolean indicating whether the event bubbles up through the DOM or not.
+
{{domxref("Event.cancelBubble")}}
+
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
A Boolean indicating whether the event is cancelable.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Indicates which phase of the event flow is being processed.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The explicit original target of the event (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The original target of the event, before any retargetings (Mozilla-specific).
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
A non-standard alternative (from old versions of Microsoft Internet Explorer) to {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}}.
+
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
+
A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
A reference to the target to which the event was originally dispatched.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
The time at which the event was created, in milliseconds. By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
The name of the event (case-insensitive).
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent)
+
+ +

Methods

+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete, use {{domxref("event.stopPropagation")}} instead.
+
{{domxref("Event.preventDefault()")}}
+
Cancels the event (if it is cancelable).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)
+
{{domxref("Event.stopPropagation()")}}
+
Stops the propagation of events further along in the DOM.
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
cancelBubble defined on Event{{CompatUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
cancelBubble defined on Event{{CompatUnknown}}{{CompatGeckoMobile(53)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Previous to Firefox 52, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.

+ +

See also

+ + diff --git a/files/de/web/api/eventlistener/index.html b/files/de/web/api/eventlistener/index.html new file mode 100644 index 0000000000..c7eb012670 --- /dev/null +++ b/files/de/web/api/eventlistener/index.html @@ -0,0 +1,48 @@ +--- +title: EventListener +slug: Web/API/EventListener +tags: + - API + - DOM + - DOM Events +translation_of: Web/API/EventListener +--- +

{{APIRef("DOM Events")}}

+ +

Methodenübersicht

+ + + + + + + +
void handleEvent (in Event event);
+ +

Methoden

+ +

handleEvent()

+ +

Diese Methode wird immer aufgerufen, wenn ein Event auftritt, welche im EventListener Interface registriert wurden.

+ +
void handleEvent(
+  in Event event
+);
+
+ +
Parameter
+ +
+
event
+
Das DOM-{{ domxref("Event") }} das zu registrieren ist.
+
+ +

Anmerkungen

+ +

Da das Interface mit dem [function] Flag gekennzeichnet ist, implementieren alle JavaScript-Funktionen dieses automatisch. Das Aufrufen von {{ manch("handleEvent") }} einer solchen Implementierung ruft automatisch diese Funktion auf.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/eventsource/index.html b/files/de/web/api/eventsource/index.html new file mode 100644 index 0000000000..7942b2df95 --- /dev/null +++ b/files/de/web/api/eventsource/index.html @@ -0,0 +1,126 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Interface + - Referenz + - Server-sent events +translation_of: Web/API/EventSource +--- +

{{APIRef("Websockets API")}}

+ +

Das EventSource-Interface erlaubt das Empfangen von Server-Sent Events. Es erlaubt den Zugriff auf Events im text/event-stream Format über eine persistente HTTP-Verbindung.

+ +
+
+ +

Properties

+ +

Diese Interface erbt weitere Properties von seinem Parent-Object {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.onerror")}}
+
Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird aufgerufen, wenn ein Fehler auftritt und das {{event("error")}}-Event auf diesem Object ausgelöst wird.
+
{{domxref("EventSource.onmessage")}}
+
Ist eine {{domxref("EventHandler")}}-Instanz. Diese wir aufgerufen, wenn ein {{event("message")}}-event empfangen wird. Dies ist immer dann der Fall, wenn die Event-Quelle eine neue Nachricht erzeugt hat.
+
{{domxref("EventSource.onopen")}}
+
Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird immer dann aufgerufen, wenn die Verbindung geöffnet wurde, also ein {{event("open")}}-Event empfangen wurde.
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Ein unsigned short, welcher den aktuellen Status der Verbindung repräsentiert. Gültige werte sind CONNECTING (0), OPEN (1), or CLOSED (2).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Ein {{domxref("DOMString")}}, welcher die URL der Event-Quelle beinhaltet.
+
+ +

Methods

+ +

Diese Interface erbt weitere Methoden von seinem Parent-Object {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Schließt die Verbindung, soweit geöffnet, und setzt den Status (readyState) auf CLOSED. Auf bereits geschlossenen Verbindungen hat diese Methode keinen Effekt.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}}
+ + + +

Browser Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis-Support9{{ CompatGeckoDesktop("6.0") }}{{CompatUnknown}}115
CORS-Support26{{ CompatGeckoDesktop("11.0") }}{{CompatUnknown}}12{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis-Support{{ CompatAndroid("4.4") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/eventtarget/index.html b/files/de/web/api/eventtarget/index.html new file mode 100644 index 0000000000..3ed264119e --- /dev/null +++ b/files/de/web/api/eventtarget/index.html @@ -0,0 +1,174 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API + - DOM + - DOM Events + - Interface + - NeedsTranslation + - TopicStub +translation_of: Web/API/EventTarget +--- +

{{ApiRef("DOM Events")}}

+ +

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

+ +

{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.

+ +

Many event targets (including elements, documents, and windows) also support setting event handlers via on... properties and attributes.

+ +

Methods

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler of a specific event type on the EventTarget.
+
{{domxref("EventTarget.removeEventListener()")}}
+
Removes an event listener from the EventTarget.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Dispatch an event to this EventTarget.
+
+ +

Additional methods for Mozilla chrome code

+ +

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

+ + + +

Example:

+ +

Simple implementation of EventTarget

+ +
var EventTarget = function() {
+  this.listeners = {};
+};
+
+EventTarget.prototype.listeners = null;
+EventTarget.prototype.addEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = [];
+  }
+  this.listeners[type].push(callback);
+};
+
+EventTarget.prototype.removeEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[type];
+  for (var i = 0, l = stack.length; i < l; i++) {
+    if (stack[i] === callback){
+      stack.splice(i, 1);
+      return;
+    }
+  }
+};
+
+EventTarget.prototype.dispatchEvent = function(event) {
+  if (!(event.type in this.listeners)) {
+    return true;
+  }
+  var stack = this.listeners[event.type];
+  event.target = this;
+  for (var i = 0, l = stack.length; i < l; i++) {
+    stack[i].call(this, event);
+  }
+  return !event.defaultPrevented;
+};
+
+ +

{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.071.0[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.06.01.0
+
+ +

[1] window.EventTarget does not exist.

+ +

See Also

+ + diff --git a/files/de/web/api/federatedcredential/index.html b/files/de/web/api/federatedcredential/index.html new file mode 100644 index 0000000000..1d7569e449 --- /dev/null +++ b/files/de/web/api/federatedcredential/index.html @@ -0,0 +1,125 @@ +--- +title: FederatedCredential +slug: Web/API/FederatedCredential +tags: + - API + - Föderierte Zugangsdaten + - Schnittstelle + - Zugangsdaten +translation_of: Web/API/FederatedCredential +--- +

{{SeeCompatTable}}{{APIRef("Credential Management API")}}

+ +

Die FederatedCredential Schnittstelle der Credential Management API stellt Informationen über Zugangsdaten eines Anbieters föderierter Identitäten bereit. Ein Anbieter föderierter Identitäten ist ein Gebilde, dem eine Webseite vertraut, eine Nutzerin korrekt zu identifizieren und eine API für diesen Zweck bereit stellt. OpenID Connect ist ein Beispiel für ein Framework für Anbieter föderierter Identitäten.

+ +

In Brwosern, die dies unterstützen, kann eine Instanz dieser Schnittstelle in der credential Funktions des init Objekt für globales {{domxref('fetch')}} mitgegeben werden.

+ +
+
{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
+
Erstellt ein neues FederatedCredential Objekt.
+
+ +

Eigenschaften

+ +

Erbt Eigenschaften von seinem Vorfahren, {{domxref("Credential")}}.

+ +
+
{{domxref("FederatedCredential.provider")}} {{readonlyInline}}
+
Gibt einen {{domxref("USVString")}} zurück, der den Anbieter föderierter Identitäten eines Satzes von Zugangsdaten enthält.
+
+ +

Event-Handler

+ +

Keine.

+ +

Methoden

+ +

Keine.

+ +

Beispiele

+ +
var cred = new FederatedCredential({
+  id: id,
+  name: name,
+  provider: 'https://account.google.com',
+  iconURL: iconUrl
+});
+
+// Store it
+navigator.credentials.store(cred)
+  .then(function() {
+  // Mach etwas anderes.
+});
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Initiale Definition.
+ +

Browserkompabilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung +

{{CompatChrome(51.0)}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatChrome(51.0)}}{{CompatChrome(51.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/de/web/api/fetch_api/index.html b/files/de/web/api/fetch_api/index.html new file mode 100644 index 0000000000..d45285bcd1 --- /dev/null +++ b/files/de/web/api/fetch_api/index.html @@ -0,0 +1,84 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +
{{DefaultAPISidebar("Fetch API")}}
+ +

Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen (auch über das Netzwerk). Wer schon einmal mit {{DOMxRef("XMLHttpRequest")}} gearbeitet hat wird Ähnlichkeiten erkennen. Die neue API bietet jedoch einen ganzen Satz leistungsfähigerer und flexiblerer Funktionen.

+ +

Konzepte und Verwendung

+ +

Fetch bietet eine generische Definition von {{DOMxRef("Request")}} und {{DOMxRef("Response")}} Objekten (und anderen Dingen, die mit Anfragen über ein Netzwerk zu tun haben). Dadurch können sie überall dort eingesetzt werden, wo sie in Zukunft benötigt werden, sei es für Service Worker, die Cache-API und andere ähnliche Dinge, mit denen Anfragen und Antworten abgewickelt oder geändert werden, oder in jedem Anwendungsfall, für den Sie möglicherweise eigene Antworten programmatisch erstellen müssen.

+ +

Sie enthält auch eine Definition für verwandte Konzepte wie CORS und die HTTP-Origin-Semantik, die ihre separaten Definitionen an anderer Stelle ersetzen.

+ +

Verwenden Sie zum Erstellen einer Anfrage und zum Abrufen einer Ressource die Methode {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}. Es ist in mehreren Schnittstellen implementiert, insbesondere {{DOMxRef("Window")}} und {{DOMxRef("WorkerGlobalScope")}}. Dadurch ist es in nahezu jedem Kontext verfügbar, in dem Sie Ressourcen abrufen möchten.

+ +

Die Methode fetch() nimmt ein obligatorisches Argument entgegen, den Pfad zu der Ressource, die Sie abrufen möchten. Sie gibt ein {{DOMxRef("Promise")}} zurück, das in die {{DOMxRef("Response")}} dieser Anfrage aufgelöst wird, unabhängig davon, ob sie erfolgreich ist oder nicht. Sie können optional auch ein init Objekt mit Optionen als zweites Argument übergeben (siehe {{DOMxRef("Request")}}).

+ +

Nachdem eine {{DOMxRef("Response")}} abgerufen wurde, stehen eine Reihe von Methoden zur Verfügung, mit denen der Antwort-Inhalt (Body) definiert werden kann und wie er verarbeitet werden soll (siehe {{DOMxRef("Body")}}).

+ +

Sie können eine Anfrage und Antwort direkt erstellen, indem Sie die Konstruktoren {{DOMxRef("Request.Request", "Request()")}} und {{DOMxRef("Response.Response", "Response()")}} verwenden, was Sie aber wahrscheinlich in den seltensten Fällen tun werden. Stattdessen werden diese eher als Ergebnis anderer API-Aktionen erstellt (z. B. durch {{DOMxRef("FetchEvent.respondWith()")}} von Service Workern).

+ +
+

Hinweis: Erfahren Sie mehr über die Verwendung der Funktionen der Fetch API in der Verwendung von Fetch und lernen Sie die Grundkonzepte von Fetch.

+
+ +

Einen Abruf abbrechen

+ +

Browser haben begonnen, experimentelle Unterstützung für die Schnittstellen {{DOMxRef("AbortController")}} und {{DOMxRef("AbortSignal")}} hinzuzufügen (auch Abort API genannt), die den Abbruch von Operationen durch Fetch und XHR ermöglichen, sofern diese noch nicht abgeschlossen sind. Weitere Informationen finden Sie auf den Schnittstellenseiten.

+ +

Fetch Interfaces

+ +
+
{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}
+
Die fetch() Methode zum Abrufen einer Ressource.
+
{{DOMxRef("Headers")}}
+
Stellt die Antwort-/Anfrageheader dar, damit Sie sie abfragen und je nach Ergebnis unterschiedliche Aktionen ausführen können.
+
{{DOMxRef("Request")}}
+
Stellt eine Ressourcenanfrage dar.
+
{{DOMxRef("Response")}}
+
Stellt die Antwort auf eine Anfrage dar.
+
+ +

Fetch mixin

+ +
+
{{DOMxRef("Body")}}
+
Stellt Methoden bereit, die sich auf den Hauptteil (Body) der Antwort/Anfrage beziehen, sodass Sie den Inhaltstyp angeben können und wie dieser behandelt werden soll.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fetch")}}{{Spec2("Fetch")}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/filename/index.html b/files/de/web/api/file/filename/index.html new file mode 100644 index 0000000000..7dbf4f7559 --- /dev/null +++ b/files/de/web/api/file/filename/index.html @@ -0,0 +1,35 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +tags: + - DOM + - Files +translation_of: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

Returns the name of the file. For security reasons the path is excluded from this property.

+ +
This property is deprecated. Use {{domxref("File.name")}} instead.
+ +

Syntax

+ +
var name = instanceOfFile.fileName
+ +

Value

+ +

A string

+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/file/filesize/index.html b/files/de/web/api/file/filesize/index.html new file mode 100644 index 0000000000..0c91c5f739 --- /dev/null +++ b/files/de/web/api/file/filesize/index.html @@ -0,0 +1,36 @@ +--- +title: File.fileSize +slug: Web/API/File/fileSize +tags: + - DOM + - Files + - Property +translation_of: Web/API/File/fileSize +--- +

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

Returns the size of a file in bytes.

+ +
This property is deprecated. Use {{domxref("Blob.size")}} instead.
+ +

Syntaxe

+ +
var size = instanceOfFile.fileSize
+ +

Value

+ +

A number

+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/file/getastext/index.html b/files/de/web/api/file/getastext/index.html new file mode 100644 index 0000000000..fefda6647a --- /dev/null +++ b/files/de/web/api/file/getastext/index.html @@ -0,0 +1,78 @@ +--- +title: File.getAsText() +slug: Web/API/File/getAsText +tags: + - DOM + - Files +translation_of: Web/API/File/getAsText +--- +

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

The getAsText method provides the file's data interpreted as text using a given encoding.

+ +
+

Note: This method is obsolete; you should use the {{domxref("FileReader")}} method {{domxref("FileReader.readAsText()","readAsText()")}} instead.

+
+ +

Syntaxe

+ +
var str = instanceOfFile.getAsText(encoding);
+ +

Parameters

+ +
+
encoding
+
A string indicating the encoding to use for the returned data. If this string is empty, UTF-8 is assumed.
+
+ +

Returns

+ +

A string containing the file's data interpreted as text in the specified encoding.

+ +

Example

+ +
// fileInput is a HTMLInputElement: 
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// object for allowed media types
+var accept = {
+  binary : ["image/png", "image/jpeg"],
+  text   : ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i < files.length; i++) {
+  file = files[i];
+
+  // if file type could be detected
+  if (file !== null) {
+    if (accept.text.indexOf(file.mediaType) > -1) {
+      // file is of type text, which we accept
+      // make sure it's encoded as utf-8
+      var data = file.getAsText("utf-8");
+      // modify data with string methods
+
+    } else if (accept.binary.indexOf(file.mediaType) > -1) {
+      // binary
+    }
+  }
+}
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/file/index.html b/files/de/web/api/file/index.html new file mode 100644 index 0000000000..17fe3b3ff7 --- /dev/null +++ b/files/de/web/api/file/index.html @@ -0,0 +1,146 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - DOM + - Files +translation_of: Web/API/File +--- +
{{APIRef }}
+ +

DasFile Interface stellt Informationen über Dateien bereit und erlaubt den Zugriff auf deren Inhalt.

+ +

File werden generell von einem {{domxref("FileList")}} Objekt als das Ergebnis einer Benutzerauswahl von Dateien über ein {{ HTMLElement("input") }} Element, von einem DataTransfer Objekt eines Drag-and-Drop-Vorgangs, oder von der mozGetAsFile() API eines {{ domxref("HTMLCanvasElement") }} zurückgegeben. In Gecko ist es von privilegiertem Code aus möglich, den Konstruktor direkt mit einem String Pfad oder einem {{interface("nsIFile")}} aufzurufen. Siehe Using the DOM File API in chrome code für weitere Details.

+ +

Die Dateireferenz kann nach der Formularübermittlung gespeichert werden, während der Benutzer über keine Internetverbindung verfügt. Somit können die Daten empfangen und hochgeladen werden, sobald die Internetverbindung wiederhergestellt ist.

+ +

Properties

+ +

DasFile Interface erbt ebenso von dem {{domxref("Blob")}} Interface.

+ +
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
Das Date der letzten Veränderung der Datei, referenziert durch das File Objekt.
+
{{domxref("File.name")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}
+
Der Name der Datei, referenziert durch das File Objekt.
+
{{domxref("File.fileName")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}
+
Der Name der Datei, referenziert durch das File Objekt.
+
{{domxref("File.fileSize")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}
+
Die Größe der Datei in Bytes.
+
+ +

Methods

+ +

The File interface also inherits methods from the {{domxref("Blob")}} interface.

+ +
+
{{domxref("File.getAsBinary()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}
+
Returns a string containing the file's data in raw binary format.
+
{{domxref("File.getAsDataURL()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}
+
A string containing the file's data encoded as a data: URL.
+
{{domxref("File.getAsText()","File.getAsText(string encoding)")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}
+
Returns the file's contents as a string in which the file's data is interpreted as text using a given encoding.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{CompatGeckoDesktop("1.9")}} (non standard)
+ {{CompatGeckoDesktop("7")}} (standard)		10.011.56.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
basic support{{CompatNo}}25{{CompatNo}}11.16.0
+
+ +

Implementation notes

+ +

Gecko notes

+ + + +

Chrome Code - Scope Availability

+ +

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['File']);
+
+ +

URL is available in Worker scopes.

+ +

See also

+ + diff --git a/files/de/web/api/file/name/index.html b/files/de/web/api/file/name/index.html new file mode 100644 index 0000000000..ffdb12db0f --- /dev/null +++ b/files/de/web/api/file/name/index.html @@ -0,0 +1,104 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - DOM + - Files +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

Gibt den Namen der File zurück. Aus Sicherheitsgründen wird der Pfad der Datei nicht mit zurückgegeben.

+ +

Syntax

+ +
var name = instanceOfFile.name
+ +

Value

+ +

Ein string, der den Namen der File ohne Pfad beinhaltet, bspw. "My Resume.rtf".

+ +

Beispiel

+ +
// fileInput is a HTMLInputElement: 
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (simliar to NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  alert("Filename " + files[i].name);
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#file-attrs', 'name')}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.name13.0{{CompatGeckoDesktop("1.9.2")}}10.016.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.name{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/typ/index.html b/files/de/web/api/file/typ/index.html new file mode 100644 index 0000000000..28c57a4cb1 --- /dev/null +++ b/files/de/web/api/file/typ/index.html @@ -0,0 +1,65 @@ +--- +title: File.type +slug: Web/API/File/Typ +translation_of: Web/API/File/type +--- +
{{APIRef("File API")}}
+ +

Gibt den Internet Media Typ (MIME) einer Datei zurück, welche durch ein {{domxref("File")}} Objekt dargestellt wird.

+ +

Syntax

+ +
var name = file.type;
+ +

Wert

+ +

Eine Zeichenkette, welche den Internet Media Typ (MIME) enthält und den Typ der Datei angibt, zum Beispiel "image/png" für ein PNG Bild

+ +

Beispiel

+ +
<input type="file" multiple onchange="showType(this)">
+
+ +
function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}
+ +

Hinweis: Basierend auf der aktuellen Implementierung, lesen Browser nicht wirklich den Bytestrom einer Datei, um ihren Medientyp zu bestimmen. Es wird aufgrund der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wird, würde "text/plain" und nicht "image/png" ergeben. Darüber hinaus ist file.type im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Seltene Dateierweiterungen würden eine leere Zeichenkette zurückgeben. Die Client-Konfiguration (z.B. die Windows-Registrierung) kann auch bei gängigen Typen zu unerwarteten Werten führen. Entwicklern wird empfohlen, sich nicht auf diese Eigenschaft als einziges Validierungsschema zu verlassen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Initiale Definition.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.File.type")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html new file mode 100644 index 0000000000..c44ac4b9df --- /dev/null +++ b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html @@ -0,0 +1,512 @@ +--- +title: Zugriff auf Dateien von Webapplikationen +slug: Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen +translation_of: Web/API/File/Using_files_from_web_applications +--- +

Mithilfe der File API, welche mit HTML5 zum DOM hinzugefügt wurde, ist es nun für Webinhalte möglich den Benutzer lokale Dateien auswählen zu lassen und den Inhalt dieser Dateien auszulesen. Die Auswahl kann entweder durch das HTML Element {{ HTMLElement("input") }} oder durch Drag and Drop erfolgen.

+ +

Es ist auch möglich die DOM File API von Erweiterungen oder anderem Chrome Code zu benutzen. In diesem Fall müssen einige zusätzliche Dinge beachtet werden, die im Abschnitt Using the DOM File API in chrome code näher erläutert werden.

+ +

Auf ausgewählte Dateien zugreifen

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="input">
+ +

Die File API erlaubt den Zugriff auf eine {{ domxref("FileList") }} mit {{ domxref("File") }} Objekten, die die vom Benutzer ausgewählten Dateien repräsentieren.

+ +

Wenn der Benutzer nur eine Datei auswählt, dann muss nur die erste Datei in der Liste betrachtet werden.

+ +

Eine ausgewählte Datei erhält man über den üblichen DOM Selektor:

+ +
var selectedFile = document.getElementById('input').files[0];
+ +

Oder mit einem jQuery Selektor:

+ +
var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];
+ +
+

Tritt der Fehler "files is undefined" auf:
+ Es wurde das falsche HTML element ausgewählt. Es ist zu beachten, dass ein jQuery Selektor eine Liste von zutreffenden DOM Elementen zurückliefert. Das richtige DOM Element muss ausgewählt werden, um "files" darauf anzuwenden.

+
+ +

Zugriff auf ausgewählte Dateien über den Change Event

+ +

Es ist auch möglich (aber nicht unbedingt erforderlich), auf die {{ domxref("FileList") }} über das change event zuzugreifen:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

Wenn der Benutzer eine Datei auswählt, wird die Funktion handleFiles() aufgerufen. Als Parameter wird die {{ domxref("FileList") }} übergeben. Sie enthält die {{ domxref("File") }} Objekte, die die vom Benutzer ausgewählten Dateien repräsentieren.

+ +

Soll der Benutzer mehrere Dateien auswählen können, dann kann einfach das Attribut multiple auf das input Element angewendet werden:

+ +
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+ +

In diesem Fall enthält die Dateiliste, die an die handleFiles() Funktion übergeben wird, ein {{ domxref("File") }} für jede Datei, die der Benutzer ausgewählt hat.

+ +

Dynamisch einen Change Listener hinzufügen

+ +

Wurde das input Feld mit einer JavaScript Bibliothek wie jQuery erzeugt, dann muss der event Listener mit {{ domxref("element.addEventListener()") }} hinzugefügt werden:

+ +
var inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Jetzt kann die Dateiliste verarbeitet werden */
+}
+ +

In diesem Fall ist die handleFiles() Funktion selbst der Event Handler, anders als in den vorigen Beispielen, wo sie von einem Event Handler aufgerufen wurde.

+ +

Informationen über die ausgewählte(n) Datei(en)

+ +

Das {{ domxref("FileList") }} Objekt, das vom DOM geliefert wurde, enthält eine Liste aller Dateien, die vom Benutzer ausgewählt wurden. Jede der Dateien wird durch ein {{ domxref("File") }} Objekt repräsentiert. Die Anzahl der ausgewälten Dateien kann über das length Attribut der Liste ermittelt werden:

+ +
var numFiles = files.length;
+ +

Die einzelnen {{ domxref("File") }} Objekte erhält man, indem das {{ domxref("FileList") }} Objekt einfach wie ein Array behandelt wird:

+ +
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

Diese Schleife iteriert über alle Dateien in der Liste.

+ +

Im {{ domxref("File") }} Objekt liefern drei Attribute hilfreiche Informationen über die Datei:

+ +
+
name
+
Der Dateiname als read-only String. Es ist nur der Dateiname enthalten, keine Pfadinformationen.
+
size
+
Die Dateigröße in Bytes als read-only 64-Bit Integer.
+
type
+
Der MIME type der Datei als read-only String oder "", wenn der Typ nicht ermittelt werden konnte.
+
+ +

Beispiel: Dateigröße anzeigen

+ +

Das folgende Beispiel zeigt eine mögliche Verwendung des size Attributs:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+
+ +

Verstecktes input Element mit click() Methode

+ +

Ab Gecko 2.0 {{ geckoRelease("2.0") }}, kann das zugegebenermaßen hässliche Datei-{{ HTMLElement("input") }} Element versteckt und durch eigene Oberflächenelemente zum Zugriff auf den Datei-Öffnen-Dialog ersetzt werden. Dazu wird das input Element mit dem CSS Stil display:none versehen und mit der Methode {{ domxref("element.click","click()") }} aufgerufen.

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
+
+
+ +

Der Code, der auf den click Event reagiert, kann wie folgt aussehen:

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+ +

Das neue Oberflächenelement zum Zugriff auf den Datei-Öffnen-Dialog kann nun beliebig gestaltet werden.

+ +

label Element zum Auslösen eines versteckten input Elements

+ +

Wird statt eines Links ({{ HTMLElement("a") }} Element) ein {{ HTMLElement("label") }} Element verwendet, dann kann das versteckte input Element auch ohne JavaScript ausgelöst werden. Dabei darf das input-Element aber weder mit display: none noch mit visibility: hidden versteckt werden, weil es in diesen Fällen nicht mit der Tastatur bedienbar wäre. Es darf nur visuell versteckt werden.

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Bitte Dateien auswählen</label>
+
+ +

und folgendem CSS:

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+
+ +

Bei einem Klick auf das label Element wird der Datei-Öffnen-Dialog angezeigt.

+ +

Das label Element kann per CSS beliebig gestaltet werden. Man muss aber das Label des versteckten Eingabefelds hervorheben, wenn dieses den Fokus hat, d.h. per Tab-Taste angewählt wurde – sei es durch outline wie im obigen Beispiel oder background-color oder box-shadow. (Gegenwärtig stellt Firefox das Label von fokussierten <input type="file">-Elementen nicht hervorgehoben dar.)

+ +

Dateien per Drag and Drop auswählen

+ +

Es ist auch möglich, per Drag and Drop Dateien an die Webanwendung zu übergeben.

+ +

Zuerst muss eine Drop Zone eingerichtet werden. Welcher Teil der Oberfläche Drops entgegen nimmt, ist vom Design der Anwendung abhängig. Generell ist das Empfangen von Drop Events aber einfach:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

In diesem Beispiel wird das Element mit der ID dropbox als Drop Zone verwendet. Das wird durch Registrieren der Listener für {{event('dragenter')}}, {{event('dragover')}} und {{event('drop')}} Events erreicht.

+ +

dragenter und dragover benötigen wir in unserem Fall eigentlich nicht. Wir verhindern lediglich eine weitere Behandlung der Events durch Aufruf von e.stopPropagation() und e.preventDefault():

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

Das Wesentliche geschieht in der Behandlung des drop Events:

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Hier ermitteln wir das dataTransfer Feld aus dem Event, entnehmen ihm die Dateiliste und übergeben diese an handleFiles(). Von da an ist die Weiterverarbeitung die gleiche wie bei Verwendung des input Elements.

+ +

Beispiel: Thumbnails von ausgewählten Bildern anzeigen

+ +

Gehen wir davon aus, dass auf einer Foto-Webseite mit HTML5 eine Thumbnail Vorschau von Bildern angezeigt werden soll, bevor sie hochgeladen werden. Das input Element oder die Drop Zone kann wie oben beschrieben eingerichtet werden. Diese rufen die folgende handleFiles() Funktion auf:

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Gehen wird davon aus, dass "preview" das div-Element ist, in dem der Inhalt angezeigt wird.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Mit der Schleife wird über die ausgewählten Dateien iteriert. Bei jeder Datei wird mit Hilfe des type Attributs (indem der Reguläre Ausdruck "^image\/" darauf angewendet wird) geprüft, ob es sich um eine Bild Datei handelt. Liegt eine Bild Datei vor, dann wird ein neues img Element erzeugt. Mit CSS können z.B. hübsche Ränder oder Schatten erzeugt und die Größe des Bildes festgelegt werden, das muss also nicht hier im Code erfolgen.

+ +

Jedem Bild wird die CSS Klasse obj zugewiesen, so dass es einfach ist, es im DOM Baum zu finden. Außerdem wird jedem Bild im file Attribut das {{ domxref("File") }} Objekt für das Bild zugewiesen; das benötigen wir später für den tatsächlichen Upload der Datei. Mit {{ domxref("Node.appendChild()") }} wird das neue Thumbnail dem preview Bereich unserer Anwendung hinzugefügt.

+ +

Dann erstellen wir einen {{ domxref("FileReader") }}, um das Bild asynchron zu laden und es dem img Element hinzuzufügen. Nach dem Erstellen des FileReader Objektes definieren wir die onload Funktion und rufen readAsDataURL() auf, um die Leseoperation im Hintergrund zu starten. Ist der komplette Inhalt der Bilddatei geladen, dann wird er in eine data: URL umgewandelt, die an den onload Callback übergeben wird. Unsere Implementation dieser Routine setzt das src Attribut des img Elements auf das geladene Bild, was dazu führt, dass das Bild im Thumbnail auf dem Bildschirm des Benutzers erscheint.

+ +

Verwendung von Objekt URLs

+ +

Mit Gecko 2.0 {{ geckoRelease("2.0") }} wurde die Unterstützung für die DOM Methoden {{ domxref("window.URL.createObjectURL()") }} und {{ domxref("window.URL.revokeObjectURL()") }} eingeführt. Mit ihnen lassen sich einfache URL Strings erzeugen, die beliebige Daten referenzieren, auf die per DOM {{ domxref("File") }} Objekte zugegriffen werden kann; einschließlich lokale Dateien auf dem Computer des Anwenders.

+ +

Wenn man aus HTML mit einer URL auf ein {{ domxref("File") }} Objekt verweisen möchte, dann kann man dafür eine Objekt URL erzeugen:

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+ +

Die Objekt URL ist ein String, der das {{ domxref("File") }} Objekt identifiziert. Jedes Mal, wenn {{ domxref("window.URL.createObjectURL()") }} aufgerufen wird, wird eine eindeutige Objekt URL erzeugt, auch wenn vorher bereits eine Objekt URL für diese Datei erzeugt wurde. Jede von ihnen muss wieder freigegeben werden. Sie werden automatisch freigegeben, wenn das Dokument entladen wird. Wenn ihre Anwendung die Objekt URLs dynamisch verwendet, dann sollten Sie sie auch explizit durch Aufruf von {{ domxref("window.URL.revokeObjectURL()") }} freigeben:

+ +
window.URL.revokeObjectURL(objectURL);
+ +

Beispiel: Mit Objekt URLs Bilder anzeigen

+ +

Dieses Beispiel verwendet Objekt URLs, um Thumbnails von Bildern anzuzeigen. Darüber hinaus werden weitere Dateiinformationen einschließlich Name und Größe angezeigt. Live Ansicht des Beispiels.

+ +

Das HTML für die Oberfläche sieht folgendermaßen aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
+<div id="fileList">
+  <p>Keine Dateien ausgewählt!</p>
+</div>
+
+ +

Das erstellt ein Datei {{ HTMLElement("input") }} Element, zusammen mit einem Link, der den Datei-Öffnen-Dialog anzeigt (so kann das Datei input Element versteckt werden, da es nicht so attraktiv aussieht). Das wird oben im Abschnitt {{ anch("Verstecktes input Element mit click() Methode") }} näher beschrieben.

+ +

Die handleFiles() Methode sieht folgendermaßen aus:

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Das {{ HTMLElement("div") }} Element mit der ID fileList wird ermittelt. Das ist der Block, in den wir später unsere Dateiliste einschließlich Thumbnails einfügen.

+ +

Ist das {{ domxref("FileList") }} Objekt, das an handleFiles() übergeben wird, null, dann wird einfach "No files selected!" ausgegeben. Ansonsten bauen wir unsere Dateiliste wie folgt:

+ +
    +
  1. Ein neues ({{ HTMLElement("ul") }}) Element wird erzeugt.
    2. +
  2. Das neue Listenelement wird dem {{ HTMLElement("div") }} Block hinzugefügt durch Aufruf der {{ domxref("element.appendChild()") }} Methode.
    3. +
  3. Für jedes {{ domxref("File") }} in der {{ domxref("FileList") }}, die durch files repräsentiert wird: +
      +
    1. Erzeuge ein neues Listenelement ({{ HTMLElement("li") }}) und füge es der Liste hinzu.
      2. +
    2. Erzeuge ein neues Bildelement ({{ HTMLElement("img") }}).
      3. +
    3. Setze das src Attribut des Bildes auf die neue Objekt URL, die die Datei repräsentiert, wobei die Objekt URL mit {{ domxref("window.URL.createObjectURL()") }} erzeugt wird.
      4. +
    4. Setze die Bildgröße auf 60 Pixel.
      5. +
    5. Richte den onload Event Handler ein, um die Objekt URL wieder freizugeben, da sie nach dem Laden des Bildes nicht mehr benötigt wird. Das wird durch Aufruf der Methode {{ domxref("window.URL.revokeObjectURL()") }} und Übergabe des Objekt URL Strings aus img.src gemacht.
      6. +
    6. Füge das neue Bildelement dem Listenelement hinzu.
      7. +
    +
    4. +
+ +

Example: Uploading a user-selected file

+ +

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

+ +

Creating the upload tasks

+ +

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{ domxref("File") }} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Line 2 fetches a {{ domxref("NodeList") }}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

+ +

Handling the upload process for a file

+ +

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

+ +
function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{ domxref("XMLHttpRequest") }} to handle uploading the data.

+ +

Before actually transferring the data, several preparatory steps are taken:

+ +
    +
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. +
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. +
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. +
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. +
  5. The FileReader object is used to convert the file to a binary string.
    6. +
  6. Finally, when the content is loaded the XMLHttpRequest function sendAsBinary() is called to upload the file's content.
    7. +
+ +
Note: The non-standard sendAsBinary method in the example above is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Handling the upload process for a file, asynchronously

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Example: Using object URLs to display PDF

+ +

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

+ +

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

And here is the change of the src attribute:

+ +
var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+ +

Example: Using object URLs with other file types

+ +

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

+ +
var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);
+ +

Specifications

+ + + +

See also

+ + + +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}

diff --git a/files/de/web/api/filereader/index.html b/files/de/web/api/filereader/index.html new file mode 100644 index 0000000000..b7c8668c3a --- /dev/null +++ b/files/de/web/api/filereader/index.html @@ -0,0 +1,153 @@ +--- +title: FileReader +slug: Web/API/FileReader +translation_of: Web/API/FileReader +--- +
{{APIRef("File API")}}
+ +

Mit dem FileReader-Objekt können Webapplikationen den Inhalt von auf dem Computer des Benutzers gespeicherten Dateien (oder Rohdaten-Buffer) asynchron lesen. Mit {{domxref("File")}} oder {{domxref("Blob")}}-Objekten wird die zu lesende Datei oder die zu lesenden Daten spezifiziert.

+ +

File Objekte können über ein {{domxref("FileList")}} Objekt erhalten werden, welches als Ergebnis einer Dateiauswahl durch einen Benutzer über das {{HTMLElement("input")}} Element zurückgegeben wird. Weitere mögliche Quellen sind drag and drop Ereignisse über ein DataTransfer Objekt oder über die mozGetAsFile() API des {{domxref("HTMLCanvasElement")}}.

+ +

Konstruktor

+ +
FileReader FileReader();
+ +

Im Kapitel Zugriff auf Dateien von Webapplikationen finden sich weitere Details und Beispiele.

+ +

Eigenschaften

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Ein {{domxref("DOMError")}}, der den Fehler angibt, welcher beim Lesen der Datei entstanden ist.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Eine Zahl, welche den Status des FileReader angibt. Möglich ist eine der {{anch("Status-Konstanten")}}.
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
Der Inhalt der Datei. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist. Das Format der Daten hängt davon ab, welche der Methoden zum Starten des Lesevorgangs benutzt wurde.
+
+ +

Event-Handler

+ +
+
{{domxref("FileReader.onabort")}}
+
Ein Handler für das {{event("abort")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang abgebrochen wird.
+
{{domxref("FileReader.onerror")}}
+
Ein Handler für das {{event("error")}}-Event. Dieser Event wird gefeuert, wenn beim Lesevorgang ein Fehler ensteht.
+
{{domxref("FileReader.onload")}}
+
Ein Handler für das {{event("load")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang erfolgreich beendet wird.
+
{{domxref("FileReader.onloadstart")}}
+
Ein Handler für das {{event("loadstart")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang gestartet wird.
+
{{domxref("FileReader.onloadend")}}
+
Ein Handler für das {{event("loadend")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang beendet wird (entweder erfolgreich oder fehlerhaft).
+
{{domxref("FileReader.onprogress")}}
+
Ein Handler für das {{event("progress")}}-Event. Dieser Event wird gefeuert, während ein {{domxref("Blob")}}-Inhalt gelesen wird.
+
+ +
+

Hinweis: DaFileReader von {{domxref("EventTarget")}} erbt, kann auf alle diese Events auch mit der {{domxref("EventTarget.addEventListener()","addEventListener")}} Methode gehört werden.

+
+ +

Status-Konstanten

+ + + +

Methoden

+ +
+
{{domxref("FileReader.abort()")}}
+
Bricht den Lesevorgang ab. Nach dem Return wird der readyState zu DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält result ein {{domxref("ArrayBuffer")}} mit den Daten.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält result die rohen Binär-Daten als String.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält result die Daten als Data-URL.
+
{{domxref("FileReader.readAsText()")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und , wenn der Lesevorgang abgeschlossen ist, enthält result die Daten als Text-String.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

Browser-Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basissupport{{CompatGeckoDesktop("1.9.2")}}[1]710[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basissupport3231011.56.1
+
+ +

[1] Vor Gecko 2.0 beta 7 (Firefox 4.0 beta 7), waren alle {{domxref("Blob")}} parameters stattdessen {{domxref("File")}} Parameter; Das wurde aktualisiert um die Spezifikation zu erfüllen. Vor Gecko 13.0 {{geckoRelease("13.0")}} gab die FileReader.error Eigenschaft ein  {{domxref("FileError")}} Objekt zurück. Dieses Interface wurde wurde entfernt und FileReader.error gibt nun einen {{domxref("DOMError")}} Objekt zurück, wie in dem aktuellen FileAPI Entwurf vorgesehen.

+ +

[2] IE9 hat ein File API Lab.

+ +

[3] Opera hat partiellen Support in 11.1.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/filereader/onload/index.html b/files/de/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..95dda3e59f --- /dev/null +++ b/files/de/web/api/filereader/onload/index.html @@ -0,0 +1,24 @@ +--- +title: onload +slug: Web/API/FileReader/onload +tags: + - Dateien + - Lesen +translation_of: Web/API/FileReader/onload +--- +

Das onload Event wird ausgelöst, wenn der Inhalt von readAsArrayBuffer, readAsBinaryString, readAsDataURL or readAsText verfügbar ist.

+ +

Beispiel

+ +
// Callback von einem <input type="file" onchange="onChange(event)">
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // Hier wird der Text der Datei ausgegeben
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+
diff --git a/files/de/web/api/formdata/formdata/index.html b/files/de/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..40ce36053f --- /dev/null +++ b/files/de/web/api/formdata/formdata/index.html @@ -0,0 +1,184 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +translation_of: Web/API/FormData/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Der FormData() Konstruktor erzeugt ein neues {{domxref("FormData")}}-Objekt.

+ +
+

Anmerkung: Dieses Feature is verfügbar auf Web Workers.

+
+ +

Syntax

+ +
var formData = new FormData(form)
+ +

Parameter

+ +
+
form {{optional_inline}}
+
Ein HTML {{HTMLElement("form")}}-Element — wenn angegeben, wird  das neue {{domxref("FormData")}}-Objekt mit den aktuellen Schlüssel/Wert-Paaren des form's gefüllt, wobei "name" der Schlüssel und "value" der Wert. Mitgeschickte Dateien werden ebenfalls codiert.
+
+ +

Example

+ +

So erzeugt man ein neues FormData-Objekt:

+ +
var formData = new FormData(); // leer
+ +

Nun kann man ein Schlüssel/Wert-Paar hinzufügen mit {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+
+ +

Oder man gibt das optionale form Argument an, um es direkt mit dessen Werten zu füllen:

+ +
<form id="myForm" name="myForm">
+  <div>
+    <label for="username">Enter name:</label>
+    <input type="text" id="username" name="username">
+  </div>
+  <div>
+    <label for="useracc">Enter account number:</label>
+    <input type="text" id="useracc" name="useracc">
+  </div>
+  <div>
+    <label for="userfile">Upload file:</label>
+    <input type="file" id="userfile" name="userfile">
+  </div>
+<input type="submit" value="Submit!">
+</form>
+
+ +
+

Anmerkung: Alle input-Elemente haben das 'name'-Attribut. Das ist notwendig um die Werte auszuwerten.

+
+ +
var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7{{CompatGeckoDesktop("2.0")}}10125
append with filename{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}} +

12

+ 		{{CompatUnknown}}
append with filename{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +

 

+ +
+

Note: XHR in Android 4.0 sends empty content for FormData with blob.

+
+ +

Gecko notes

+ +

Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0, the filename "blob" is sent.

+ +

See also

+ + +
diff --git a/files/de/web/api/formdata/get/index.html b/files/de/web/api/formdata/get/index.html new file mode 100644 index 0000000000..1bcd503006 --- /dev/null +++ b/files/de/web/api/formdata/get/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Die get() Methode der {{domxref("FormData")}} Schnittstelle gibt die den ersten Wert, der dem gegebenen Schlüssel zugeordnet ist, aus dem FormData Objekt zurück. Wenn mehrere Werte zu erwarten sind und diese alle verwendet werden sollen, sollte stattdeessen die Methode {{domxref("FormData.getAll()","getAll()")}} verwendet werden.

+ +
+

Hinweis: Diese Methode ist in Web Workers verfügbar.

+
+ +

Syntax

+ +
formData.get(name);
+ +

Parameter

+ +
+
name
+
Ein {{domxref("USVString")}}, der den Namen des abzurufenden Schlüssels repräsentiert.
+
+ +

Rückgabewert

+ +

Ein {{domxref("FormDataEntryValue")}}, der den Wert enthält.

+ +

Example

+ +

Die folgende Zeile erzeugt ein leeres FormData Objekt:

+ +
var formData = new FormData();
+ +

Wenn man zwei Werte als benutzername mit {{domxref("FormData.append")}} hinzufügt:

+ +
formData.append('benutzername', 'Chris');
+formData.append('benutzername', 'Bob');
+ +

Der folgende Aufruf der get() Funktion liefert dann nur den zuerst hinzugefügten Wert für benutzername:

+ +
formData.get('benutzername'); // Gibt "Chris" zurück
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatChrome(50.0)}}{{CompatGeckoDesktop('39.0')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Verfügbar in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop('39.0')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Verfügbar in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/formdata/getall/index.html b/files/de/web/api/formdata/getall/index.html new file mode 100644 index 0000000000..09cdc69036 --- /dev/null +++ b/files/de/web/api/formdata/getall/index.html @@ -0,0 +1,74 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +translation_of: Web/API/FormData/getAll +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Die getAll() Methode der  {{domxref("FormData")}} Schnittstelle gibt alle Werte zurück, die innerhalb eines FormData Objekts mit einem gegebenen Schlüssel assoziiert sind.

+ +
+

Hinweis: Diese Methode ist in Web Workers verfügbar.

+
+ +

Syntax

+ +
formData.getAll(name);
+ +

Parameter

+ +
+
name
+
Ein {{domxref("USVString")}}, der den Namen des Schlüssels darstellt, der abgerufen werden soll.
+
+ +

Rückgabewerte

+ +

Ein Array von {{domxref("FormDataEntryValue")}}s.

+ +

Beispiel

+ +

Die folgende Zeile erstellt ein leeres FormData Objekt:

+ +
var formData = new FormData();
+ +

Hinzufügen von zwei username Werten mit Hilfe von {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+ +

Der darauffolgende Aufruf der getAll() Funktion gibt beide username Werte in einem Array zurück.:

+ +
formData.getAll('username'); // gibt ["Chris", "Bob"] zurück
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.FormData.getAll")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/formdata/index.html b/files/de/web/api/formdata/index.html new file mode 100644 index 0000000000..3ff1becbcf --- /dev/null +++ b/files/de/web/api/formdata/index.html @@ -0,0 +1,80 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FomData + - Interface + - Referenz + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Das FormData-Interface ermöglicht das einfache Erstellen eines Objektes bestehend aus Schlüssel/Werte-Paaren, welche Formular-Felder und ihre Werte repräsentieren. Dieses Objekt kann leicht durch das Aufrufen der {{domxref("XMLHttpRequest.send()")}} Methode abgeschickt werden. Es verwendet das gleiche Format wie ein HTML-Formular, dessen Kodierung auf "multipart/form-data" gesetzt wurde.

+ +

Ein Objekt, dass FormData implementiert, kann direkt in den {{jsxref("Statements/for...of", "for...of")}} Strukturen benutzt werden, statt {{domxref('FormData.entries()', 'entries()')}} zu verwenden: for (var p of myFormData) ist identisch zu for (var p of myFormData.entries()).

+ +
+

Hinweis: Dieses Feature ist in  Web Workers verfügbar.

+
+ +

Konstruktor

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Erzeugt ein neues FormData-Objekt.
+
+ +

Methoden

+ +
+
{{domxref("FormData.append()")}}
+
Fügt den Wert an den Wert eines bestehenden Schlüssel/Wert-Paares in einem FormData-Objekt an, oder fügt den Schlüssel mit dem Wert hinzu hinzu, falls dieser nicht vorhanden ist.
+
{{domxref("FormData.delete()")}}
+
Löscht ein Schlüssel/Wert-Paar aus einem FormData-Objekt.
+
{{domxref("FormData.entries()")}}
+
Gibt einen {{jsxref("Iteration_protocols","iterator")}} zurück, welcher das Iterieren über alle Schlüssel/Wert-Paare ermöglicht.
+
{{domxref("FormData.get()")}}
+
Gibt den ersten Wert zurück, welcher dem gegebenen Schlüssel in dem FormData-Objekt zugeordnet ist.
+
{{domxref("FormData.getAll()")}}
+
Erstellt ein Array, welches alle dem gegebenen Schlüssel zugeordneten Werte enthält.
+
{{domxref("FormData.has()")}}
+
Gibt einen boolean zurück, welcher Auskunft über das Vorhandenseins des gegeben Schlüssels im FormData-Objekt gibt.
+
{{domxref("FormData.keys()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Schlüssel der Schlüssel/Wert-Paare ermöglicht.
+
{{domxref("FormData.set()")}}
+
Ersetzt den Wert für einen bestimmten Schlüssel im FormData-Objekt, oder legt das Schlüssel/Wert-Paar an, sollte der Schlüssel noch nicht existieren.
+
{{domxref("FormData.values()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Werte der Schlüsselpaare ermöglicht.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definiert in XHR Spezifikation
+ +

Browserkompatibilität

+ +

{{Compat("api.FormData")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/fullscreenoptions/index.html b/files/de/web/api/fullscreenoptions/index.html new file mode 100644 index 0000000000..a4e76273e3 --- /dev/null +++ b/files/de/web/api/fullscreenoptions/index.html @@ -0,0 +1,43 @@ +--- +title: FullscreenOptions +slug: Web/API/FullscreenOptions +tags: + - API + - Aufbau + - Bildschirm + - Einstellungen + - Full-screen + - Fullscreen API + - FullscreenOptionen + - Navigation + - Optionen + - Referenz + - UI + - Wörterbuch + - fullscreen +translation_of: Web/API/FullscreenOptions +--- +

{{APIRef("Fullscreen API")}}

+ +

Das FullscreenOptions-Wörterbuch wird verwendet, um Konfigurationsoptionen bereitzustellen, wenn {{DOMxRef ("Element.requestFullscreen", "requestFullscreen ()")}} für ein Element aufgerufen wird, um dieses Element in den Vollbildmodus zu versetzen.

+ +

Eigenschaften

+ +
+
{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}
+
Eine Zeichenfolge, mit der gesteuert wird, ob die Elemente der Browser-Benutzeroberfläche im Vollbildmodus angezeigt werden sollen. Mit der Standardeinstellung "auto" kann der Browser diese Entscheidung treffen.
+
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.FullscreenOptions")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/gainnode/index.html b/files/de/web/api/gainnode/index.html new file mode 100644 index 0000000000..fb5adeb75e --- /dev/null +++ b/files/de/web/api/gainnode/index.html @@ -0,0 +1,134 @@ +--- +title: GainNode +slug: Web/API/GainNode +translation_of: Web/API/GainNode +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Die GainNode Schnittstelle ermöglicht eine Verstärkung (engl. gain) eines Signals, was als veränderte Lautstärke wahrgenommen wird. Es handelt sich um ein {{domxref("AudioNode")}} audio-verarbeitendes Modul, das ein Eingabesignal mit einer gewissen Verstärkung (die auch negativ sein kann) versieht, und es an den Ausgang weiterleitet. Ein GainNode hat immer genau einen Eingang und einen Ausgang, beide mit derselben Anzahl an Kanälen.

+
+ +

Verstärkung ist ein Wert ohne Einheit, der sich über die Zeit ändert. Er wird mit allen zeitlich korrespondierenden Samples aller Eingangskanäle multipliziert, um das Signal zu verändern.  Ändert sich der Wert, wird der neue Wert durch einen "de-zippering" Algorithmus angewendet, um unästhetisches Klick-Artifakte im Signal zu vermeiden.

+ +

The GainNode is increasing the gain of the output.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Anzahl der Eingänge1
Anzahl der Ausgänge1
Kanalzählmethode"max"
Anzahl Kanäle2 (not used in the default count mode)
Kanalinterpretation"speakers"
+ +

Eigenschaften

+ +

Inherits properties from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("GainNode.gain")}} {{readonlyinline}}
+
Ist ein a-rate {{domxref("AudioParam")}} der das Ausmaß der Verstärkung angibt.
+
+ +

Methoden

+ +

Keine spezifischen Methoden; erbt die Methoden der Elternklasse , {{domxref("AudioNode")}}.

+ +

Beispiel

+ +

{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-gainnode-interface', 'GainNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/gamepad_api/index.html b/files/de/web/api/gamepad_api/index.html new file mode 100644 index 0000000000..d72bf51274 --- /dev/null +++ b/files/de/web/api/gamepad_api/index.html @@ -0,0 +1,95 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +tags: + - API + - Experimentel + - Spiele + - Übersicht +translation_of: Web/API/Gamepad_API +--- +
{{DefaultAPISidebar("Gamepad API")}}
+ +

Die Gamepad API ist ein Weg für  Entwickler auf Eingaben eines Gamepads und anderen Spielsteuergeräte in einer einfachen und konsequenten Weise zuzugreifen und darauf zu reagieren. Es enthält drei Schnittstellen, zwei Ereignisse und eine Spezialfunktion, welche verwendet wird, um auf verbindende und trennende Gamepads zu reagieren, um auf andere Informationen des Gamepads selbst zuzugreifen und welche Knöpfe und andere Kontrollelemente gerade gedrückt werden.

+ +

Schnittstellen

+ +
+
Gamepad
+
Repräsentiert ein Gamepad/Spielsteuergerät, dass mit dem Computer verbunden ist.
+
GamepadButton
+
Repräsentiert einen Knopf auf einem verbundenen Gamepad.
+
GamepadEvent
+
Das Ereignisobjekt, dass Ereignisse auf dem zusammenhängenden Gamepad repräsentativ auslöst.
+
+ +

Experimentelle Gamepad Erweiterungen

+ +
+
GamepadHapticActuator
+
Repräsentiert Hardware im Steuergeräte welche zur Verfügungstellung von haptischen Feedback für den Nutzer (Falls vefügbar) konzipiert worden ist, meistens handelt es sich um Vibrationsmotoren.
+
GamepadPose
+
Repräsentiert die Stellung des Steuergeräts (z.B. Position und Orientierung im dreidimensionalen Raum) im Falle eines WebVR-Steuergeräts.
+
+ +

Siehe unter Experimentelle Erweiterungen der Gamepad Schnittstelle nach Schnittstellen, die den Zugriff auf die oben erwähnten experimentellen Erweiterungen ermöglichen.

+ +

Erweiterungen für anderen Schnittstellen

+ + + +
+
{{domxref("Navigator.getGamepads()")}}
+
Eine Erweiterung für das {{domxref("Navigator")}} Objekt, das ein Array von {{domxref("Gamepad")}} Objeketen zurückschickt, jeweils eines für jedes verbundene Gamepad.
+
+ +

Window Ereignisse

+ +
+
{{domxref("Window.ongamepadconnected")}}
+
Repräsentiert einen Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad verbunden wird (Wenn das {{event('gamepadconnected')}} Ereignis auslöst).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Repräsentiert einen  Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad getrennt wird (Wenn das {{event('gamepaddisconnected')}} Ereignis auslöst).
+
+ +

Einführung und Leitfäden

+ + + +

Spezifikation

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Definiert die {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Anfängliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Gamepad")}}

+ +

Siehe weiters

+ + diff --git a/files/de/web/api/geolocation/getcurrentposition/index.html b/files/de/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..52fd968a6b --- /dev/null +++ b/files/de/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,88 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +
{{securecontext_header}}{{ APIRef("Geolocation API") }}
+ +

Mit der Methode Geolocation.getCurrentPosition() kann die Position des Gerätes bestimmt werden.

+ +

Syntax

+ +
navigator.geolocation.getCurrentPosition(success[, error[, [options]])
+ +

Parameter

+ +
+
success
+
Eine Funktion, die nach erfolgreicher Positionsbestimmung aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPosition")}} als Parameter.
+
error {{optional_inline}}
+
Eine Funktion, die im Fehlerfall aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPositionError")}} als Parameter.
+
options {{optional_inline}}
+
Ein Objekt vom Typ {{domxref("PositionOptions")}}. Es enthält: +
    +
  • maximumAge: Die Positionsbestimmung darf höchstens diese Zeit in Millisekunden zurückliegen. Falls 0, muss ein aktueller Wert ermittelt werden, falls Infinity, sollte kein aktueller Wert ermittelt werden.
    + Vorgabe: 0.
    • +
  • timeout: Wartezeit in Millisekunden, bis die Positionsbestimmung abgebrochen und, so gegeben, die Funktion error aufgerufen wird. Bei Infinity keine Begrenzung.
    + Vorgabe: Infinity.
    • +
  • enableHighAccuracy: true, um eine genauere Position zu ermitteln, jedoch möglicherweise zu Lasten von Wartezeit und Energieverbrauch.
    + Vorgabe: false.
    • +
+
+
+ +

Beispiel

+ +
var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log(`Latitude : ${crd.latitude}`);
+  console.log(`Longitude: ${crd.longitude}`);
+  console.log(`More or less ${crd.accuracy} meters.`);
+}
+
+function error(err) {
+  console.warn(`ERROR(${err.code}): ${err.message}`);
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Erste Spezifikation.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Geolocation.getCurrentPosition")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/geolocation/index.html b/files/de/web/api/geolocation/index.html new file mode 100644 index 0000000000..33c5695d42 --- /dev/null +++ b/files/de/web/api/geolocation/index.html @@ -0,0 +1,71 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - Secure context + - TopicStub +translation_of: Web/API/Geolocation +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

The Geolocation interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.

+ +

An object with this interface is obtained using the {{domxref("navigator.geolocation")}} property implemented by the {{domxref("Navigator")}} object.

+ +
+

Note: For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.

+
+ +

Properties

+ +

The Geolocation interface neither implements, nor inherits any property.

+ +

Methods

+ +

The Geolocation interface doesn't inherit any method.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Determines the device's current location and gives back a {{domxref("GeolocationPosition")}} object with the data.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Returns a long value representing the newly established callback function to be invoked whenever the device location changes.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Removes the particular handler previously installed using watchPosition().
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#geolocation_interface')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.Geolocation")}}

+ +

See also

+ + diff --git a/files/de/web/api/globaleventhandlers/index.html b/files/de/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..db5dd7178f --- /dev/null +++ b/files/de/web/api/globaleventhandlers/index.html @@ -0,0 +1,540 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - HTML-DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +
Der GlobalEventHandlers Mixin beschreibt die Ereignisbehandler, die mehreren Interfaces gemeinsam sind, wie z.B. {{domxref("HTMLElement")}}, {{domxref("Document")}}, oder {{domxref("Window")}}. Jedes dieser Interfaces kann weitere Ereignisbehandler implementieren.
+ +

GlobalEventHandlers ist ein Mixin und kein Interface und es kann kein Objekt dieses Typs angelegt werden.

+ +

Eigenschaften

+ +

Die Ereignis-Eigenschaften der Form onXYZ werden auf dem {{domxref("GlobalEventHandlers")}}} definiert und durch {{domxref("HTMLElement")}}}, {{domxref("Document")}}, {{domxref("Window")}} und {{domxref("WorkerGlobalScope")}}} für Webworker implementiert.

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("abort")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("blur")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cancel")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplay")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplaythrough")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("change")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("click")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("close")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("contextmenu")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cuechange")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Ist ein {{domxref("EventHandler")}}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("dblclick")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}30.05.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}}[1]{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatUnknown}}{{CompatUnknown}}
onselectionchange{{CompatGeckoDesktop(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoMobile(10)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatNo}}{{CompatNo}}
onselectionchange{{CompatGeckoMobile(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] In Gecko this is implemented as onmozpointerlockchange, onmozpointerlockerror.

+ +

[2] In Blink this is implemented as onwebkitpointerlockchange, onwebkitpointerlockerror.

+ +

[3] This is implemented behind the dom.w3c_pointer_events.enabled preference, defaulting to false.

+ +

[4] This is implemented behind the dom.select_events.enabled preference, that default to false, except on Nightly.

+ +

See also

+ + diff --git a/files/de/web/api/globaleventhandlers/onclick/index.html b/files/de/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..7b71eebd3a --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,88 @@ +--- +title: Globaler Eventhandler onclick +slug: Web/API/GlobalEventHandlers/onclick +tags: + - API + - HTML DOM + - Méthode + - Referencen +translation_of: Web/API/GlobalEventHandlers/onclick +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +
 
+ +

Die onclick Methode gibt den click-Eventhandler des Elementes zurück.

+ +
Note: Wenn man das click-Event zum auslösen einer Aktion benutzt, kann man auch in Erwägung ziehen das man die selbe Aktion auf das keydown-Event legt, das erlaubt den Nutzern ohne Maus oder Touchscreen die Aktion trotzdem auszuführen.
+ +

Syntax

+ +
element.onclick = function;
+
+ +

Anstelle von function wird der Methodenname eingetragen, der meistens etwas mit der Funktion der Methode zu tun hat. Siehe "JavaScript Guide:Functions".

+ +

Das Eventobject besteht aus der spezielen Eventhandlermethode die ein {{domxref("MouseEvent")}} ist.

+ +

Beispiel

+ +
<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8" />
+<title>onclick Event Beispiel</title>
+<script>
+function initElement() {
+  var p = document.getElementById("foo");
+  // BEACHTE: showAlert(); oder showAlert(param); wird NICHT funktionieren.
+  // Es muss ein Methodenname und NICHT ein Methodenaufruf sein.
+  p.onclick = showAlert;
+};
+
+function showAlert() {
+  alert("onclick Event erkannt!")
+}
+</script>
+<style>
+#foo {
+  border: solid blue 2px;
+}
+</style>
+</head>
+<body onload="initElement();">
+<span id="foo">Mein Eventelement</span>
+<p>Klicke auf das obenstehende Element</p>
+</body>
+</html>
+
+ +

Oder man benutzt eine anonyme Methode, wie hier:

+ +
p.onclick = function() { alert("onclick Event erkannt!"); };
+
+ +

Bemerkungen

+ +

Dieses Event wird ausgefürt wenn der Benutzer auf das Element klickt. Dieses Event wird nach dem Mousedown- und dem Mouseupevent ausgefürt.

+ +

Nur ein Klickhandler kann zu einem Objekt hinzugefügt werden in dieser Variable gespeichert werden. Man kann auch die {{domxref("EventTarget.addEventListener()")}} Methode benutzen, seit es flexibel ist und teil der DOM Evente Spezifikation.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}---
diff --git a/files/de/web/api/globaleventhandlers/onload/index.html b/files/de/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..87f61085dd --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,150 @@ +--- +title: GlobalEventHandlers.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +
{{ApiRef()}}
+ +
Die onload-Eigenschaft der {{domxref("GlobalEventHandlers")}} ist ein Ereignis-Handler für das load-Ereignis eines {{domxref("Window")}}s, {{domxref("XMLHttpRequest")}}s, {{htmlelement("img")}}-Elements, etc., der aufgerufen wird, wenn die Ressource fertig geladen hat.
+ +

Syntax

+ +
window.onload = funcRef;
+
+ +

Value

+ +

funcRef ist die Handler-Funktion, die aufgerufen wird, wenn das load-Ereignis des Windows eintritt.

+ +

Beispiele

+ +
window.onload = function() {
+  init();
+  etwasAnderesTun();
+};
+
+ +
<!doctype html>
+<html>
+  <head>
+    <title>onload-Test</title>
+    // ES5
+    <script>
+      function load() {
+        console.log("load-Ereignis festgestellt!");
+      }
+      window.onload = load;
+    </script>
+    // ES2015
+    <script>
+      const load = () => {
+        console.log("load-Ereignis festgestellt!");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>Das load-Ereignis tritt ein, wenn das Dokument fertig geladen ist!</p>
+  </body>
+</html>
+
+ +

Anmerkungen

+ +

Das load-Ereignis tritt am Ende des Dokumentladeprozesses ein. An diesem Punkt befinden sich alle Objekte des Dokuments im DOM und alle Grafiken, Skripte, Links und Sub-Frames sind vollständig geladen.

+ +

Es gibt zudem Gecko-spezifische DOM-Ereignisse wie DOMContentLoaded und DOMFrameContentLoaded (welches mit {{domxref("EventTarget.addEventListener()")}} gehandhabt werden kann), die eintreten, nachdem sich der DOM der Seite aufgebaut hat, aber nicht darauf warten, dass andere Ressourcen fertig geladen wurden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}}{{Spec2("HTML WHATWG")}}Anfängliche Definition
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/globaleventhandlers/onresize/index.html b/files/de/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..b9866678c3 --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Property +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

Die GlobalEventHandlers.onresize Property enthält einen {{domxref("EventHandler")}}, der ausgelöst wird, sobald ein {{event("resize")}}-Event empfangen wird.

+ +

Syntax

+ +
window.onresize = funcRef;
+
+ +

Parameter

+ + + +

Beispiel

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize Test</title>
+
+</head>
+
+<body>
+<p>Verändere die Größe des Browser Fensters, um den resize-Event auszulösen.</p>
+
+<p>Window height: <span id="height"></span></p>
+<p>Window width: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+
+ +

Anmerkung

+ +

Das resize-Event wird ausgelöst nachdem die Größe des Fensters verändert wurde.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/de/web/api/htmlcanvaselement/index.html b/files/de/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..3083824dc8 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/index.html @@ -0,0 +1,242 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - Graphiken + - WebGL +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

Das HTMLCanvasElement interface bietet Eigenschaften und Methoden zum Manipulieren des Layouts und der Darstellung des <canvas>-Elements. Das HTMLCanvasElement interface erbt außerdem Eigenschaften und Methoden des {{domxref("HTMLElement")}} interface.

+ +

Eigenschaften

+ +

Erbt Eigenschaften von seinem Elternelement, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Ein positiver integer, der das {{htmlattrxref("height", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln repräsentiert. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 150 verwendet.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Ein {{jsxref("Boolean")}}, der das {{htmlattrxref("moz-opaque", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements repräsentiert. Es sagt dem canvas, ob auf Transparenz verzichtet werden soll. Falls true, kann das Zeichnen auf dem canvas beschleunigt werden.
+
{{domxref("HTMLCanvasElement.width")}}
+
Ein positiver integer, der das {{htmlattrxref("width", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln anzeigt. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 300 verwendet.
+
+ +

Methoden

+ +

Erbt Eigenschaften von seinem Elternelement, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Gibt ein {{domxref("CanvasCaptureMediaStream")}} zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Gibt einen context des canvas zurück oder null, falls die context-ID nicht unterstützt wird. Ein context ermöglicht es, auf dem canvas zu zeichnen. Der Aufruf dieser Methode mit "2d" gibt ein {{domxref("CanvasRenderingContext2D")}} Objekt zurück, während er mit "experimental-webgl" oder "webgl" ein {{domxref("WebGLRenderingContext")}} Objekt zurückgibt. Dieser context ist nur bei Browsern möglich, die WebGL unterstützen.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to png). The returned image is in a resolution of 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Adds the method captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object.
+ The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob(){{CompatNo}} (bug 67587){{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587){{CompatNo}} (bug 67587){{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Opera Mini 5.0 and later has partial support.

+ +

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

+ +

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcanvaselement/todataurl/index.html b/files/de/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..c0a0a900d4 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,206 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +tags: + - API + - Canvas + - DataURI erstellen + - HTMLCanvasElement + - Method + - Methode(2) + - Referenz +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Die HTMLCanvasElement.toDataURL()-Methode gibt eine Repräsentation des Bildes als data URI zurück. Das gewünschte Format wird mit den angegebenen Parametern definiert (standardmäßig PNG). Das zurückgegebene Bild besitzt eine Auflösung von 96 dpi.

+ + + +

Syntax

+ +
canvas.toDataURL(type, encoderOptions);
+
+ +

Parameter

+ +
+
type {{optional_inline}}
+
Ein Parameter vom Typ {{domxref("DOMString")}} bestimmt das Bild-Format. Der Standard type ist image/png.
+
encoderOptions {{optional_inline}}
+
Ein Parameter vom Typ {{jsxref("Number")}} zwischen 0 und 1 gibt die Bildqualität an, wenn der Anfragetyp image/jpeg oder image/webp ist.
+ Wenn das Argument irgend etwas anderes enthält, wird der Standardwert für die Bildqualität verwendet. Der Standardwert liegt bei 0.92. Andere Argumente werden ignoriert.
+
+ +

Rückgabewerte

+ +

Ein Rückgabewert vom Typ {{domxref("DOMString")}} beinhaltet die angefragte data URI.

+ +

Beispiele

+ +

Es ist folgendes {{HTMLElement("canvas")}} Element gegeben:

+ +
<canvas id="canvas" width="5" height="5"></canvas>
+
+ +

Mit den folgenden Zeilen erhalten Sie die data-URL des Canvas:

+ +
var canvas = document.getElementById("canvas");
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+
+ +

Die Bildqualität für jpegs einstellen

+ +
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
+// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
+var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
+
+ +

Beispiel: Dynamisches Ändern von Bildern

+ +

Sie können diese Technik in Verbindung mit Maus-Events nutzen, um dynamisch Bilder abzuändern (in diesem Beispiel schwarz-weiß und farbig):

+ +

HTML

+ +
<img class="schwarz-weiss" src="myPicture.png" alt="Beschreibung meines Bildes" />
+ +

JavaScript

+ +
window.addEventListener("load", removeColors);
+
+function showColorImg() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function showGrayImg() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function removeColors() {
+  var aImages = document.getElementsByClassName("schwarz-weiss"),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
+    oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = showColorImg;
+    oColorImg.onmouseout = showGrayImg;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentare
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML WHATWG')}}Keine Änderungen seit letztem Schnappschuss, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5 W3C')}}Schnappschuss von {{SpecName('HTML WHATWG')}} beinhaltet ursprüngliche Definition.
+ +

Browser-Kompatiblität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome(4) }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatIE(9) }}{{ CompatOpera(9) }}{{ CompatSafari(4.0) }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatAndroid(3.2) }}{{ CompatAndroid(18) }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatVersionUnknown() }}{{ CompatOpera(19) }}{{ CompatSafari(3.0) }}
+
+ +

Schauen Sie auch unter

+ + diff --git a/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html new file mode 100644 index 0000000000..244bbcc76e --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html @@ -0,0 +1,132 @@ +--- +title: webglcontextcreationerror +slug: Web/API/HTMLCanvasElement/webglcontextcreationerror_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextcreationerror_event +--- +
{{APIRef}}
+ +
+

Das webglcontextcreationerror Event der WebGL API wird ausgelöst, wenn der User-Agent nicht in der Lage ist einen {{domxref("WebGLRenderingContext")}} zu erzeugen.

+ +

Das Event hat die Eigenschaft {{domxref("WebGLContextEvent.statusMessage")}}, die einen plattformabhängigen String mit weiteren Informationen über den Fehler enthält.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesJa
CancelableJa
Zielobjekt{{domxref("HTMLCanvasElement")}}
Interface{{domxref("WebGLContextEvent")}}
+ +

Beispiel

+ +
var canvas = document.getElementById("canvas");
+
+canvas.addEventListener("webglcontextcreationerror", function(e) {
+  console.log(e.statusMessage || "Unknown error");
+}, false);
+
+var gl = canvas.getContext("webgl");
+// logs statusMessage or "Unknown error" if unable to create WebGL context
+
+ +

Vererbung

+ +

Das webglcontextcreationerror Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.

+ +

{{InheritanceDiagram('','','', 'WebGLContextEvent')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL', '#5.15.4', 'webglcontextcreationerror')}}{{Spec2('WebGL')}}Grundlegende Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop(49)}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile(49)}}{{CompatUnknown}}128
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html new file mode 100644 index 0000000000..786d9e49b9 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html @@ -0,0 +1,133 @@ +--- +title: webglcontextlost +slug: Web/API/HTMLCanvasElement/webglcontextlost_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextlost_event +--- +
{{APIRef}}
+ +
+

Das webglcontextlost Event der WebGL API wird ausgelöst, wenn der User-Agent feststellt, dass der mit dem {{domxref("WebGLRenderingContext")}}-Objekt verknüpften Drawing Buffer verloren gegangen ist.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesJa
CancelableJa
Zielobjekt{{domxref("HTMLCanvasElement")}}
Interface{{domxref("WebGLContextEvent")}}
+ +

Beispiel

+ +

Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das webglcontextlost Event simuliert werden:

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+
+canvas.addEventListener("webglcontextlost", function(e) {
+  console.log(e);
+}, false);
+
+gl.getExtension('WEBGL_lose_context').loseContext();
+
+// "webglcontextlost" event is logged.
+ +

Vererbung

+ +

Das webglcontextlost Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.

+ +

{{InheritanceDiagram('','','', 'WebGLContextEvent')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL', '#5.15.2', 'webglcontextlost')}}{{Spec2('WebGL')}}Grundlegende Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}128.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html new file mode 100644 index 0000000000..fc616cccdd --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html @@ -0,0 +1,135 @@ +--- +title: webglcontextrestored +slug: Web/API/HTMLCanvasElement/webglcontextrestored_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextrestored_event +--- +
{{APIRef}}
+ +
+

Das webglcontextrestored Event der WebGL API wird ausgelöst, wenn der User-Agent den Drawing Buffer das  {{domxref("WebGLRenderingContext")}}-Objekts wiederhergestellt hat.

+ +

Wenn der Context wiederhergestellt wurde, sind alle zuvor erzeugten WebGL-Ressourcen wie Texturen und Buffer nicht mehr gültig. Die WebGL-Applikation muss dann neu initalisiert und alle Ressourcen neu erstellt werden.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Zielobjekt{{domxref("HTMLCanvasElement")}}
Interface{{domxref("WebGLContextEvent")}}
+ +

Beispiel

+ +

Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das webglcontextrestored Event simuliert werden:

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+
+canvas.addEventListener("webglcontextrestored", function(e) {
+  console.log(e);
+}, false);
+
+gl.getExtension('WEBGL_lose_context').restoreContext();
+
+// "webglcontextrestored" event is logged.
+ +

Vererbung

+ +

Das webglcontextrestored Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.

+ +

{{InheritanceDiagram('','','', 'WebGLContextEvent')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL', '#5.15.3', 'webglcontextrestored')}}{{Spec2('WebGL')}}Grundlegende Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}128.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcollection/index.html b/files/de/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..b09998b7d4 --- /dev/null +++ b/files/de/web/api/htmlcollection/index.html @@ -0,0 +1,70 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

Die HTMLCollection repräsentiert eine generische Sammlung (Array-ähnliches Objekt) an Elementen (in Dokumentreihenfolge) und bietet Methoden und Eigenschaften zur Auswahl dieser aus einer Liste an.

+ +
Notiz: Diese Schnittstelle wird aus historischen Gründen HTMLCollection genannt (vor DOM4 konnten Sammlungen, die diese Schnittstelle implementierten, nur HTML-Elemente als Einträge haben).
+ +

Eine HTMLCollection in der HTML DOM ist live; sie wird automatisch aktualisiert, wenn das zugrundeliegende Dokument verändert wird.

+ +

Eigenschaften

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Gibt die Anzahl der Elemente in der Auflistung zurück.
+
+ +

Methoden

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Gibt den spezifischen Knoten am angegebenen nullbasierten index in die Liste zurück.
+ Gibt null zurück, wenn der index außerhalb des Bereichs ist.
+
{{domxref("HTMLCollection.namedItem()")}}
+
Gibt den spezifischen Knoten, dessen ID oder alternativ dessen Name auf die Zeichenkette (spezifiziert durch name) passt, zurück. Die Übereinstimmung des Namens wird nur als letzte Möglichkeit, nur in HTML, und nur, wenn das referenzierte Element das name Attribut unterstützt, durchgeführt.
+ Gibt null zurück, wenn kein Code des angegebenen Namens existiert.
+
+ +

Verwendung in JavaScript

+ +

HTMLCollection setzt auch seine Member direkt als Eigenschaften von name und index. HTML IDs können Doppelpunkte und Punkte als gültige Zeichen beinhalten, was das Verwenden von Klammern für den Zugriff auf Eigenschaften erfordert. Derzeit erkennt HTMLCollections rein numerische IDs nicht, da sie einen Konflikt mit dem Array-ähnlichen Zugriff verursachen würden, obwohl HTML5 dies erlaubt.

+ +

Zum Beispiel, unter der Annahme, dass es ein <form> Element im Dokument und die id "myForm" ist:

+ +
var elem1, elem2;
+
+// document.forms ist eine HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // zeigt: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // zeigt: "true"
+
+elem1 = document.forms["bennantes.Element.mit.Punkten"];
+ +

Browser Kompatibilität

+ +

Verschiedene Browser verhalten sich unterschiedlich, wenn es mehr als ein Element gibt, das auf die Zeichenkette passt, die als ein index (oder namedItems Argument) verwendet wird. Firefox 8 verhält sich wie in DOM 2 and DOM4 angegeben, und gibt das erste passende Element zurück. WebKit Browser und Internet Explorer geben in diesem Fall eine andere HTMLCollection und Opera eine {{domxref("NodeList")}} aller passenden Elemente zurück.

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/htmlformelement/elements/index.html b/files/de/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..e5be5603ac --- /dev/null +++ b/files/de/web/api/htmlformelement/elements/index.html @@ -0,0 +1,46 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +
+
APIRef("HTML DOM")
+
+ +

Die HTMLFormElement.elements Eigenschaft gibt eine domxref("HTMLFormControlsCollection") ( HTMLVersionInline(4) HTMLCollection) aller im FORM element enthaltenen Formularsteuerelemente zurück, mit Ausnahme von input , die ein type attribute haben von image.

+ +

Sie können auf ein bestimmtes Element zugreifen, indem Sie entweder einen Index oder den Elementnamen oder die ID verwenden.

+ +

Syntax

+ +
nodeList = HTMLFormElement.elements
+
+ +

Beschreibung

+ +
let inputs = document.getElementById("form1").elements;
+let inputByIndex = inputs[2];
+let inputByName = inputs["login"];
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements') Spec2('HTML WHATWG')
SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")Spec2("DOM2 HTML")Initial definition
diff --git a/files/de/web/api/htmlformelement/index.html b/files/de/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..45fbc2e027 --- /dev/null +++ b/files/de/web/api/htmlformelement/index.html @@ -0,0 +1,260 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - DOM + - HTML + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLFormElement interface provides methods to create and modify {{HTMLElement("form")}} elements.

+ + + +

{{InheritanceDiagram(600,120)}}

+ +

Properties

+ +

This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}
+
A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.
+
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
+
A long reflecting  the number of controls in the form.
+
{{domxref("HTMLFormElement.name")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
+
{{domxref("HTMLFormElement.method")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
+
{{domxref("HTMLFormElement.target")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.
+
{{domxref("HTMLFormElement.action")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
+
{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.
+
{{domxref("HTMLFormElement.acceptCharset")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.
+
{{domxref("HTMLFormElement.autocomplete")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
+
{{domxref("HTMLFormElement.noValidate")}}
+
A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.
+
+ +

Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).

+ +

Methods

+ +

This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.submit()")}}
+
Submits the form to the server.
+
{{domxref("HTMLFormElement.reset()")}}
+
Resets the form to its initial state.
+
{{domxref("HTMLFormElement.checkValidity()")}}
+
Returns true if the element's child controls are subject to constraint validation and satisfy those contraints; returns false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
+
{{domxref("HTMLFormElement.reportValidity()")}}
+
Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.
+
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}
+
Triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem. This method has been removed from Chrome and Firefox — see {{bug(1270740)}} for background information on why.
+
+ +

Examples

+ +

Create a new form element, modify its attributes and submit it:

+ +
var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST"
+f.submit();                            // Call the form's submit method
+
+ +

Extract information from a form element and set some of its attributes:

+ +
<form name="formA" id="formA" action="/cgi-bin/test" method="POST">
+ <p>Click "Info" for form details; "Set" to change settings.</p>
+ <p>
+  <input type="button" value="info" onclick="getFormInfo();">
+  <input type="button" value="set"  onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset"><br>
+  <textarea id="tex" style="height:15em; width:20em"></textarea>
+ </p>
+</form>
+
+<script type="text/javascript">
+  function getFormInfo(){
+    var info;
+    var f = document.forms["formA"]; //Get a reference to the form via id.
+    info = "elements: " + f.elements     + "\n"
+         + "length: "   + f.length       + "\n"
+         + "name: "     + f.name         + "\n"
+         + "charset: "  + f.acceptCharset+ "\n"
+         + "action: "   + f.action       + "\n"
+         + "enctype: "  + f.enctype      + "\n"
+         + "encoding: " + f.encoding     + "\n"
+         + "method: "   + f.method       + "\n"
+         + "target: "   + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+  function setFormInfo(f){ //Argument is a reference to the form.
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+ +

Submit a form in a popup window:

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function popupSend (oFormElement) {
+  if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
+    console.error("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+</head>
+
+<body>
+
+<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
+  <p>First name: <input type="text" name="firstname" /><br />
+  Last name: <input type="text" name="lastname" /><br />
+  Password: <input type="password" name="pwd" /><br />
+  <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
+  <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
+  <input type="checkbox" name="vehicle" value="Car" />I have a car</p>
+  <p><input type="submit" value="Submit" /></p>
+</form>
+
+</body>
+</html>
+ +

Submitting forms and uploading files using XMLHttpRequest

+ +

If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read this paragraph.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}The following method has been added: requestAutocomplete().
{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: checkValidity(). The following properties have been added: autocomplete, noValidate, and encoding.
{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM2 HTML')}}No change
{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In Firefox 56, the implementation has been updated so that the action property returns the correct form submission URL, as per spec ({{bug(1366361)}}).

+ +

See also

+ + diff --git a/files/de/web/api/htmlformelement/submit_event/index.html b/files/de/web/api/htmlformelement/submit_event/index.html new file mode 100644 index 0000000000..722fba4d46 --- /dev/null +++ b/files/de/web/api/htmlformelement/submit_event/index.html @@ -0,0 +1,76 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event +tags: + - Event + - submit +translation_of: Web/API/HTMLFormElement/submit_event +--- +

Das submit Event tritt ein, wenn ein Formular (<form ...></form>) abgeschickt wird.

+ +

Es gilt zu beachten, dass das submit Event nur auf dem Formularelement ausgelöst wird. Der auslösende <button> oder <input type="submit" ... /> erhalten das Event nicht (Es wird das Formular abgeschickt, nicht der Button).

+ +

Allgemein

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationHTML5
Interface{{domxref("Event")}}
Propagiert ("Bubbles")Ja (obwohl eigentlich einfach Event ohne Propagation)
CancelableJa
ZielElement
StandardaktionAbhängig von Implementierung (schickt Inhalt des Formulars zum Server)
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
diff --git a/files/de/web/api/htmlinputelement/index.html b/files/de/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..284d3cc770 --- /dev/null +++ b/files/de/web/api/htmlinputelement/index.html @@ -0,0 +1,435 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +tags: + - API + - HTML DOM + - HTMLInputElement + - Input + - Interface + - NeedsContent + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLInputElement +--- +
{{ APIRef("HTML DOM") }}
+ +

The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties related to the parent form
form {{readonlyInline}}{{domxref("HTMLFormElement")}} object: Returns a reference to the parent {{HtmlElement("form")}} element.
formActionstring: Returns / Sets the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.
formEncTypestring: Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.
formMethodstring: Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.
formNoValidate{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.
formTargetstring: Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply to any type of input element that is not hidden
namestring: Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.
typestring: Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
disabled{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}
autofocus{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
required{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.
valuestring: Returns / Sets the current value of the control. +

Note: If the user enters a value different from the value expected, this may return an empty string.

+
validity {{readonlyInline}}{{domxref("ValidityState")}} object: Returns the element's current validity state.
validationMessage {{readonlyInline}}string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the setCustomValidity method.
willValidate {{readonlyInline}}{{jsxref("Boolean")}}: Returns whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a datalist ancestor; its disabled property is true.
+ + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type checkbox or radio
checked{{jsxref("Boolean")}}: Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultChecked{{jsxref("Boolean")}}: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminate{{jsxref("Boolean")}}: Returns whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
+ + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type image
altstring: Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
heightstring: Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
srcstring: Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
widthstring: Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type file
acceptstring: Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
allowdirs {{non-standard_inline}}{{jsxref("Boolean")}}: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
filesReturns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}{{jsxref("Boolean")}}: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.
{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}Array of {{domxref("FileSystemEntry")}} objects: Describes the currently selected files or directories.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to text/number-containing or elements
autocompletestring: Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
+ on: the browser can autocomplete the value using previously stored value
+ off: the user must explicity enter a value
maxstring: Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.
maxLengthlong: Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the maximum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
minstring: Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
minLengthlong: Returns / Sets the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the minimum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
patternstring: Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a regular expression that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholderstring: Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnlyboolean: Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.
+ {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.
sizeunsigned long: Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, which contains the visual size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
+ + + + + + + + + + + + + + + + + +
Properties that apply only to elements with type text/password/search/tel/url/week/month
selectionStartunsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.
selectionEndunsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirectionstring: Returns / Sets the direction in which selection occurred. Possible values are:
+ forward if selection was performed in the start-to-end direction of the current locale
+ backward for the opposite direction
+ none if the direction is unknown
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties not yet categorized
defaultValuestring: Returns / Sets the default value as originally specified in the HTML that created this object.
dirNamestring: Returns / Sets the directionality of the element.
accessKeystring: Returns a string containing a single character that switches input focus to the control when pressed.
list {{readonlyInline}}{{domxref("HTMLElement")}} object: Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be null if no HTML element found in the same tree.
multiple{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).
files{{domxref("FileList")}} array: Returns the list of selected files.
{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}{{domxref("NodeList")}} array: Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.
stepstring: Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate{{jsxref("Date")}} object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdouble: Returns the value of the element, interpreted as one of the following, in order: +
    +
  • A time value
    • +
  • A number
    • +
  • NaN if conversion is impossible
    • +
+
autocapitalize {{experimental_inline}}string: Defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
inputmodeProvides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
+ +
+
{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
+
string: Represents the alignment of the element. Use CSS instead.
+
{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
+
string: Represents a client-side image map.
+
+ +

Methods

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{domxref("HTMLElement.blur()", "blur()")}}Removes focus from the input element; keystrokes will subsequently go nowhere.
{{domxref("HTMLElement.click()", "click()")}}Simulates a click on the input element.
{{domxref("HTMLElement.focus()", "focus()")}}Focuses on the input element; keystrokes will subsequently go to this element.
{{domxref("HTMLInputElement.select()", "select()")}}Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}Selects a range of text in the input element (but does not focus it).
{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}Replaces a range of text in the input element with new text.
setCustomValidity()Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity()Returns a {{jsxref("Boolean")}} that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
reportValidity()Runs the checkValidity() method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
+ +
+
{{domxref("HTMLInputElement.stepDown()")}}
+
Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
{{domxref("HTMLInputElement.stepUp()")}}
+
Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}
+
Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
+
{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}
+
Returns an array of all the file names from the input.
+
{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}
+
Sets the filenames for the files selected on the input. Not for use in frame scripts, because it accesses the file system.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface:

+ +
+
input
+
Fires when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements.
+ Also available via the oninput event handler property.
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+ Also available via the oninvalid event handler property.
+
search
+
Fired when a search is initiated on an {{HTMLElement("input")}} of type="search".
+ Also available via the onsearch event handler property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
+ The following properties are now obsolete: align and useMap.
+ The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.HTMLInputElement")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/htmlinputelement/select/index.html b/files/de/web/api/htmlinputelement/select/index.html new file mode 100644 index 0000000000..14354e31dc --- /dev/null +++ b/files/de/web/api/htmlinputelement/select/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLInputElement.select() +slug: Web/API/HTMLInputElement/select +tags: + - Auswählen + - HTML + - JavaScript + - Méthode +translation_of: Web/API/HTMLInputElement/select +--- +
{{ APIRef("HTML DOM") }}
+ +

Die HTMLInputElement.select() Methode selektiert den gesamten Text innerhalb eines {{HTMLElement("textarea")}} oder innerhalb eines {{HTMLElement("input")}} Elements welches ein Textfeld enthält.

+ +

Syntax

+ +
element.select();
+ +

Beispiel

+ +

Klick in diesem Beispiel auf den Button um den gesamten Text innerhalb des <input> Elements zu selektieren.

+ +

HTML

+ +
<input type="text" id="text-box" size="20" value="Hallo Welt!">
+<button onclick="selectText()">Text auswählen</button>
+
+ +

JavaScript

+ +
function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.select();
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Anmerkungen

+ +

Die Methode element.select() fokussiert den Input nicht zwingend, weshalb es oft zusammen mit {{domxref("HTMLElement.focus()")}} verwendet wird.

+ +

In Browsern in denen es nicht unterstützt wird ist es möglich es mit HTMLInputElement.setSelectionRange() (mit den Parametern 0 und der Länge des Werts des Inputs) zu ersetzen.

+ +
<input onClick="this.select();" value="Beispieltext" />
+<!-- gleichbedeutend mit -->
+<input onClick="this.setSelectionRange(0, this.value.length);" value="Beispieltext" />
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}{{Spec2('HTML WHATWG')}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.HTMLInputElement.select")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlslotelement/assignednodes/index.html b/files/de/web/api/htmlslotelement/assignednodes/index.html new file mode 100644 index 0000000000..77ab2aef3d --- /dev/null +++ b/files/de/web/api/htmlslotelement/assignednodes/index.html @@ -0,0 +1,66 @@ +--- +title: HTMLSlotElement.assignedNodes() +slug: Web/API/HTMLSlotElement/assignedNodes +translation_of: Web/API/HTMLSlotElement/assignedNodes +--- +

{{APIRef("Shadow DOM API")}}

+ +

Die Eigenschaft assignedNodes() der Schnittstelle {{domxref("HTMLSlotElement")}} gibt die Reihenfolge der diesem Slot zugewiesenen Elemente oder alternativ den Fallback-Inhalt des Slots zurück.

+ +

Syntax

+ +
var assignedNodes[] = HTMLSlotElement.assignedNodes([options])
+ +

Parameter

+ +
+
options {{optional_inline}}
+
Ein Objekt, das Optionen für die zurückzugebenden Knoten festlegt. Die verfügbaren Optionen sind: +
    +
  • flatten: Ein {{jsxref('Boolean')}}, das angibt, ob die dem Slot zugewiesenen Elemente zurückgegeben werden sollen (wenn dieser Wert false ist) oder der Fallback-Inhalt des Slots (wenn dieser Wert true ist). Die Vorgabe ist false.
    • +
+
+
+ +

Rückgabewerte

+ +

Ein Array von Knoten.

+ +

Beispiele

+ +

Das folgende Schnippsel ist unserem Slotchange-Beispiel entnommen (siehe auch live).

+ +
let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});
+ +

Hier nehmen wir Verweise auf alle Slots und fügen dann einen Slotchange Event Listener zum zweiten Slot in der Vorlage hinzu - derjenige, dessen Inhalt im Beispiel geändert wird.

+ +

Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, protokollieren wir einen Bericht an die Konsole, aus dem hervorgeht, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','scripting.html#dom-slot-assignednodes','assignedNodes')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Kompatibilität

+ +
+ + +

{{Compat("api.HTMLSlotElement.assignedNodes")}}

+
diff --git a/files/de/web/api/htmlslotelement/index.html b/files/de/web/api/htmlslotelement/index.html new file mode 100644 index 0000000000..2644171f01 --- /dev/null +++ b/files/de/web/api/htmlslotelement/index.html @@ -0,0 +1,67 @@ +--- +title: HTMLSlotElement +slug: Web/API/HTMLSlotElement +tags: + - API + - HTMLSlotElement + - Interface + - NeedsTranslation + - Reference + - TopicStub + - shadow dom +translation_of: Web/API/HTMLSlotElement +--- +

{{APIRef('Web Components')}}

+ +

The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML {{HTMLElement("slot")}} element.

+ +

Properties

+ +
+
{{domxref('HTMLSlotElement.name')}}
+
{{domxref("DOMString")}}: Can be used to get and set the slot's name.
+
+ +

Methods

+ +
+
{{domxref('HTMLSlotElement.assignedNodes()')}}
+
Returns the sequence of elements assigned to this slot, or alternatively the slot's fallback content.
+
+ +

Examples

+ +

The following snippet is taken from our slotchange example (see it live also).

+ +
let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});
+ +

Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.

+ +

Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','scripting.html#htmlslotelement','HTMLSlotElement')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLSlotElement")}}

diff --git a/files/de/web/api/htmltableelement/createcaption/index.html b/files/de/web/api/htmltableelement/createcaption/index.html new file mode 100644 index 0000000000..fb27bd6480 --- /dev/null +++ b/files/de/web/api/htmltableelement/createcaption/index.html @@ -0,0 +1,75 @@ +--- +title: HTMLTableElement.createCaption() +slug: Web/API/HTMLTableElement/createCaption +tags: + - API + - DOM + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/createCaption +--- +
{{APIRef("HTML DOM")}}
+ +

Die HTMLTableElement.createCaption() Methode gibt das {{HtmlElement("caption")}} Element zurück, das einer {{HtmlElement("table")}} zugeordnet ist. Wenn in der Tabelle noch kein <caption> Element existiert, wird es durch diese Methode erzeugt und dann zurückgegeben..

+ +
+

Anmerkung: Wenn noch keine Überschrift vorhanden ist, fügt createCaption() sie direkt in die Tabelle ein. Die Überschrift muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <caption> Element mittels {{domxref("Document.createElement()")}} erzeugt hätte.

+
+ +

Syntax

+ +
HTMLTableCaptionElement = table.createCaption();
+ +

Rückgabewert

+ +

{{domxref("HTMLTableCaptionElement")}}

+ +

Beispiel

+ +

Dieses Beispiel verwendet JavaScript, um eine Tabelle um eine Überschrift zu erweitern.

+ +

HTML

+ +
<table>
+  <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
+  <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
+</table>
+ +

JavaScript

+ +
let table = document.querySelector('table');
+let caption = table.createCaption();
+caption.textContent = 'Diese Überschrift wurde mit JavaScript erzeugt!';
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-table-createcaption', 'HTMLTableElement: createCaption')}}{{Spec2('HTML WHATWG')}}
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.HTMLTableElement.createCaption")}}

+
diff --git a/files/de/web/api/htmltableelement/index.html b/files/de/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..696556f62f --- /dev/null +++ b/files/de/web/api/htmltableelement/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLTableElement +--- +

{{APIRef("HTML DOM")}}

+ +

The HTMLTableElement interface provides special properties and methods (beyond the regular {{DOMxRef("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.

+ +
+
{{DOMxRef("HTMLTableElement.caption")}}
+
Is a {{DOMxRef("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <caption>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <caption> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.tHead")}}
+
Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <thead>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <thead> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.tFoot")}}
+
Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <tfoot>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <tfoot> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child of one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <thead> appear first, in tree order, and those members of a <tbody> last, also in tree order. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
+
{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
+
+ +

Obsolete Properties

+ +
+

Warning: The following properties are obsolete.  You should avoid using them.

+
+ +
+
+
{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are "left", "right", and "center".
+
{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", or "border".
+
{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: "none", "groups", "rows", "cols", or "all".
+
{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.
+
+
+ +

Methods

+ +

Inherits methods from its parent, {{DOMxRef("HTMLElement")}}.

+ +
+
{{DOMxRef("HTMLTableElement.createTHead()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element.
+
{{DOMxRef("HTMLTableElement.deleteTHead()")}}
+
Removes the first {{HTMLElement("thead")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.createTFoot()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.
+
{{DOMxRef("HTMLTableElement.deleteTFoot()")}}
+
Removes the first {{HTMLElement("tfoot")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.createCaption()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.
+
{{DOMxRef("HTMLTableElement.deleteCaption()")}}
+
Removes the first {{HTMLElement("caption")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.insertRow()")}}
+
Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given index position. If necessary a {{HTMLElement("tbody")}} is created. If the index is -1, the new row is appended to the collection. If the index is smaller than -1 or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value IndexSizeError is raised.
+
{{DOMxRef("HTMLTableElement.deleteRow()")}}
+
Removes the row corresponding to the index given in parameter. If the index value is -1 the last row is removed; if it smaller than -1 or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value IndexSizeError is raised.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}{{Spec2('HTML WHATWG')}}Added the sortable property and the stopSorting() method.
{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}{{Spec2('HTML5 W3C')}}Added the createTBody() method.
{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM2 HTML')}}Defined when caption, tHead, tFoot, insertRow(), and deleteRow() raise exceptions.
{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLTableElement")}}

+ +

See also

+ + diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..869d185b98 --- /dev/null +++ b/files/de/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,122 @@ +--- +title: HTMLTableElement.insertRow() +slug: Web/API/HTMLTableElement/insertRow +tags: + - API + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +
{{APIRef("HTML DOM")}}
+ +

Die Methode HTMLTableElement.insertRow() fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.

+ +

Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <tbody> hinzugefügt. Um sie einem bestimmten <tbody> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <tbody> Element und rufen Sie insertRow() auf diesem Element auf:

+ +
let bestimmter_tbody = document.getElementById(tbody_id);
+let zeile = bestimmter_tbody.insertRow(index)
+ + + +
+

Anmerkung: insertRow() fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <tr> Element mittels Document.createElement() erzeugt hätte.

+
+ +

Syntax

+ +
var neueZeile = HTMLTableElement.insertRow(index);
+ +

{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.

+ +

Parameters

+ +
+
index {{optional_inline}}
+
Der Zeilenindex der neuen Zeile. Ist der Index -1 or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn index größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer IndexSizeError Exception. Wird index weggelassen, ist der Standardwert -1.
+
+ +

Rückgabewert

+ +

neueZeile ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.

+ +

Beispiel

+ +

Dieses Beispiel verwendet insertRow(-1), um an eine Tabelle eine neue Zeile anzufügen.

+ +

Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <tr> mindestens ein <td> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.

+ +

HTML

+ +
<table id="my-table">
+  <tr><td>Row 1</td></tr>
+  <tr><td>Row 2</td></tr>
+  <tr><td>Row 3</td></tr>
+</table>
+ +

JavaScript

+ +
function addRow(tableID) {
+  // Beschaffe eine Referenz auf die Tabelle
+  let tableRef = document.getElementById(tableID);
+
+  // Füge am Ende der Tabelle eine neue Zeile an
+  let newRow = tableRef.insertRow(-1);
+
+  // Erstelle in der Zeile eine Zelle am Index 0
+  let newCell = newRow.insertCell(0);
+
+  // Füge der Zelle einen textnode hinzu
+  let newText = document.createTextNode('Neue letzte Zeile');
+  newCell.appendChild(newText);
+}
+
+// Rufe addRow() mit der ID der Tabelle auf
+addRow('my-table');
+ +

Result

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Spezifiziert genauer, wo die Zeile eingefügt wird.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Initiale Definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.HTMLTableElement.insertRow")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/htmlunknownelement/index.html b/files/de/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..d1f6107473 --- /dev/null +++ b/files/de/web/api/htmlunknownelement/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +translation_of: Web/API/HTMLUnknownElement +--- +

{{APIRef("HTML DOM")}}

+ +

Die Schnittstelle HTMLUnknownElement stellt ein ungültiges HTML-Element dar und leitet sich von der Schnittstelle {{DOMxRef("HTMLElement")}} ab, ohne jedoch zusätzliche Eigenschaften oder Methoden zu implementieren.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Eigenschaften

+ +

Keine spezifische Eigenschaft; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.

+ +

Methoden

+ +

Keine spezifische Methode; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Keine Änderung von {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Erstdefinition.
+ +
+

Browser-Kompatibilität

+
+ + + +

{{Compat("api.HTMLUnknownElement")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/index.html b/files/de/web/api/index.html new file mode 100644 index 0000000000..3173fac5cf --- /dev/null +++ b/files/de/web/api/index.html @@ -0,0 +1,14 @@ +--- +title: Web API Referenz +slug: Web/API +tags: + - API + - DOM + - JavaScript + - Reference + - Web +translation_of: Web/API +--- +

Javascript bietet eine große Auswahl an hervorragenden Schnittstellen (APIs). Nachfolgend findet sich eine Liste aller APIs auf die Du zurückgreifen kannst, um deine Webapp oder Webseite zu programmieren.

+ +
{{APIListAlpha}}
diff --git a/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html new file mode 100644 index 0000000000..436886fe21 --- /dev/null +++ b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -0,0 +1,131 @@ +--- +title: Browser storage limits and eviction criteria +slug: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +tags: + - Datenbank + - Datenlöschung + - IndexDB + - Speicher + - Speicherung + - client-seitig +translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +

Es gibt eine Reihe von Web-Technologien, die Daten auf die eine oder andere Art und Weise client-seitig speichern (bspw. auf der lokalen Festplatte). Der Prozess, durch welchen der Browser bestimmt, wieviel Speicherplatz er der Webdatenspeicherung zur Verfügung stellen soll, und was gelöscht werden soll, wenn dieses Limit erreicht wurde, ist nicht einfach und unterscheidet sich zwischen verschiedenen Browsern. Dieser Artikel versucht zu erklären, wie dies funktioniert.

+ +
+

Info: Die untenstehenden Informationen sollten für die meisten modernen Browser zutreffen. Wo bekannt, werden browserspezifische Eigenheiten benannt. Opera und Chrome sollten sich in allen Fällen gleich verhalten. Opera Mini (noch presto-basiert, serverseitiges Rendering) speichert kein Daten lokal auf dem Client.

+
+ +

Welche Technologien nutzen Browser zur lokalen Datenspeicherung?

+ +

In Firefox werden die folgenden Technologien eingesetzt, um Daten lokal bei Bedarf zu sichern. Wir bezeichnen sie in diesem Zusammenhang als "Quota Clients" :

+ + + +
+

Info: In Firefox, Web Storage wird bald die gleichen Speichermanagement Tools wie in diesem Dokument beschrieben einsetzen.

+
+ +
+

Info: Im privaten Browsermodus werden die meisten Speichermethoden nicht unterstützt. Local storage Daten und Cookies werden zwar noch immer gespeichert, aber sie sind flüchtig — sie werden gelöscht, wenn das letzte private Browserfenster geschlossen wurde.

+
+ +

Die "letzte Zugriffszeit" der Quelle wird aufdatiert wenn irgendeine von ihnen aktiviert oder deaktiviert wird — die Löschung der Quelle löscht die Daten für alle diese "Quota Clients".

+ +

In Chrome/Opera kümmert sich die Quota Management API um das Quota Management für den AppCache, die IndexedDB, WebSQL und die File System API.

+ +

Unterschiedliche Typen der Datenspeicherung

+ +

Sogar wenn man die gleiche Speichermethode im gleichen Browser verwendet, muss man unterschiedliche Klassen der Datenspeicherung verstehen. Dieser Abschnitt behandelt die Unterschiede in verschiedenen Browsern.

+ +

Speicherung kann auf zwei Arten vorkommen:

+ + + +

Sobald persistente Daten gespeichert werden sollen, bekommt ein Benutzer in Firefox eine Popup-Warnung, um darauf hinzuweisen, dass die Daten dauerhaft gespeichert werden sollen und fragt gleichzeitig ab, ob er damit einverstanden ist. Temporäre Datenspeicherung löst nicht eine solche Warnung aus.

+ +

Datenspeicherung ist standardmäßig temporär. Entwickler können die Nutzung persistenten Speichers durch Aufruf der Methode {{domxref("StorageManager.persist()")}} aus der Storage API erreichen.

+ +

Wo werden die Daten gespeichert?

+ +

Jeder Speichertyp nutzt ein eigenes Repository. Hier ist ein konkretes Mapping auf die Verzeichnisse im Profil eines Firefox Benutzers (andere Browser können hiervon leicht abweichen):

+ + + +
+
+

Info: Nach Einführung der Storage API kann das "permanent" Verzeichnis als obsolet bestrachtet werden. Das "permanent" Verzeichnis beinhaltet nur noch persistente IndexedDB Datenbasen. Es macht keinen Unterschied, ob der box mode "best-effort" oder "persistent" ist — die Daten werden unter <profile>/storage/default abgelegt.

+
+
+ +
+

Info: In Firefox kann man sein Profilverzeichnis aufrufen, indem man about:support in die URL Adresszeile eingibt und den Ordner öffnen Knopf in der Zeile Profilordner drückt.

+
+ +
+

Info: Wenn man im Profilordner in den Datenspeicherordnern sucht, findet man noch einen vierten Ordner namens persistent. Der persistent Ordner wurde ursprünglich vor einer Weile in permanent umbenannt, um Upgrades und Migrationen zu vereinfachen.

+
+ +
+

Info: Benuter sollten unter dem Verzeichnis <profile>/storage keine eigenen dateien oder Verzeichnisse anlegen. Dies führt dazu, dass die Speicherinitialisierung fehlschlägt; zum Beispiel führt dann {{domxref("IDBFactory.open()", "open()")}} zu einem Fehlerevent.

+
+ +

Speichergrenzen

+ +

Der maximale Speicherplatz des Browsers ist dynamisch — er basiert auf der Größe der Festplatte. Das globale Limit berechnet sich als 50% des freien Plattenspeichers. In Firefox überwacht ein internes Tool namensQuota Manager wieviel Speicher jede Quelle nutzt und löscht gegebenenfalls Daten.

+ +

Wenn die Festplatte 500 GB freien Speicher aufweist, ist die maximale Größe des Speichers 250 GB. Wenn diese Größe überschritten wird, kommt ein Prozess namens origin eviction ins Spiel, welcher die kompletten Daten einzelner Quellen löscht, bis diese Größe wieder unterschritten wurde. Es werden nie Teile von Quellen gelöscht, da teilweise Daten einer Quelle zu Inkonsistenzen führen können.

+ +

Zudem gibt es eine weitere Begrenzung namens Gruppenlimit — dieses ist definiert als 20% des globalen Limits, aber hat ein Minimum von 10 MB und ein Maximum von 2 GB. Jede Quelle ist Teil einer Gruppe (Gruppe von Quellen). Es gibt eine Gruppe für jede eTLD+1 Domain. Zum Beispiel:

+ + + +

Innerhalb dieser Gruppe, mozilla.org, www.mozilla.org, und joe.blogs.mozilla.org können zusammen ein Maximum von 20% des globalen Limits nutzen. firefox.com hat als weitere Gruppe ein separates Maximum von 20%.

+ +

Beide Limits haben unterschiedliche Auswirkungen, wenn sie erreicht werden:

+ + + +
+

Info: Das Gruppenlimit kann nie mehr als das globale Limit sein. Bei extrem niedrigen Speicherstand von beispielsweisen 8MB globalen Limit, ist das Gruppenlimit ebenfalls nur 8MB.

+
+ +
+

Note: Wenn das Gruppenlimit überschritten wird oder eine ausgelöste automatische Datenlöschung nicht genug Speicher freiräumen kann, wirft der Browser einen QuotaExceededError.

+
+ +

LRU Policy

+ +

Wenn der verfügbare Speicherplatz aufgebnraucht wurde, startet das Quota Management eine Datenlöschung nach der LRU (Least Recently Used) Policy — die Daten der am längsten nicht benutzten Quellen werden zuerst gelöscht, dann die zweitältesten usw., bis der Browser wieder unter das Speicherlimit fällt.

+ +

Die letzte Zugriffszeit für jede Quelle wird im temporären Speicher vorgehalten. Sobald das globale Limit für temporären Speicher erreicht wurde,  (mehr dazu später), werden alle derzeit ungenutzten Quellen identifiziert (z.Bsp., ohne offene Tabs oder Apps, die aktuell auf den Datenspeicher zugreifen). Diese werden dann nach der letzten Zugriffszeit sortiert. Die am längsten ungenutzten Daten werden dann zuerst gelöscht, bis genug Speicher frei wird, dass die Operation ausgeführt werden kann, die zur Auslösung der Datenlöschung verantwortlich war.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html new file mode 100644 index 0000000000..6ae6f33dd7 --- /dev/null +++ b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html @@ -0,0 +1,194 @@ +--- +title: Grundkonzepte +slug: Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

IndexedDB ermöglicht es Ihnen Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Weil es Sie Webanwendungen mit funktionsreichen Abfragemöglichkeiten erstellen lässt, können diese Anwendungen sowohl online als auch offline funktionieren. IndexedDB ist geeignet für Anwendungen, die eine große Menge an Daten speichern (z.B. ein Katalog von DVDs in einer Videothek) und Anwendungen, die keine durchgehende Internetverbindung benötigen um zu funktionieren (z.B. E-Mail-Clients, To-Do-Listen oder Notizen).

+

Über dieses Dokument

+

Diese Einführung bespricht wesentliche Konzepte und Fachbegriffe in IndexedDB. Sie liefert Ihnen einen Gesamtüberblick und führt Sie in die Schlüsselkonzepte ein. Um mehr über die Begrifflichkeiten von IndexedDB zu erfahren, lesen Sie den Abschnitt Definitionen.

+

Eine Anleitung zur Verwendung der API finden Sie im Artikel Using IndexedDB. Eine Referenzdokumentierung der IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Objekttypen dokumentiert, die von IndexedDB verwendet werden, ebenso wie die Methoden von synchronen wie asynchronen APIs.

+

Überblick über IndexedDB

+

Mit IndexedDB lassen sich indizierte Objekte mit „Schlüsseln“ ablegen und abrufen. Alle Änderungen an der Datenbank geschehen innerhalb von Transaktionen. Wie die meisten Webspeicher-Lösungen folgt IndexedDB einer Same-Origin-Policy. Während also auf Daten, die innerhalb einer Domain gespeichert wurden, zugegriffen werden kann, kann nicht domainübergreifend auf Daten zugegriffen werden.

+

Die API umfasst sowohl eine asynchrone API als auch eine synchrone API. Die asynchrone API kann für die meisten Fälle verwendet werden, auch für WebWorkers, während die synchrone API nur für den Gebrauch durch WebWorkers gedacht ist. Momentan wird die synchrone API von keinem der großen Browser unterstützt. Aber selbst wenn synchrone APIs unterstützt wären, würden Sie eher die asynchrone API verwenden, wenn Sie mit IndexedDB arbeiten.

+

IndexedDB ist eine Alternative zur WebSQL-Datenbank, welche vom W3C am 18. November 2010 als veraltet erklärt wurde. Während sowohl IndexedDB als auch WebSQL Lösungen zur Speicherung von Daten bieten, bieten sie nicht dieselben Funktionalitäten. WebSQL-Datenbank ist ein relationales Datenbankanfragesystem, IndexedDB hingegen ist ein indiziertes Tabellensystem.

+

Wichtige Konzepte

+

Wenn Sie die Arbeit mit anderen Datenbanksystemen gewohnt sind kann die Arbeit mit IndexedDB am Anfang ungewohnt erscheinen. Behalten Sie deshalb folgende wichtige Konzepte im Hinterkopf:

+ +

Definitionen

+

Dieser Abschitt definiert und erklärt Begriffe, die in der IndexedDB-API verwendet werden.

+

Datenbank

+
+
+ Datenbank
+
+ Ein Aufbewahrungsort für Informationen, typischerweise bestehend aus einem oder mehreren Objektspeichern. Jede Datenbank muss folgende Angaben enthalten: +
    +
  • Name. Er identifiziert die Datenbank innerhalb einer konkreten Herkunft und verändert sich nicht innerhalb seiner Lebenszeit. Der Name kann aus einem beliebigen String-Wert bestehen (einschließlich dem leeren String).
    • +
  • +

    Aktuelle Version. Wenn eine Datenbank zum ersten Mal erstellt wird, nimmt ihre Version den integer-Wert 1 an, wenn nichts anderes angegeben wird. Jede Datenbank kann zu einem Zeitpunkt nur eine Version haben.

    +
    • +
+
+
+ Objektspeicher
+
+

Das Instrument, mit welchem Daten in einer Datenbank gespeichert werden. Der Objektspeicher hält Eintragungen aus Schlüssel-Wert-Paaren permanent. Eintragungen innerhalb eines Objektspeichers werden entsprechend der Schlüssel in aufsteigender Reihenfolge sortiert.

+

Jeder Objektspeicher muss einen Namen haben, der innerhalb seiner Datenbank einzigartig ist. Der Objektspeicher kann optional einen Schlüsselerzeuger und einen Schlüsselpfad besitzen. Wenn der Objektspeicher einen Schlüsselpfad hat, verwendet er in-line keys; ansonsten out-of-line keys.

+

Eine Referenzdokumentation zu Objektspeichern finden Sie unter IDBObjectStore oder IDBObjectStoreSync.

+
+
+ Version
+
+ Wenn eine Datenbank zum ersten Mal erstellt wird, ist ihre Versionsnummer die integer-Zahl 1. Jede Datenbank hat zu jedem Zeitpunkt genau eine Versionsnummer; eine Datenbank kann nicht in verschiedenen Versionen gleichzeitig existieren. Die Versionsnummer kann nur geändert werden, indem die Datenbank mit einer größeren Versionsnummer geöffnet wird als mit der aktuellen. Das wird die Transaktion versionchange starten und ein upgradeneeded Ereignis auslösen. Die einzige Stelle, an der das Schema der Datenbank geupdatet werden kann, ist innerhalb des Handlers dieses Ereignisses.
+  
+
+ Anmerkung: Diese Definition beschreibt die aktuellsten Spezifikationen, welche nur in Browsern auf dem neuesten Stand implementiert sind. In alten Browsern ist die mittlerweile veraltete und entfernte Methode IDBDatabase.setVersion() implementiert.
+
+ Datenbankverbindung
+
+ Eine Operation, die beim Öffnen einer Datenbank erstellt wird. Eine vorgegebene Datenbank kann mehrere Verbindungen gleichzeitig haben.
+
+ Transaktion
+
+

Eine nicht teilbare und dauerhafte Menge an Datenzugriffs- und Datenmodifikationsoperationen auf einer bestimmten Datenbank. Durch Transaktionen können Sie auf die Daten einer Datenbank zugreifen. Tatsächlich muss jeder Lese- oder Schreibvorgang von Daten in einer Transaktion stattfinden.
+
+ Eine Datenbankverbindung kann mit mehreren aktiven Transaktionen gleichzeitig verknüpft sein, so lange schreibende Transaktionen keine überlappenden scopes haben. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them—even overlapping ones.

+

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

+

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

+

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see IDBTransaction, which also has reference documentation. For the documentation on the synchronous API, see IDBTransactionSync.

+
+
+ Anfrage
+
+ Die Operation, mit der Lese- und Schreibvorgänge auf einer Datenbank ausgeführt werden. Jede Anfrage repräsentiert eine Lese- oder Schreiboperation.
+
+ Index
+
+

Ein Spezialobjektspeicher zum Nachschlagen von Einträgen eines anderen Objektspeichers, bezeichnet als referenzierter Objektspeicher. Der Index ist ein persistenter Schlüssel-Wert-Speicher, wobei der Wert seiner Einträge dem Schlüssel eines Eintrages im referenzierten Objektspeicher entspricht. Die Einträge in einem Index werden automatisch eingepflegt, sobald Einträge im referenzierten Objekt eingefügt, aktualisiert oder entfernt werden. Jeder Eintrag in einem Index kann auf nur einen Eintrag in seinem referenzierten Objektspeicher zeigen, aber mehrere Indizes können auf denselben Objektspeicher verweisen. Wenn der Objektspeicher sich ändert, werden alle Indizes, die auf ihn verweisen, automatisch aktualisiert.

+

Alternativ können Einträge eines Objektspeichers mithilfe eines Schlüssels nachgeschlagen werden.

+

Um mehr über die Verwendung von Indizes zu erfahren, lesen Sie Using IndexedDB. Die Referenzdokumentation zu Indizes finden Sie unter IDBKeyRange.

+
+
+

Schlüssel und Wert

+
+
+ Schlüssel
+
+

Ein Datenwert über welchen abgelegte Werte aus dem Objektspeicher sortiert und ausgelesen werden können. Der Objektspeicher kann den Schlüssel aus einer dieser drei Quellen erlangen: Einem Schlüsselgenerator, einem Schlüsselpfad und einem explizit angegebem Wert. Der Schlüssel muss aus einem Datentyp bestehen, der eine Nummer hat, die größer ist als die des Schlüssel vor ihm. Jeder Eintrag in einem Objektspeicher muss einen innerhalb des gleichen Objektspeichers einzigartigen Schlüssel haben, deshalb können nicht mehrere Einträge mit demselben Schlüssel in einem vorgegebenem Objektspeicher vorliegen.
+
+ Ein Schlüssel kann einen der folgenden Typen haben: string, date, float und array. Bei Arrays kann der Schlüssel zwischen einem leeren Wert und unendlich liegen. Arrays können wiederum Arrays beinhalten. Es gibt keine Vorschrift nur Schlüssel der Typen string oder integer zu verwenden {{ fx_minversion_inline("11") }}.

+

Alternativ können Sie Einträge eines Objektspeichers auch mithilfe eines Index nachschlagen.

+
+
+ Schlüsselgenerator
+
+ Ein Mechanismus um neue Schlüssel in einer angeordneten Reihenfolge zu erzeugen. Wenn ein Objektspeicher über keinen Schlüsselgenerator verfügt, muss die Anwendung Schlüssel für zu speichernde Einträge zur Verfügung stellen. Generatoren werden nicht zwischen Speichern geteilt. Dies ist mehr ein Detail von Browserimplementierungen, da in der Webentwicklung nicht wirklich Schlüsselgeneratoren erzeugt oder auf sie zugegriffen wird.
+
+ in-line key
+
+ A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
+
+ out-of-line key
+
+ A key that is stored separately from the value being stored.
+
+ key path
+
+ Defines where the browser should extract the key from a value in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. It cannot include spaces.
+
+ value
+
+

Each record has a value, which could include anything that can be expressed in JavaScript, including: boolean, number, string, date, object, array, regexp, undefined, and null.

+

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

+

Blobs and files can be stored, cf. specification {{ fx_minversion_inline("11") }}.

+
+
+

Range and scope

+
+
+ scope
+
+ The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
+
+ cursor
+
+ A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see IDBCursor or IDBCursorSync.
+
+ key range
+
+

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

+

For the reference documentation on key range, see IDBKeyRange.

+
+
+

Limitations

+

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

+ +

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

+ +

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

+
+

Warning: At the moment due to bugs or on purpose it's impossible to open an IndexedDB database from a Web App. This needs more investigation and then be documented.

+
+

Next step

+

OK, so, now with these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

+

See also

+

Specification

+ +

Reference

+ +

Tutorials

+ +

Related article

+ diff --git a/files/de/web/api/indexeddb_api/index.html b/files/de/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..171ca8a4c5 --- /dev/null +++ b/files/de/web/api/indexeddb_api/index.html @@ -0,0 +1,252 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +tags: + - API + - Datenbank + - Einstieg + - IndexedDB + - NeedsTranslation + - Referenz + - Speicher + - TopicStub + - speichern +translation_of: Web/API/IndexedDB_API +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +

IndexedDB ist eine low-level API für die clientseitige Speicherung großer Mengen strukturierter Daten einschließlich Dateien. Sie erlaubt auch Hochleistungssuchen dieser Daten durch die Verwendung von Indizes. Während der DOM Speicher nützlich zur Speicherung kleiner Datenmengen ist, ist er für größere Mengen strukturierte Daten wenig hilfreich. IndexedDB stellt hierfür eine Lösung bereit. Dies ist die Einstiegsseite der IndexedDB Referenz von MDN — hier stellen wir Links zur vollständigen API Referenz, Gebrauchsanleitungen, Unterstützungsdetails der Browser und einige Erklärungen des Schlüsselkonzepts zur Verfügung.

+ +

{{AvailableInWorkers}}

+ +
+

Anmerkung: Die IndexedDB API ist leistungsfähig, kann aber für einfache Anwendungen zu kompliziert erscheinen. Wenn Du eine einfachere API bevorzugst, versuche Sammlungen wie localForage und dexie.js. Diese machen IndexedDB benutzerfreundlicher.

+
+ +
+

Anmerkung: Manche älteren Browser unterstützen IndexedDB nicht aber sie unterstützen WebSQL. Eine Möglichkeit dieses Problem zu umgehen ist es, mittels polyfill auf WebSQL oder auch auf localStorage für nicht unterstützende Browser zurückzugreifen. Das beste erhältiche polyfill ist derzeit localForage.

+
+ +

Schlüsselkonzepte und Gebrauch

+ +

IndexedDB ist ein direktes Datenbank System, wie ein SQL-basiertes RDMS; während allerdings das Letztere Tabellen mit fixen Spalten benutzt, ist IndexedDB eine JavaScript-basierte objekt-orientierte Datenbank. IndexedDB läßt dich Objekte, die mit einem Schlüssel indiziert sind, speichern und wiederfinden. Jedes Objekt, das von einem strukturierten Klon Algorithmus unterstützt wird, kann gespeichert werden. Du brauchst zum Beschreiben des Datenbankschemas eine offene Verbindung zu deiner Datenbank, dann kannst du Daten mit einer Reihe von Tranaktionen wiederfinden und aktualisieren.

+ + + +
+

Anmerkung: wie die meisten Web Speicher Lösungen folgt IndexedDB einem gleicher-Ursprung Grundsatz. Deshalb ist es nicht möglich auf Daten anderer Domänen zuzugreifen, während man auf gespeicherte Daten innerhalb einer Domäne zugreift.

+
+ +

Synchron und asynchron

+ +

Operationen unter Verwendung von IndexedDB werden asynchron durchgeführt, um Anwendungen nicht zu blockieren. IndexedDB beinhaltete ursprünglich eine asynchrone und eine synchrone API; die synchrone API war nur für den Gebrauch von Web Workers gedacht. Die synchrone Version wurde aus der Spezifikation entfernt, weil ihre Notwendigkeit fraglich war, aber sie kann in Zukunft wieder eingeführt werden, wenn es genug Nachfrage von Web Entwicklern gibt.

+ +

Speichergrenzen und Löschkriterien

+ +

Es gibt mehrere Webtechnologien, um Daten auf die eine oder andere Art auf der Client Seite zu speichern (d. h. auf deiner lokalen Festplatte), über IndexedDB wird dabei am häufigsten geredet. Der Prozess mit dem der Browser herausfindet, wieviel Speicherplatz Webdaten zur Verfügung gestellt werden soll und was gelöscht werden soll, wenn die Grenze erreicht ist, ist nicht einfach und unterscheidet sich zwischen den Browsern. Browser Speichergrenzen und Löschkriterien versuchen zu erklären, wie das geschieht - zumindest im Fall von Firefox.

+ +

IndexedDB Schnittstellen

+ +

Um Zugang zu einer Datenbank zu erhalten, benutze open() von den indexedDB Attributen eines window Objekts. Diese Methode gibt ein {{domxref("IDBRequest")}} Objekt zurück; asynchrone Operationen kommunizieren mit der aufrufenden Anwendung durch feuern von Events von {{domxref("IDBRequest")}} Objekten.

+ +

Mit einer Datenbank verbinden

+ +
+
{{domxref("IDBEnvironment")}}
+
Stellt den Zugang zur IndexedDB Funktionalität zur Verfügung. Es ist implementiert durch die {{domxref("window")}} und {{domxref("worker")}} Objekte.
+
{{domxref("IDBFactory")}}
+
Stellt den Zugang zu einer Datenbank bereit. Dies ist die durch das globale Objekt indexedDB bereitgestellte Schnittstelle und dadurch der Eingangspunkt für die API.
+
{{domxref("IDBOpenDBRequest")}}
+
Stellt eine Anfrage zum Öffnen einer Datenbank dar.
+
{{domxref("IDBDatabase")}}
+
Repräsentiert eine Verbindung zu einer Datenbank. Es ist der einzige Weg eine Transaktion in der Datenbank zu erreichen.
+
+ +
+
{{domxref("IDBRequest")}}
+
Eine allgemeine Schnittstelle, die Datenbankabfragen behandelt und den Zugang zu Ergebnissen bereitstellt.
+
+ +

Abrufen und modifizieren von Daten

+ +
+
{{domxref("IDBTransaction")}}
+
Stellt eine Transaktion dar. Du erstellst eine Transaktion zu einer Datenbank, beschreibst den Geltungsbereich (beispielsweise auf welchen Objekt Speicher du zugreifen willst), und bestimmst die Art des Zugriffs (nur lesen oder lesen und schreiben), den du willst.
+
{{domxref("IDBObjectStore")}}
+
Steht für einen Objektspeicher, der Zugriff auf einen Datensatz in einer IndexedDB Datenbank erlaubt via Primärschlüsselsuche.
+
{{domxref("IDBIndex")}}
+
Gestattet ebenfalls Zugriff auf eine Teilmenge von Daten in einer IndexedDB Datenbank. Nutzt allerdings einen Index anstelle eines Primärschlüssels um an Einträge zu gelangen. Dies kann schneller sein als die Verwendung von {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBCursor")}}
+
Iterates over object stores and indexes.
+
{{domxref("IDBCursorWithValue")}}
+
Iterates over object stores and indexes and returns the cursor's current value.
+
{{domxref("IDBKeyRange")}}
+
Defines a key range that can be used to retrieve data from a database in a certain range.
+
{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
+
Defines a key range that can be used to retrieve data from a database in a certain range, sorted acording to the rules of the locale specified for a certain index (see createIndex()'s optionalParameters.).
+
+ +

Custom event interfaces

+ +

This specification fires events with the following custom interface:

+ +
+
{{domxref("IDBVersionChangeEvent")}}
+
The IDBVersionChangeEvent interface indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.
+
+ +

Obsolete interfaces

+ +

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

+ +
+
{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}
+
Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}} {{obsolete_inline}}
+
Represents exception conditions that can be encountered while performing database operations.
+
{{domxref("IDBTransactionSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBTransaction")}}.
+
{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBIndexSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBIndex")}}.
+
{{domxref("IDBFactorySync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBFactory")}}.
+
{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBEnvironment")}}.
+
{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBDatabase")}}.
+
{{domxref("IDBCursorSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBCursor")}}.
+
+ +

Examples

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

23.0 {{property_prefix("webkit")}}
+ 24

+ 		{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatGeckoDesktop("43.0")}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatGeckoMobile("22.0")}}1.0.110228
Available in workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatGeckoMobile("43.0")}}[2]2.5[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ + + +

See also

+ + diff --git a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html new file mode 100644 index 0000000000..3d6d61cf3f --- /dev/null +++ b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html @@ -0,0 +1,1180 @@ +--- +title: Verwendung von IndexedDB +slug: Web/API/IndexedDB_API/IndexedDB_verwenden +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +

Mit IndexedDB lassen sich Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Es können so Webanwendungen mit funktionsreichen Abfragemöglichkeiten in Anwendungen erstellt werden, die sowohl online als auch offline funktionieren können, da keine Netzwerkfunktionalitäten benötigt werden.

+ +

Über dieses Dokument

+ +

Dieses Tutorial bespricht die Verwendung der asynchronen API von IndexedDB. Wenn Sie nicht mit IndexedDB vertraut sind, sollten Sie zuerst den Artikel Grundkonzepte lesen.

+ +

Eine Referenzdokumentation zur IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Typen und Objekten dokumentieren, die von IndexedDB verwendet werden, ebenso wie die Methoden von sowohl synchronen als auch asynchronen APIs.

+ +

Grundschema

+ +

Das von IndexedDB unterstützte Grundschema sieht folgendermaßen aus:

+ +
    +
  1. Öffne eine Datenbank und starte eine Transaktion.
    2. +
  2. Erzeuge einen Objektspeicher.
    3. +
  3. Fordere die Ausführung von Datenbankoperationen an, wie das Hinzufügen und Auslesen von Daten.
    4. +
  4. Warte auf die richtige Art von DOM-Ereignis, das auftritt, wenn die Operation beendet ist.
    5. +
  5. Verarbeite die Ergebnisse? (, welche im Anforderungsobjekt gefunden werden können).
    6. +
+ +

Mit dem Wissen über diese Grundkonzepte können wir uns nun konkreteren Dingen zuwenden.

+ +

Erzeugung und Strukturierung des Speichers

+ +

Weil sich die Spezifizierung noch in der Entwicklung befindet, verstecken sich aktuelle Implementierungen von IndexedDB unter Browserpräfixen. Bis sich die Spezifizierung verfestigt, könne Browserhersteller unterschiedliche Implementierungen der Standard-IndexedDB-API haben. Aber sobald Konsens auf dem Standard herrscht, implementieren die Hersteller ihn ohne Markierung durch Präfixe. Tatsächlich ist in manchen Implementierungen der Präfix entfernt: Internet Explorer 10, Firefox 16, Chrome 24. Wenn auf Gecko basierende Browser einen Präfix verwenden, dann verwenden sie den Präfix moz, während auf WebKit basierende Browser den Präfix webkit verwenden.

+ +

Verwendung einer experimentellen Version von IndexedDB

+ +

Für den Fall, dass Sie Ihren Code in Browsern verwenden wollen, die noch Präfixe verwenden, können Sie folgenden Code benutzen:

+ +
// In der folgenden Zeile sollten Sie die Präfixe einfügen, die Sie testen wollen.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Verwenden Sie "var indexedDB = ..." NICHT außerhalb einer Funktion.
+// Ferner benötigen Sie evtl. Referenzen zu einigen window.IDB* Objekten:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla hat diese Objekte nie mit Präfixen versehen, also brauchen wir kein window.mozIDB*)
+ +

Beachten Sie, dass Implementierungen, die Präfixe verwenden, fehlerhaft oder unvollständig sein können oder einer alten Version der Spezifizierung folgen können. Deshalb ist es nicht empfohlen, sie im Produktivsystem zu verwenden. In manchen Fällen kann es sinnvoll sein, lieber einen Browser nicht zu unterstützen als zu behaupten, er würde unterstützt, und dann Fehler einzubüßen:

+ +
if (!window.indexedDB) {
+    window.alert("Ihr Browser unterstützt keine stabile Version von IndexedDB. Dieses und jenes Feature wird Ihnen nicht zur Verfügung stehen.");
+}
+
+ +

Öffnen einer Datenbank

+ +

Wir starten den ganzen Prozess folgendermaßen:

+ +
// Öffnen unserer Datenbank
+var request = window.indexedDB.open("MeineTestdatenbank", 3);
+
+ +

Sie sehen, das Öffnen einer Datenbank funktioniert wie jede andere Operation – Sie müssen sie „anfordern“.

+ +

Die Anforderung zum Öffnen öffnet nicht sofort die Datenbank und startet auch die Transaktion nicht gleich. Der Aufruf zur open() Funktion gibt ein IDBOpenDBRequest-Objekt mit Ergebniswert (Erfolg) oder Fehlerwert zurück, die Sie als Ereignis verarbeiten. Die meisten anderen asynchronen Funktionen in IndexedDB machen das gleiche – sie geben ein IDBRequest-Objekt mit Ergebnis oder Fehler zurück. Das Ergebnis für die open-Funktion ist eine Instanz einer IDBDatabase.

+ +

Der zweite Parameter der open-Methode ist die Version der Datenbank. Die Version der Datenbank bestimmt das Datenbankschema – den Objektspeichern und ihrer Strukturen. Wenn die angeforderte Version nicht existiert (weil die Datenbank neu ist, oder weil die Version aktualisiert wurde), wird das Ereignis onupgradeneeded ausgelöst, und es lässt sich eine neue Version der Datenbank im Handler für dieses Ereignis erzeugen. Mehr dazu später im Abschnitt Aktualisieren der Version der Datenbank.

+ +

Erzeugen von Handlern

+ +

Das erste, was Sie mit fast allen Anforderungen machen wollen, die Sie erzeugen, ist das Hinzufügen von Handlern für Erfolge und Fehler:

+ +
request.onerror = function(event) {
+  // Machen Sie etwas mit request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Machen Sie etwas mit request.result!
+};
+ +

Welche der beiden Funktionen, onsuccess() oder onerror(), wird aufgerufen? Wenn alles fehlerfrei ablief, wird ein Erfolgsereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "success" gesetzt ist) mit request als target ausgelöst. Sobald es ausgelöst wurde, wird die Funktion onsuccess() auf request ausgelöst mit dem Erfolgsereignis als Argument. Wenn nicht alles fehlerfrei ablief, wird ein Fehlerereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "error" gesetzt ist) auf request ausgelöst. Dies löst die Funktion onerror() aus mit dem Fehlerereignis als Argument.

+ +

Die IndexedDB-API ist so entworfen, dass sie die Notwendigkeit zur Fehlerbehandlung minimiert, also werden Sie wahrscheinlich nicht viele Fehlerereignisse sehen (zumindest nicht nachdem Sie sich an die API gewöhnt haben!). Beim Öffnen von Datenbanken jedoch gibt es ein paar typische Zustände, die Fehlerereignisse erzeugen. Das wahrscheinlichste Problem ist, dass der Benutzer festgelegt hat, den Webapps das Erzeugen von Datenbanken nicht zu erlauben. Eines der Hauptentwurfsziele von IndexedDB ist es, das Speichern von großen Datenmengen zur Offline-Verwendung zu erlauben. (Um mehr darüber zu erfahren, wieviel Speicher jedem Browser zur Verfügung steht, lesen Sie Storage limits).

+ +

Offensichtlich wollen Browser nicht irgendeinem Werbenetzwerk oder einer böswilligen Website erlauben, Ihren Computer zu verschmutzen, deshalb warnen Browser den Benutzer, wenn eine Webapp zum ersten Mal versucht einen IndexedDB-Speicher zu öffnen. Der Benutzer kann wählen, ob er den Zugriff erlaubt oder verbietet. Außerdem ist IndexedDB komplett deaktiviert im Privaten Modus der Browser (Privater Modus für Firefox und Incognito Modus für Chrome). Der Hauptzweck vom Surfen im Privaten Modus ist es, keine Spuren zu hinterlassen, daher schlägt der Versuch fehl, eine Datenbank in diesem Modus zu öffnen.

+ +

Nun nehmen wir an, dass der Benutzer Ihren Anfragen erlaubt hat, eine Datenbank zu erstellen, und Sie haben ein Erfolgsereignis erhalten, um den Erfolgs-Callback auszulösen; was kommt als nächstes? Die Anfrage wurde hier mit einem Aufruf von indexedDB.open() erzeugt, also ist request.result eine Instanz von IDBDatabase, und Sie wollen diese auf jeden Fall für später speichern. Ihr Code könnte etwa so aussehen:

+ +
var db;
+var request = indexedDB.open("MeineTestdatenbank");
+request.onerror = function(event) {
+  alert("Warum haben Sie meiner Webapp nicht erlaubt IndexedDB zu verwenden?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Fehlerbehandlung

+ +

Wie bereits oben erwähnt, werden Error events bei entsprechenden Fehlern ausgelöst und in der Objekthierarachie weiter nach oben gereicht. Solche Fehlerereignisse  werden zunächst in der entsprechende Anfrage ausgelöst, die den Fehler verursacht hat. Anschließend werden sie zur Transaktion weitergereicht und schließlich zum Datenbankobjekt.  Wenn man nicht für jede Anfrage einen Error-Handler schreiben möchte, kann man der Datenbank einen einzigen Error-Handler hinzufügen:

+ +
db.onerror = function(event) {
+  // Allgemeine Fehlerbehandlung, die für alle Anfragen an die Datenbank gilt.
+  alert("Datenbankfehler: " + event.target.errorCode);
+};
+
+ +

Einer der häufigsten Fehler, die beim Öffnen der Datenbank auftreten, ist  VER_ERR.  Er zeigt an, dass die Versionsnummer der lokal gespeicherten Datenbank  größer  als die Versionsnummer ist,  die man zu öffnen versucht. Ein solcher Fehler muss immer durch eine Fehlerbehandlung berücksichtigt werden.

+ +

Erstellen oder Updaten der Datenbank

+ +

Wenn eine neue Version der Datenbank erstellt wird, wird das onupgradeneeded Event ausgelöst. In der Handler-Funktion dieses Events musst du für die Erstellung der Datenbankspeicher, welche für diese Version benötigt wird, sorgen:

+ +
// Dieses Event ist lediglich in modernen Browsern verfügbar
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Erstelle ein ObjectStore für diese Datenbank
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

The Versionsnummer der Datenbank ist vom Typ unsigned long long, so dass sie eine sehr große Ganzzahl sein kann.

+ +
+

Das Bedeutet auch, dass sie nicht vom Typ float sein darf,  ansonsten wird sie zur nächstkleineren Ganzzahl abgerundet, so dass die Transaktion weder starten kann noch ein  upgradeneeded ausgelöst wird. Beispielsweise sollte man nicht 2.4 als Versionsnummer verwenden:

+ +
var request = indexedDB.open("MeineTestdatenbank", 2.4); // don't do this, as the version will be rounded to 2
+
+ +

Wenn man die Versionsnummer der Datenbank erhöht, wird ein  onupgradeneeded -Ereignis ausgelöst. In diesem Fall übernimmt die neue Datenbank automatisch die Objectstores von der Vorgängerversion der Datenbank, so dass man diese nicht erneut erzeugen muss. Lediglich neue Objectsores müssen angelegt oder nicht mehr gebrauchte der Vorgängerversion gelöscht werden. Wenn man einen bereits existierenden Objectstore ändern will (beispielsweise den keyPath veränden), ist es allerdings notwendig, den alten Objectstore zu löschen und einen neuen anzulegen. (Beachten Sie, dass dies die im Objectstore gespeicherten Informationen löscht, so dass man sie vorher auslesen und an anderer Stelle sichern sollte, bevor man ein Datenbankupgrade durchführt.)

+ +

WebKit unterstützt die aktuelle Version dieser Spezifikation, wie sie in Chrome 23+ ausgeliefert wird, ebenso Opera 17+ und IE10+. Andere und ältere Implementierungen unterstützen nicht die aktuelle Version dieser Spezifikation und stellen damit auch noch nicht die Möglichkeit bereit, auf die Methodensignatur indexedDB.open(name, version).onupgradeneeded zugreifen zu könenn. Um ältere Versionen einer Datenbank auf neuer Versionen zu aktualisieren, siehe IDBDatabase reference article.

+ +

Strukturierung der Datenbank

+ +

Im Folgenden wird gezeigt, wie man eine die Daten  strukturiert. IndexedDB verwendet Objectstores anstatt Tabellen, wobei eine einzelne Datenbank viele verschiedene Objectsores enthalten kann. Jeglicher Wert im Objectstore ist einem bestimmten Schlüssel (key) zugeordnet. Es werden dabei unterschiedliche Arten von Schlüsseln verarbeitet, abhängig davon, ob der Objectstore  einen key path oder einen key generator benutzt.

+ +

Die folgende Tabelle gibt eine Übersicht über die bereitgestellten Arten von Schlüssseln.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key PathKey GeneratorBeschreibung
NeinNeinDieser Objectstore kann Daten beliebigen Typs speichern, inklusive primitiven Typen wie Zahlen und Zeichenketten (Strings). Beim Hinzufügen von Werten muss ein separater Schlüssel angegeben werden.
JaNeinDieser Objectstore kann nur JavaScript-Objekte speichern. Die Objekte müssen ein Attribut haben, dass wie der key path benannt ist.
NeinJaDieser Objectstore kann Daten beliebigen Typs speichern. Beim Hinzufügen von Werten kann ein separater Schlüssel angegeben werden. Fehlt der Schlüssel, so wird er generiert.
JaJaDieser Objectstore kann nur JavaScript-Objekte speichern. In der Regel wird der Schlüssel automatisch generiert und als gleichnamiges Attribut im Objekt gespeichert. Falls es jedoch bereits ein Attribut mit dem Namen gibt, so wird der Schlüssel nicht generiert, sondern der Wert des Attributes wird verwendet.
+ +

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

+ +

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

+ +

That may sound confusing, but this simple example should illustrate the concepts:

+ +
// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+
+ +

As mentioned previously, onupgradeneeded is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

+ +
Object stores are created with a single call to createObjectStore(). The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.
+ +

We've also asked for an index named "name" that looks at the name property of the stored objects. As with createObjectStore(), createIndex() takes an optional options object that refines the type of index that you want to create. Adding objects that don't have a name property still succeeds, but the object won't appear in the "name" index.

+ +

We can now retrieve the stored customer objects using their ssn from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

+ +

Hinzufügen und löschen von Daten

+ +

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

+ +

Daten zur Datenbank hinzufügen

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling preventDefault() on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the put() function.

+ +

Daten aus der Datenbank löschen

+ +

Löschen von Daten ist recht ähnlich:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Daten aus der Datenbank auslesen

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property. Easy, right?!

+ +

Benutzung eines Cursors

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
Warnung: Die folgende Funktion ist nicht Teil des IndexedDB Standards.
+ +

Mozilla has also implemented getAll() to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll(), Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+ +

Benutzung eines Index

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Specifying the range and direction of cursors

+ +

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function:

+ +
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Versionsänderung während eine Webapplikation in einem anderen Tab geöffnet ist

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Sicherheit

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.

+ +

Warnung über die Schließung des Browsers

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Vollständiges IndexedDB Beispiel

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Nächster Schritt

+ +

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

+ +

Siehe auch

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/de/web/api/keyboardevent/altkey/index.html b/files/de/web/api/keyboardevent/altkey/index.html new file mode 100644 index 0000000000..3f16f6d710 --- /dev/null +++ b/files/de/web/api/keyboardevent/altkey/index.html @@ -0,0 +1,118 @@ +--- +title: KeyboardEvent.altKey +slug: Web/API/KeyboardEvent/altKey +translation_of: Web/API/KeyboardEvent/altKey +--- +

{{APIRef("DOM Events")}}

+ +

Der Konstruktor KeyboardEvent.altKey hat die Eigenschaft {{jsxref("Boolean")}} und zeigt an ob alt Taste (Option oder ⌥ in OS X) gedrückt wurde (true) oder (false) nicht gerdrückt wurde, wenn das Ereignis eintritt.

+ +

Syntax

+ +
var altKeyPressed = instanceOfKeyboardEvent.altKey
+
+ +

Examples

+ +
<html>
+<head>
+<title>altKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>
+Press any character key,
+with or without holding down the ALT key.<br />
+You can also use the SHIFT key together with the ALT key.
+</p>
+</body>
+</html>
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/de/web/api/keyboardevent/getmodifierstate/index.html b/files/de/web/api/keyboardevent/getmodifierstate/index.html new file mode 100644 index 0000000000..75b1c5e36d --- /dev/null +++ b/files/de/web/api/keyboardevent/getmodifierstate/index.html @@ -0,0 +1,247 @@ +--- +title: KeyboardEvent.getModifierState() +slug: Web/API/KeyboardEvent/getModifierState +translation_of: Web/API/KeyboardEvent/getModifierState +--- +

{{APIRef("DOM Events")}}

+ +

Die Methode KeyboardEvent.getModifierState() gibt den aktuellen Zustand des angegebenen Modifikators zurück: true, wenn der Modifikator aktiv ist (d.h. die Modifikationstasten gedrückt oder gesperrt ist), ansonsten false.

+ +

Syntax

+ +
var active = event.getModifierState(keyArg);
+ +

Rückgabe 

+ +

Einen {{jsxref("Boolean")}}

+ +

Parameter

+ +
+
keyArg
+
Ein Modifikatorschlüsselwert. Der Wert muss einer der {{domxref("KeyboardEvent.key")}} Werte sein, die Modifikatorschlüssel darstellen, oder die Zeichenkette "Accel" {{deprecated_inline}}. Dabei wird zwischen Groß- und Kleinschreibung unterschieden.
+
+ +

Modifikationstasten im Internet Explorer

+ +

IE9 verwendet "Scroll" für "ScrollLock" und "Win" für "OS".

+ +

Modifikationstasten in Gecko

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Wann gibt getModifierState() bei Gecko true zurück?
 WindowsLinux (GTK)MacAndroid 2.3Android 3.0 und später
"Alt"Entweder die Alt oder AltGr -Taste gedrückt wirdAlt -Taste gedrückt wird⌥ Option -Taste gedrückt wirdAlt  oder  option -Taste gedrückt wird
"AltGraph" +

Sowohl die Alt als auch die Strg  werden gedrückt, oder die AltGr Taste wird gedrückt

+ 		Level 3 Shift Taste (or Level 5 Shift Taste {{gecko_minversion_inline("20.0")}}) wird gedrückt⌥ Option Taste wird gedrücktNicht unterstützt
"CapsLock"Während die LED für ⇪ Caps Lock leuchtetNicht unterstütztSolange ⇪ Caps Lock gesperrt ist {{gecko_minversion_inline("29.0")}}
"Control"Entweder die Strg  oder AltGr -Taste wird gedrücktStrg Taste wird gedrücktcontrol Taste wird gedrücktmenu Taste wird gedrückt.Strg, control  oder menu Taste wird gedrückt.
"Fn"Nicht unterstütztDie Function wird gedrückt, aber wir sind nicht sicher, welche Taste den Modifikatorstatus aktiv setzt. Die Fn-Taste auf der Mac-Tastatur bewirkt dies nicht.
+ {{gecko_minversion_inline("29.0")}}
"FnLock"Nicht unterstützt
"Hyper"Nicht unterstützt
"Meta"Nicht unterstütztMeta Taste wird gedrückt {{gecko_minversion_inline("17.0")}}⌘ Command Taste wird gedrücktNicht unterstützt⊞ Windows Logo  or command Taste gedrückt wird
"NumLock"Während die LED für Num Lock leuchtetEine Taste auf dem Nummerblock gedrückt wirdNicht unterstütztSolange NumLock gesperrt ist {{gecko_minversion_inline("29.0")}}
"OS"⊞ Windows Logo Taste wird gedrücktSuper or Hyper Taste wird gedrückt (normalerweise auf der ⊞ Windows Logo Taste zugeordnet)Nicht unterstützt
"ScrollLock"Während die LED für ScrollLock leuchtetWährend die LED für ScrollLock leuchtet, aber normalerweise wird dies von der Plattform nicht unterstützt Nicht unterstütztSolange ScrollLock gesperrt {{gecko_minversion_inline("29.0")}}
"Shift"⇧ Shift Taste wird gedrückt
"Super"Nicht unterstützt
"Symbol"Nicht unterstützt
"SymbolLock"Nicht unterstützt
+ + + +

"Accel" virtueller Modifikator

+ +
Notiz: Der virtuelle Modifikator "Accel" ist in den aktuellen Entwürfen der DOM3 Events-Spezifikation praktisch veraltet.
+ +

getModifierState() also accepts a deprecated virtual modifier named "Accel". event.getModifierState("Accel") returns true when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is true.

+ +

In old implementations and outdated specifications, it returned true when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing Ctrl key may make it return true. However, on Mac, pressing ⌘ Command key may make it return true. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, "ui.key.accelKey".

+ +

Beispiel

+ +
// Ignorieren, wenn folgender Modifikator aktiv ist.
+if (event.getModifierState("Fn") ||
+    event.getModifierState("Hyper") ||
+    event.getModifierState("OS") ||
+    event.getModifierState("Super") ||
+    event.getModifierState("Win") /* hack for IE */) {
+  return;
+}
+
+// auch ignorieren, wenn zwei oder mehr Modifikatoren außer Shift aktiv sind.
+if (event.getModifierState("Control") +
+    event.getModifierState("Alt") +
+    event.getModifierState("Meta") > 1) {
+  return;
+}
+
+// Tastaturkürzel mit Standardmodifikator
+if (event.getModifierState("Accel")) {
+  switch (event.key.toLowerCase()) {
+    case "c":
+      if (event.getModifierState("Shift")) {
+        // Handle Accel + Shift + C
+        event.preventDefault(); // consume the key event
+      }
+      break;
+    case "k":
+      if (!event.getModifierState("Shift")) {
+        // Handle Accel + K
+        event.preventDefault(); // consume the key event
+      }
+      break;
+  }
+  return;
+}
+
+// Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+if ((event.getModifierState("ScrollLock") ||
+       event.getModifierState("Scroll") /* hack for IE */) &&
+    !event.getModifierState("Control") &&
+    !event.getModifierState("Alt") &&
+    !event.getModifierState("Meta")) {
+  switch (event.key) {
+    case "ArrowDown":
+    case "Down": // Hack für IE und älteren Gecko
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowLeft":
+    case "Left": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowRight":
+    case "Right": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowUp":
+    case "Up": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+  }
+}
+
+ +
+

Obwohl dieses Beispiel .getModifierState() mit "Alt", "Control", "Meta" und "Shift" verwendet, ist es vielleicht besser, altKey, ctrlKey, metaKey und shiftKey zu verwenden, da sie kürzer und vielleicht schneller sind.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}{{Spec2('DOM3 Events')}}Initiale Definition (Modifier Keys spec)
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.KeyboardEvent.getModifierState")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/keyboardevent/index.html b/files/de/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..6f76b0b13f --- /dev/null +++ b/files/de/web/api/keyboardevent/index.html @@ -0,0 +1,458 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +translation_of: Web/API/KeyboardEvent +--- +
{{APIRef("DOM Events")}}
+ +

KeyboardEvent Objekte beschreiben eine Benutzerinteraktion mit dem Keyboard. Jedes Event beschreibt eine Taste. Der Eventtyp (keydown, keypress, oder keyup) identifiziert welche Art von Aktivität ausgeführt wurde.

+ +
Anmerkung: Das KeyboardEvent deutet nur an was mit einer Taste passiert. Wenn Sie Texteingaben behandeln müssen, verwenden sie stattdessen das HTML5 input Event. Beispiel: Wenn ein Benutzer Text über ein Handschriftsystem - wie auf einem Tablet - eingibt, werden Tastenevents möglicherweise nicht ausgelöst.
+ +

Konstruktor

+ +
+
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+
Erzeugt ein KeyboardEvent Objekt.
+
+ +

Methoden

+ +

Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.getModifierState()")}}
+
Liefert einen {{jsxref("Boolean")}} Wert welcher angibt ob eine Hilfstaste wie Alt, Shift, Ctrl, oder Meta gedrückt war als das Event erzeugt wurde.
+
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+
Initialisiert ein KeyboardEvent Objekt. Dies wurde nur durch Gecko implementiert (andere verwendeten {{domxref("KeyboardEvent.initKeyboardEvent()")}}) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstrutor zu verwenden.
+
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+
Initialisiert ein KeyboardEvent Objekt. Dies wurde nie von Gecko implementiert (da stattdessen {{domxref("KeyboardEvent.initKeyEvent()")}} verwendet wurde) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstruktor zu verwenden.
+
+ +

Eigenschaften

+ +

Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist falls die Alt ( Option oder ⌥ unter OS X) Taste aktiv war, als das Tastenevent erzeugt wurde.
+
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} der das Zeichen der Taste repräsentiert. Wenn die Taste einem druckbaren Zeichen entspricht, ist dieser Wert eine nicht-leere Unicode-Zeichenkette die dieses Zeichen enthält. Fall die Taste keine druckbare Darstellung besitzt, ist der Wert eine leere Zeichenkette. +
Anmerkung: Falls die Taste als Makro verwendet wird, das mehrere Zeichen einfügt, ist der Wert dieses Attributs die gesamte Zeichenkette, nicht nur das erste Zeichen.
+ +
Warnung: Dies wurde aus den DOM Level 3 Events entfernt. Es wird nur von IE9+ und Microsoft Edge unterstützt.
+
+
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der die Unicode-Kennziffer der Taste repräsentiert; dieses Attribut wird nur vom keypress Event verwendet. Für Tasten deren char Attribut mehrere Zeichen enthält ist der Wert dieses Attributs der Unicode-Wert des ersten Zeichens . In Firefox 26 liefert dies Codes für druckbare Zeichen. +
Warnung: Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.
+
+
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} mit dem Codewert der Taste, welche durch das Event repräsentiert wird.
+
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Ctrl Taste aktiv war als  das Key-Event erzeugt wurde.
+
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist falls das Event nach compositionstart und vor compositionend ausgelöst wird.
+
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} der den Wert der Taste darstellt die durch das Event repräsentiert wird.
+
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert. +
Warnung: Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.
+
+
{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Diese Eigenschaft ist nicht standardisiert und veraltet. Es sollte stattdessen {{domxref("KeyboardEvent.key")}} verwendet werden. Sie war Teil einer alten Version von DOM Level 3 Events.
+
{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Dies ist ein nicht-standardisierter Alias für {{domxref("KeyboardEvent.location")}}. Sie war Teil einer alten Version von DOM Level 3 Events.
+
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} der das Gebietsschema identifiziert für die das Keyboard konfiguriert ist. Diese Zeichenkette kann leer sein, wenn der Browser oder das Gerät das Gebietsschema des Keyboards nicht kennt. +
Anmerkung: Dies beschreibt nicht das Gebietsschema der eingegebenen Daten. Ein Benutzer könnte ein Tastaturlayout nutzen während er Text in einer anderen Sprache eingibt.
+
+
{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der die Lage der Taste auf der Tastatur oder einem anderen Eingabegerät repräsentiert.
+
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Meta Taste (auf Mac-Tastaturen, die ⌘ Command Taste; auf Windows-Tastaturen, die Windows -Taste (⊞)) aktiv war, als das Key-Event erzeugt wurde.
+
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Taste gedrückt gehalten wird, so dass sie sich automatisch wiederholt.
+
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Shift Taste aktiv war, als das Key-Event erzeugt wurde.
+
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert; das ist gewöhnlich das Gleiche wie keyCode. +
Warnung: Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.
+
+
+ +

Anmerkungen

+ +

Es gibt keydown, keypress, and keyup Events. Für die meisten Tasten versendet Gecko eine Sequenz von Key-Events wie folgt:

+ +
    +
  1. Wenn die Taste gedrückt wird, wird ein keydown Event gesendet.
    2. +
  2. Falls die Taste keine Hilfstaste ist, wird das keypress Event gesendet.
    3. +
  3. Wenn der Nutzer die Taste loslässt, wird das keyup Event gesendet.
    4. +
+ +

Sonderfälle

+ +

Einige Taste schalten den Status einer Kontrollleuchte um; dazu gehören Caps Lock, Num Lock, und Scroll Lock. Unter Windows und Linux senden diese Tasten nur keydown and keyup Events.

+ +
+

Unter Linux versendet Firefox 12 und eher das keypress Event auch für diese Tasten.

+
+ +

Jedoch sorgen die Einschränkungen des Mac OS X Event-Modells dafür, dass  Caps Lock nur das keydown Event versendet. Num Lock wurde auf einigen älteren Laptop-Modellen (Modelle 2007 und älter) unterstützt, aber seitdem hat Mac OS X  Num Lock nicht mehr untertstützt - nicht einmal auf externen Tastaturen. Auf älteren MacBooks mit einer Num Lock Taste, erzeugt diese Taste überhaupt keine KeyEvents. Gecko unterstützt die Scroll Lock Taste, falls eine externe Tastatur, die eine F14 Taste besitzt, angeschlossen ist. In bestimmten älteren Firefox-Versionen erzeugt diese Taste ein keypress Event; dieses inkonsistente Verhalten war {{bug(602812)}}.

+ +

Behandlung von Auto-repeat

+ +

Wenn eine Taste gedrückt und gehalten wird, beginnt sie die automatische Wiederholung (sog. auto-repeat). Das Resultat ist das Versenden einer Reihe von Events ähnlich der folgenden:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keydown
    4. +
  4. keypress
    5. +
  5. <<wiederholt sich bis der Nutzer die Taste loslässt>>
    6. +
  6. keyup
    7. +
+ +

Das sollte laut DOM Level 3 Spezifikation passieren. Allerdings gibt es einige Ausnahmen, wie unten beschrieben.

+ +

Auto-repeat in einigen GTK-Umgebungen wie Ubuntu 9.4

+ +

In einigen GTK-basierten Umgebungen versendet auto-repeat automatisch ein natives Key-Up Event während der automatischen Wiederholung und es ist für Gecko deshalb nicht möglich zwischen wiederholten Tastendrücken und einem auto-repeat unterscheiden zu können. Auf diesen Platformen wird eine Auto-Repeat Taste also die folgende Reihe von Events erzeugen:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keyup
    4. +
  4. keydown
    5. +
  5. keypress
    6. +
  6. keyup
    7. +
  7. <<wiederholt sich bis der Nutzer die Taste loslässt>>
    8. +
  8. keyup
    9. +
+ +

Innerhalb dieser Umgebungen gibt es leider keine Möglichkeit für Webinhalte den Unterschied zwischen selbst-wiederholenden Tasten und Tasten die wiederholt gedrückt werden herauszufinden.

+ +

Behandlung von auto-repeat vor Gecko 5.0

+ +

Vor Gecko 5.0 {{geckoRelease('5.0')}} war platformübergreifendes Tastatur-Handling weniger einheitlich.

+ +
+
Windows
+
Das Auto-Repeat-Verhalten ist das Gleiche wie in Gecko 4.0 und später.
+
Mac
+
Nach dem initialen keydown Event werden nur keypress Events gesendet bis das keyup Event auftritt; die dazwischendliegenden keydown Events werden nicht gesendet.
+
Linux
+
Das Event-Verhalten hängt von der spezifischen Platform ab. Es wird sich entweder so verhalten wie Windows oder Mac, abhängig davon was das native Event-Modell macht.
+
+ +

Anmerkung: manuelles Auslösen eines Events erzeugt nicht die mit dem Event verbundene Standard-Aktion. Zum Beispiel: manuelles Auslösen eines KeyEvent führt nicht dazu, dass der Buchstabe in einem fokussierten Eingabefeld auftaucht. Im Fall von UI-Events ist dies aus Sicherheitsgründen wichtig, da es verhindert, dass Skripte Benutzeraktionen simulieren, die mit dem Browser selbst interagieren.

+ +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+'use strict';
+
+document.addEventListener('keydown', (event) => {
+  const keyName = event.key;
+
+  if (keyName === 'Control') {
+    // not alert when only Control key is pressed.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Even though event.key is not 'Control' (i.e. 'a' is pressed),
+    // event.ctrlKey may be true if Ctrl key is pressed at the time.
+    alert(`Combination of ctrlKey + ${keyName}`);
+  } else {
+    alert(`Key pressed ${keyName}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) => {
+  const keyName = event.key;
+
+  // As the user release the Ctrl key, the key is no longer active.
+  // So event.ctrlKey is false.
+  if (keyName === 'Control') {
+    alert('Control key was released');
+  }
+}, false);
+
+</script>
+</head>
+
+<body>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}{{Spec2('DOM3 Events')}}Initiale Definition
+ +

Die KeyboardEvent Schnittstelle lief durch eine Vielzahl von Entwurfsversionen, erst unter DOM Events Level 2, wo sie verworfen wurde als kein Konsens entstand, danach unter DOM Events Level 3. Dies führte zu einer Implementation von nicht standardisierten Initialisationsmethoden, der frühen DOM Events Level 2 Version {{domxref("KeyboardEvent.initKeyEvent()")}} durch Gecko Browser und die frühe DOM Events Level 3 Version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} durch Andere. Beide wurden durch den modernen Einsatz eines Konstruktors ersetzt: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
constructor{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
.char{{CompatNo}}{{CompatUnknown}}{{CompatNo}}9{{CompatNo}}{{CompatNo}}
.charCode{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
.keyCode{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.locale{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.location{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("15.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.repeat{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.which{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.initKeyboardEvent(){{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatNo}}[2]{{CompatIE("9.0")}}[3]{{CompatUnknown}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
constructor{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.char{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.charCode{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
.keyCode{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.locale{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.repeat{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.which{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.initKeyboardEvent(){{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Die Argumente von initKeyboardEvent() von WebKit and Blink weichen von der Definition in DOM Level 3 Events ab. Die Methode ist: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)

+ +

[2] Gecko wird initKeyboardEvent() nicht unterstützen, weil es die Feature-Erkennung von Web-Apllikationen komplett zerstört. Siehe {{Bug(999645)}}.

+ +

[3] Das Argument von initKeyboardEvent() von IE weicht von der Definition in DOM Level 3 Events ab. Die Methode ist: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg). Siehe document of initKeyboardEvent() in MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/keyboardevent/keycode/index.html b/files/de/web/api/keyboardevent/keycode/index.html new file mode 100644 index 0000000000..98375fe4b9 --- /dev/null +++ b/files/de/web/api/keyboardevent/keycode/index.html @@ -0,0 +1,3185 @@ +--- +title: KeyboardEvent.keyCode +slug: Web/API/KeyboardEvent/keyCode +translation_of: Web/API/KeyboardEvent/keyCode +--- +

{{APIRef("DOM Events")}}{{deprecated_header()}}

+ +

Die schreibgeschütze Eigenschaft KeyboardEvent.keyCode  stellt den den unveränderten,  System- und Implementationsabhängigen numerischen Bezeichner der gedrückten Taste dar. Normalerweise ist das der zugehörige  ASCII {{RFC(20)}}) oder Windows 1252 Code der Taste. Bei einer unerkannten Taste ist das der Wert 0.

+ +

Der Wert des keypress Ereignis unterscheided sich von Browser zu Browser. IE und Google Chrome setzen den {{domxref("KeyboardEvent.charCode")}}  Wert. Gecko setzt 0 wenn die gedrückte Taste ein druckbares Zeichen darstellt, andernfalls ist es der selbe Wert wie beim keydown und keyup Ereignis.

+ +

Von der Verwendung dieser Eigenschaft sollte nach Möglichkeit abgesehen werden, da siebereits seit einiger Zeit veraltet ist. Statdessen sollte {domxref("KeyboardEvent.code")}} verwendet werden, so es implementiert ist. Leider gibt es noch immer einige Browser ohne Unterstützung dafür. Google und Safari implementieren {{domxref("KeyboardEvent.keyIdentifier")}}, der bisher in der Entwurfs-Spezifikation enthalten ist,  nicht jedoch in der finalen Version.

+ +
+

Entwickler sollten von der Verwendung von keyCode Eigenschaft  für druckbare Zeichen bei keydown und keyup Ereignissen absehen. Wie zuvor beschrieben , ist die keyCode Eigenschaft für druckbare Zeichen nicht zu gebrauchen, vor allem wenn Shift oder Alt dabei gedrückt sind. Bei der Implementation von Kürzeln, ist das {{event("keypress")}} Ereignis meist eher angebracht (zumindest bei der Verwendung der Gecko Engine). Näheres siehe Gecko Keypress Event .

+
+ +

Beispiel

+ +
window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Should do nothing if the default action has been cancelled
+  }
+
+  var handled = false;
+  if (event.key !== undefined) {
+    // Handle the event with KeyboardEvent.key and set handled true.
+  } else if (event.keyIdentifier !== undefined) {
+    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
+  } else if (event.keyCode !== undefined) {
+    // Handle the event with KeyboardEvent.keyCode and set handled true.
+  }
+
+  if (handled) {
+    // Suppress "double action" if event handled
+    event.preventDefault();
+  }
+}, true);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}}{{Spec2('DOM3 Events')}}Initiale Definition; als veraltet gekennzeichnet
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.KeyboardEvent.keyCode")}}

+ +

Werte von keyCode

+ +

druckbare Tasten in der Standard-Position

+ +

The value of key events which are caused by pressing or releasing printable keys in standard position is not compatible between browsers.

+ +

IE just exposes the native virtual keycode value as KeyboardEvent.keyCode.

+ +

Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the keyCode value on the US keyboard layout.

+ +

Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets keyCode values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:

+ +
    +
  1. If the system is Windows and the native keycode of the pressed key indicates that the key is a-z or 0-9, use a keycode for it.
    2. +
  2. If the system is Mac and the native keycode of the pressed key indicates that the key is 0-9, use a keycode for it.
    3. +
  3. If the pressed key inputs an ASCII alphabetic or numeric character with no modifier key, use a keycode for it.
    4. +
  4. If the pressed key inputs an ASCII alphabetic or numeric character with a Shift key modifier, use a keycode for it.
    5. +
  5. If the pressed key inputs a different ASCII character with no modifier key, use a keycode for it.
    6. +
  6. If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it.
    7. +
  7. Otherwise, i.e., pressed key inputs a unicode character: +
      +
    1. If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with the following additional rules.
      2. +
    2. Otherwise, i.e., the keyboard layout isn't ASCII capable, use the ASCII capable keyboard layout installed on the environment with the highest priority: +
        +
      1. If the pressed key on the alternative keyboard layout inputs an ASCII alphabetic or numeric character, use a keycode for it.
        2. +
      2. Otherwise, use 0 or compute with the following additional rules.
        3. +
      +
      3. +
    +
    8. +
+ +

Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets keyCode values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:

+ +
+

The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped keyCode values may be conflict with other keys. For example, if the active keyboard layout is Russian, the keyCode value of both the "Period" key and "Slash" key are 190 (KeyEvent.DOM_VK_PERIOD). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.

+
+ +
    +
  1. If running macOS or Linux: +
      +
    1. If the active keyboard layout is not ASCII-capable and an alternative ASCII-capable keyboard layout is available. +
        +
      1. If the alternative ASCII-capable keyboard layout produces an ASCII character via just the unmodified key, use a keyCode for the character.
        2. +
      2. If the alternative ASCII-capable keyboard layout produces an ASCII character with a Shift key modifier, use a keyCode for the shifted character.
        3. +
      3. Otherwise, use a keyCode for an ASCII character produced by the key when the US keyboard layout is active.
        4. +
      +
      2. +
    2. Otherwise, use a keyCode for an ASCII character produced by the key when the US keyboard layout is active.
      3. +
    +
    2. +
  2. If running on Windows: +
      +
    1. Use a keyCode value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.
      2. +
    +
    3. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by printable keys in standard position
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
{{domxref("KeyboardEvent.code")}}USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"Digit1"0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)
"Digit2"0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)
"Digit3"0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)
"Digit4"0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)
"Digit5"0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)
"Digit6"0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)
"Digit7"0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)
"Digit8"0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)
"Digit9"0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)
"Digit0"0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)
"KeyA"0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)
"KeyB"0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)
"KeyC"0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)
"KeyD"0x44 (68)0x44 (68)0x44 (68) 0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)
"KeyE"0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)
"KeyF"0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)
"KeyG"0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)
"KeyH"0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)
"KeyI"0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)
"KeyJ"0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)
"KeyK"0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)
"KeyL"0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)
"KeyM"0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)
"KeyN"0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)
"KeyO"0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)
"KeyP"0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)
"KeyQ"0x51 (81)0x51 (81)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0x51 (81)0xBA (186)0x51 (81)
"KeyR"0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)
"KeyS"0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)
"KeyT"0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)
"KeyU"0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)
"KeyV"0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)
"KeyW"0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)
"KeyX"0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)
"KeyY"0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)
"KeyZ"0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout):
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)Windows (10.9)Mac (10.9)Linux (Ubuntu 14.04)
USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
{{domxref("KeyboardEvent.code")}}USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"Comma"0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)
"Comma" with Shift
"Period"0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)
"Period" with Shift
"Semicolon"0xBA (186)0xBB (187)0xBA (186)0xBA (186)0xBB (187)0xBA (186)0xBA (186)0xBA (186) *10xE5 (229) *20xBA (186)0xBA (186)0xE5 (229) *30xBA (186)0xBA (186) *10xE5 (229) *20x3B (59)0x3B (59)0x00 (0)0x3B (59)0x3B (59) *10x00 (0)0x3B (59)0x3B (59)0x00 (0)
"Semicolon" with Shift0xBB (187) *10xBB (187)0xBB (187) *1
"Quote"0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186) *10xDE (222)0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186)  *10xDE (222)0xDE (222)0x3A (58)0xDE (222)0xDE (222)0x3A (58) *10xDE (222)0xDE (222)0x3A (58)0xDE (222)
"Quote" with Shift0xDE (222) *10x38 (56)0xDE (222) *1
"BracketLeft"0xDB (219)0xC0(192)0xDB (219)0xDB (219)0xC0(192)0xDB (219)0xDB (219)0xDB (219) *10xDB (219)0xDB (219)0x32 (50)0xDB (219)0xDB (219)0xDB (219) *1 0xDB (219)0xDB (219)0x40 (64)0xDB (219)0xDB (219)0x40 (64) *10xDB (219)0xDB (219)0x40 (64)0xDB (219)
"BracketLeft" with Shift0xC0 (192) *10xC0 (192)0xC0 (192) *1
"BracketRight"0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)
"BracketRight" with Shift
"Backquote"0xC0 (192)N/A0xC0 (192)0xC0 (192)N/A0xC0 (192)0xC0 (192)0xC0 (192)0xF4 (244)0xC0 (192)0xC0 (192)0xC0 (192)N/A0xC0 (192)0xC0 (192)0xC0 (192)0x00 (0)0xC0 (192)
"Backquote" with Shift
"Backslash"0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)
"Backslash" with Shift
"Minus"0xBD (189)0xBD (189)0xBD (189)0xBD (189) *10xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189) *10xBD (189)0xAD (173)0xAD (173)0xAD (173) *10xAD (173)0xAD (173)
"Minus" with Shift0xBB (187) *10xBB (187)0xBD (189)0xBB (187) *10xBD (189)
"Equal"0xBB (187)0xDE (222)0xBB (187)0xBB (187)0xDE (222)0xBB (187)0xBB (187)0xBB (187) *10xBB (187)0xBB (187)0x36 (54)0xBB (187)0xBB (187)0xBB (187) *10xBB (187)0x3D (61)0xA0 (160)0x3D (61)0x3D (61)0xA0 (160) *10x3D (61)0x3D (61)0xA0 (160)0x3D (61)
"Equal" with Shift0xC0 (192) *10xC0 (192)0xBB (187)0xC0 (192) *10xBB (187)
"IntlRo"0xC1 (193)0xE2 (226)0xC1 (193)0xC1 (193)0xE2 (226)0xC1 (193)0xBD (189)0xBD (189)0x00 (0)*40xDC (220)
+  		*40xBD (189)0xBD (189)0xE5 (229) *50x00 (0)0xDC (220)0x00 (0)0xA7 (167)0xA7 (167)0x00 (0)0x00 (0)0xDC (220)0x00 (0)
"IntlRo" with Shift
"IntlYen"0xFF (255)0xDC (220)0xFF (255)0xFF (255)0xDC (220)0xFF (255)0x00 (0)0x00 (0)0x00 (0)*40xDC (220)*40x00 (0)0x00 (0)0xE5 (229) *50x00 (0)0xDC (220)0x00 (0)0xDC (220)0xDC (220)0x00 (0)0x00 (0)0xDC (220)0x00 (0)
"IntlYen" with Shift0xDC (220)0xDC (220)0xBD (189)0xDC (220)0xDC (220)
+ +

*1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.

+ +

*2 The key is a dead key. The value of keyup event is 0xBA (186).

+ +

*3 The key is a dead key. The value of keyup event is 0x10 (16).

+ +

*4 No key events are fired.

+ +

*5 The key isn't available with Greek keyboard layout (does not input any character). The value of keyup event is 0x00 (0).

+ +

Non-printable keys (function keys)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by modifier keys:
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"AltLeft"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
"AltRight"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
"AltRight" when it's "AltGraph" key*1*1N/A0xE1 (225)N/A*1N/A0xE1 (225)
"CapsLock"0x14 (20) *20x14 (20) *20x14 (20)0x14 (20)0x14 (20)0x14 (20) *20x14 (20)0x14 (20) *3
"ControlLeft"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
"ControlRight"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
"OSLeft"0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0xE0 (224)0x5B (91)
"OSRight"0x5C (92)0x5C (92)0x5D (93)0x5C (92)0x5D (93)0x5B (91)0xE0 (224)0x5B (91)
"ShiftLeft"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
"ShiftRight"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
+ +

*1 On Windows, "AltGraph" key causes "ControlLeft" key event and "AltRight" key event.

+ +

*2 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0xF0 (240). The key works as "Alphanumeric" key whose label is "英数".

+ +

*3 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0x00 (0). The key works as "Alphanumeric" key whose label is "英数".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by non-printable keys:
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"ContextMenu"0x5D (93)0x5D (93)0x00 (0) *10x5D (93)0x00 (0) *10x5D (93)0x5D (93)0x5D (93)
"Enter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
"Space"0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)
"Tab"0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)
"Delete"0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
"End"0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
"Help"N/AN/A0x2D (45) *20x2F (47) *30x2D (45) *2N/A0x2D (45) *20x06 (6) *3
"Home"0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
"Insert"0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
"PageDown"0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
"PageUp"0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
"ArrowDown"0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
"ArrowLeft"0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
"ArrowRight"0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
"ArrowUp"0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
"Escape"0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)
"PrintScreen"0x2C (44) *40x2C (44) *40x7C (124)*50x2A (42)0x7C (124)*50x2C (44) *40x2C (44)0x2A (42)
"ScrollLock"0x91 (145)0x91 (145)0x7D (125)*50x91 (145)0x7D (125)*50x91 (145)0x91 (145)0x91 (145)
"Pause"0x13 (19) *60x13 (19) *60x7E (126)*50x13 (19)0x7E (126)*50x13 (19) *60x13 (19)0x13 (19)
+ +

*1 keypress event is fired whose keyCode and charCode are 0x10 (16) but text isn't inputted into editor.

+ +

*2 On Mac, "Help" key is mapped to "Insert" key of PC keyboard. These keyCode values are the same as the "Insert" key's keyCode value.

+ +

*3 Tested on Fedora 20.

+ +

*4 Only keyup event is fired.

+ +

*5 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Chrome and Safari map same keyCode values with Mac's keys.

+ +

*6 "Pause" key with Control causes 0x03 (3).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by function keys:
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"F1"0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)
"F2"0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)
"F3"0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)
"F4"0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)
"F5"0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)
"F6"0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)
"F7"0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)
"F8"0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)
"F9"0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)
"F10"0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)
"F11"0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)
"F12"0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)
"F13"0x7C (124)0x7C (124)0x7C (124)0x7C (124) *10x7C (124)0x7C (124)0x2C (44) *20x00 (0) *3
"F14"0x7D (125)0x7D (125)0x7D (125)0x7D (125) *10x7D (125)0x7D (125)0x91 (145) *20x00 (0) *3
"F15"0x7E (126)0x7E (126)0x7E (126)0x7E (126) *10x7E (126)0x7E (126)0x13 (19) *20x00 (0) *3
"F16"0x7F (127)0x7F (127)0x7F (127)0x7F (127) *10x7F (127)0x7F (127)0x7F (127)0x00 (0) *3
"F17"0x80 (128)0x80 (128)0x80 (128)0x80 (128) *10x80 (128)0x80 (128)0x80 (128)0x00 (0) *3
"F18"0x81 (129)0x81 (129)0x81 (129)0x81 (129) *10x81 (129)0x81 (129)0x81 (129)0x00 (0) *3
"F19"0x82 (130)0x82 (130)0x82 (130)N/A *40x82 (130)0x82 (130)0x82 (130)0x00 (0) *3
"F20"0x83 (131)0x83 (131)0x83 (131)N/A *40xE5 (229) *50x83 (131)0x00 (0)N/A *6
"F21"0x84 (132)0x84 (132)0x00 (0) *7N/A *40x00 (0) *70x84 (132)N/A *8N/A *6
"F22"0x85 (133)0x85 (133)0x00 (0) *7N/A *40x00 (0) *70x85 (133)N/A *8N/A *6
"F23"0x86 (134)0x86 (134)0x00 (0) *7N/A *40x00 (0) *70x86 (134)N/A *8N/A *6
"F24"0x87 (135)0x87 (135)0x00 (0) *7N/A *40x00 (0) *70x87 (135)N/A *80x00 (0) *3
+ +

*1 Tested on Fedora 20.

+ +

*2 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Firefox maps same keyCode values with PC's keys.

+ +

*3 Tested on Fedora 20. The keys don't cause GDK_Fxx keysyms. If the keys cause proper keysyms, these values must be same as IE.

+ +

*4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.

+ +

*5 keyUp event's keyCode value is 0x83 (131).

+ +

*6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.

+ +

*7 Only keydown event is fired.

+ +

*8 No DOM key events are fired on Firefox.

+ +

Numpad keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by keys in numpad in NumLock state
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"NumLock"0x90 (144)0x90 (144)0x0C (12) *10x90 (144)0x0C (12) *10x90 (144)0x0C (12) *10x90 (144)
"Numpad0"0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)
"Numpad1"0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)
"Numpad2"0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)
"Numpad3"0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)
"Numpad4"0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)
"Numpad5"0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)
"Numpad6"0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)
"Numpad7"0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)
"Numpad8"0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)
"Numpad9"0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)
"NumpadAdd"0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)
"NumpadComma" inputting ","0xC2 (194)0xC2 (194)0xBC (188)Always inputs "."0xBC (188)0xC2 (194)0x6C (108)Always inputs "."
"NumpadComma" inputting "." or empty string0xC2 (194)0xC2 (194)0xBE (190)0x6E (110)0xBE (190)0xC2 (194)0x6C (108)0x6E (110)
"NumpadDecimal" inputting "."0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)
"NumpadDecimal" inputting ","0x6E (110)0x6E (110)0x6E (110)0x6C (108)0x6E (110)0x6E (110)0x6E (110)0x6C (108)
"NumpadDivide"0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)
"NumpadEnter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
"NumpadEqual"0x0C (12)0x0C (12)0xBB (187)0xBB (187)0xBB (187)0x0C (12)0x3D (61)0x3D (61)
"NumpadMultiply"0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)
"NumpadSubtract"0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)
+ +

*1 "NumLock" key works as "Clear" key on Mac.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by keys in numpad without NumLock state
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Gecko 29
WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Gecko 29
"Numpad0" ("Insert")0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
"Numpad1" ("End")0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
"Numpad2" ("ArrowDown")0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
"Numpad3" ("PageDown")0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
"Numpad4" ("ArrowLeft")0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
"Numpad5"0x0C (12)0x0C (12)0x0C (12)0x0C (12)0x0C (12)
"Numpad6" ("ArrowRight")0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
"Numpad7" ("Home")0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
"Numpad8" ("ArrowUp")0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
"Numpad9" ("PageUp")0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
"NumpadDecimal" ("Delete")0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
+ +

* Recent Mac doesn't have "NumLock" key and state. Therefore, unlocked state isn't available.

+ +

Constants for keyCode value

+ +

Gecko defines a lot of keyCode values in KeyboardEvent for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
DOM_VK_CANCEL0x03 (3)Cancel key.
DOM_VK_HELP0x06 (6)Help key.
DOM_VK_BACK_SPACE0x08 (8)Backspace key.
DOM_VK_TAB0x09 (9)Tab key.
DOM_VK_CLEAR0x0C (12)"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key.
DOM_VK_RETURN0x0D (13)Return/enter key on the main keyboard.
DOM_VK_ENTER0x0E (14)Reserved, but not used. {{obsolete_inline(30)}} (Dropped, see {{bug(969247)}}.)
DOM_VK_SHIFT0x10 (16)Shift key.
DOM_VK_CONTROL0x11 (17)Control key.
DOM_VK_ALT0x12 (18)Alt (Option on Mac) key.
DOM_VK_PAUSE0x13 (19)Pause key.
DOM_VK_CAPS_LOCK0x14 (20)Caps lock.
DOM_VK_KANA0x15 (21)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_HANGUL0x15 (21)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_EISU0x 16 (22)"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}}
DOM_VK_JUNJA0x17 (23)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_FINAL0x18 (24)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_HANJA0x19 (25)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_KANJI0x19 (25)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_ESCAPE0x1B (27)Escape key.
DOM_VK_CONVERT0x1C (28)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_NONCONVERT0x1D (29)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_ACCEPT0x1E (30)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_MODECHANGE0x1F (31)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_SPACE0x20 (32)Space bar.
DOM_VK_PAGE_UP0x21 (33)Page Up key.
DOM_VK_PAGE_DOWN0x22 (34)Page Down key.
DOM_VK_END0x23 (35)End key.
DOM_VK_HOME0x24 (36)Home key.
DOM_VK_LEFT0x25 (37)Left arrow.
DOM_VK_UP0x26 (38)Up arrow.
DOM_VK_RIGHT0x27 (39)Right arrow.
DOM_VK_DOWN0x28 (40)Down arrow.
DOM_VK_SELECT0x29 (41)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_PRINT0x2A (42)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_EXECUTE0x2B (43)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_PRINTSCREEN0x2C (44)Print Screen key.
DOM_VK_INSERT0x2D (45)Ins(ert) key.
DOM_VK_DELETE0x2E (46)Del(ete) key.
DOM_VK_00x30 (48)"0" key in standard key location.
DOM_VK_10x31 (49)"1" key in standard key location.
DOM_VK_20x32 (50)"2" key in standard key location.
DOM_VK_30x33 (51)"3" key in standard key location.
DOM_VK_40x34 (52)"4" key in standard key location.
DOM_VK_50x35 (53)"5" key in standard key location.
DOM_VK_60x36 (54)"6" key in standard key location.
DOM_VK_70x37 (55)"7" key in standard key location.
DOM_VK_80x38 (56)"8" key in standard key location.
DOM_VK_90x39 (57)"9" key in standard key location.
DOM_VK_COLON0x3A (58)Colon (":") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_SEMICOLON0x3B (59)Semicolon (";") key.
DOM_VK_LESS_THAN0x3C (60)Less-than ("<") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_EQUALS0x3D (61)Equals ("=") key.
DOM_VK_GREATER_THAN0x3E (62)Greater-than (">") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_QUESTION_MARK0x3F (63)Question mark ("?") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_AT0x40 (64)Atmark ("@") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_A0x41 (65)"A" key.
DOM_VK_B0x42 (66)"B" key.
DOM_VK_C0x43 (67)"C" key.
DOM_VK_D0x44 (68)"D" key.
DOM_VK_E0x45 (69)"E" key.
DOM_VK_F0x46 (70)"F" key.
DOM_VK_G0x47 (71)"G" key.
DOM_VK_H0x48 (72)"H" key.
DOM_VK_I0x49 (73)"I" key.
DOM_VK_J0x4A (74)"J" key.
DOM_VK_K0x4B (75)"K" key.
DOM_VK_L0x4C (76)"L" key.
DOM_VK_M0x4D (77)"M" key.
DOM_VK_N0x4E (78)"N" key.
DOM_VK_O0x4F (79)"O" key.
DOM_VK_P0x50 (80)"P" key.
DOM_VK_Q0x51 (81)"Q" key.
DOM_VK_R0x52 (82)"R" key.
DOM_VK_S0x53 (83)"S" key.
DOM_VK_T0x54 (84)"T" key.
DOM_VK_U0x55 (85)"U" key.
DOM_VK_V0x56 (86)"V" key.
DOM_VK_W0x57 (87)"W" key.
DOM_VK_X0x58 (88)"X" key.
DOM_VK_Y0x59 (89)"Y" key.
DOM_VK_Z0x5A (90)"Z" key.
DOM_VK_WIN0x5B (91)Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}}
DOM_VK_CONTEXT_MENU0x5D (93)Opening context menu key.
DOM_VK_SLEEP0x5F (95)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_NUMPAD00x60 (96)"0" on the numeric keypad.
DOM_VK_NUMPAD10x61 (97)"1" on the numeric keypad.
DOM_VK_NUMPAD20x62 (98)"2" on the numeric keypad.
DOM_VK_NUMPAD30x63 (99)"3" on the numeric keypad.
DOM_VK_NUMPAD40x64 (100)"4" on the numeric keypad.
DOM_VK_NUMPAD50x65 (101)"5" on the numeric keypad.
DOM_VK_NUMPAD60x66 (102)"6" on the numeric keypad.
DOM_VK_NUMPAD70x67 (103)"7" on the numeric keypad.
DOM_VK_NUMPAD80x68 (104)"8" on the numeric keypad.
DOM_VK_NUMPAD90x69 (105)"9" on the numeric keypad.
DOM_VK_MULTIPLY0x6A (106)"*" on the numeric keypad.
DOM_VK_ADD0x6B (107)"+" on the numeric keypad.
DOM_VK_SEPARATOR0x6C (108) 
DOM_VK_SUBTRACT0x6D (109)"-" on the numeric keypad.
DOM_VK_DECIMAL0x6E (110)Decimal point on the numeric keypad.
DOM_VK_DIVIDE0x6F (111)"/" on the numeric keypad.
DOM_VK_F10x70 (112)F1 key.
DOM_VK_F20x71 (113)F2 key.
DOM_VK_F30x72 (114)F3 key.
DOM_VK_F40x73 (115)F4 key.
DOM_VK_F50x74 (116)F5 key.
DOM_VK_F60x75 (117)F6 key.
DOM_VK_F70x76 (118)F7 key.
DOM_VK_F80x77 (119)F8 key.
DOM_VK_F90x78 (120)F9 key.
DOM_VK_F100x79 (121)F10 key.
DOM_VK_F110x7A (122)F11 key.
DOM_VK_F120x7B (123)F12 key.
DOM_VK_F130x7C (124)F13 key.
DOM_VK_F140x7D (125)F14 key.
DOM_VK_F150x7E (126)F15 key.
DOM_VK_F160x7F (127)F16 key.
DOM_VK_F170x80 (128)F17 key.
DOM_VK_F180x81 (129)F18 key.
DOM_VK_F190x82 (130)F19 key.
DOM_VK_F200x83 (131)F20 key.
DOM_VK_F210x84 (132)F21 key.
DOM_VK_F220x85 (133)F22 key.
DOM_VK_F230x86 (134)F23 key.
DOM_VK_F240x87 (135)F24 key.
DOM_VK_NUM_LOCK0x90 (144)Num Lock key.
DOM_VK_SCROLL_LOCK0x91 (145)Scroll Lock key.
DOM_VK_WIN_OEM_FJ_JISHO0x92 (146)An OEM specific key on Windows. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_MASSHOU0x93 (147)An OEM specific key on Windows. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_TOUROKU0x94 (148)An OEM specific key on Windows. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_LOYA0x95 (149)An OEM specific key on Windows. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_ROYA0x96 (150)An OEM specific key on Windows. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_CIRCUMFLEX0xA0 (160)Circumflex ("^") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_EXCLAMATION0xA1 (161)Exclamation ("!") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_DOUBLE_QUOTE0xA3 (162)Double quote (""") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_HASH0xA3 (163)Hash ("#") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_DOLLAR0xA4 (164)Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_PERCENT0xA5 (165)Percent ("%") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_AMPERSAND0xA6 (166)Ampersand ("&") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_UNDERSCORE0xA7 (167)Underscore ("_") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_OPEN_PAREN0xA8 (168)Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_CLOSE_PAREN0xA9 (169)Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_ASTERISK0xAA (170)Asterisk ("*") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_PLUS0xAB (171)Plus ("+") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_PIPE0xAC (172)Pipe ("|") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_HYPHEN_MINUS0xAD (173)Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_OPEN_CURLY_BRACKET0xAE (174)Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_CLOSE_CURLY_BRACKET0xAF (175)Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_TILDE0xB0 (176)Tilde ("~") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_VOLUME_MUTE0xB5 (181)Audio mute key. {{gecko_minversion_inline("21.0")}}
DOM_VK_VOLUME_DOWN0xB6 (182)Audio volume down key {{gecko_minversion_inline("21.0")}}
DOM_VK_VOLUME_UP0xB7 (183)Audio volume up key {{gecko_minversion_inline("21.0")}}
DOM_VK_COMMA0xBC (188)Comma (",") key.
DOM_VK_PERIOD0xBE (190)Period (".") key.
DOM_VK_SLASH0xBF (191)Slash ("/") key.
DOM_VK_BACK_QUOTE0xC0 (192)Back tick ("`") key.
DOM_VK_OPEN_BRACKET0xDB (219)Open square bracket ("[") key.
DOM_VK_BACK_SLASH0xDC (220)Back slash ("\") key.
DOM_VK_CLOSE_BRACKET0xDD (221)Close square bracket ("]") key.
DOM_VK_QUOTE0xDE (222)Quote (''') key.
DOM_VK_META0xE0 (224)Meta key on Linux, Command key on Mac.
DOM_VK_ALTGR0xE1 (225)AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}}
DOM_VK_WIN_ICO_HELP0xE3 (227)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_ICO_000xE4 (228)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_ICO_CLEAR0xE6 (230)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_RESET0xE9 (233)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_JUMP0xEA (234)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_PA10xEB (235)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_PA20xEC (236)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_PA30xED (237)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_WSCTRL0xEE (238)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_CUSEL0xEF (239)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_ATTN0xF0 (240)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FINISH0xF1 (241)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_COPY0xF2 (242)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_AUTO0xF3 (243)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_ENLW0xF4 (244)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_BACKTAB0xF5 (245)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_ATTN0xF6 (246)Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}}
DOM_VK_CRSEL0xF7 (247)CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_EXSEL0xF8 (248)ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_EREOF0xF9 (249)Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_PLAY0xFA (250)Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_ZOOM0xFB (251)Zoom key. {{gecko_minversion_inline("21.0")}}
DOM_VK_PA10xFD (253)PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_CLEAR0xFE (254)Clear key, but we're not sure the meaning difference from DOM_VK_CLEAR. {{gecko_minversion_inline("21.0")}}
+ +

OEM specific keys on Windows

+ +

On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).

+ +

Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.

+ +

See "Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)" in MSDN for the detail.

+ +
 
diff --git a/files/de/web/api/l10n.language.direction/index.html b/files/de/web/api/l10n.language.direction/index.html new file mode 100644 index 0000000000..c469794d54 --- /dev/null +++ b/files/de/web/api/l10n.language.direction/index.html @@ -0,0 +1,63 @@ +--- +title: L10n.language.direction +slug: Web/API/L10n.language.direction +translation_of: Archive/B2G_OS/API/L10n/language/direction +--- +
{{ non-standard_header() }}
+ +
 
+ +
+

The language.direction property returns the direction (ltr or rtl) of the currently active language.

+
+ +

Syntax

+ +
var languageCode = navigator.mozL10n.language.direction;
+ +

Value

+ +

Returns the direction of the currently active language (ltr or rtl).

+ +

Example

+ +
navigator.mozL10n.ready(function() {
+  console.log('The current language's direction is ' + navigator.mozL10n.language.direction);
+});
+
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + + + diff --git a/files/de/web/api/linkstyle/index.html b/files/de/web/api/linkstyle/index.html new file mode 100644 index 0000000000..1cc73d12ac --- /dev/null +++ b/files/de/web/api/linkstyle/index.html @@ -0,0 +1,56 @@ +--- +title: LinkStyle +slug: Web/API/LinkStyle +tags: + - API + - CSSOM + - Referenz + - Schnittstelle +translation_of: Web/API/LinkStyle +--- +

{{APIRef("CSSOM")}}

+ +

Übersicht

+ +

Die LinkStyle Schnittstelle erlaubt es, das zu einem Knoten zugehöriges CSS Stylesheet anzusprechen.

+ +

LinkStyle ist eine abstrakte Schnittstelle und es kann kein Objekt dieses Typs erstellt werden; Sie wird von {{domxref("HTMLLinkElement")}} und {{domxref("HTMLStyleElement")}} Objekten implementiert.

+ +

Eigenschaften

+ +

Es gibt keine vererbte Eigenschaft.

+ +
+
{{domxref("LinkStyle.sheet")}} {{readonlyInline}}
+
Gibt das {{domxref("StyleSheet")}} Objekt zurück, das zu dem angegebenen Element gehört, oder null, falls keines existiert.
+
+ +

Methoden

+ +

Diese Schnittstelle implementiert keine Methoden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSSOM', '#the-linkstyle-interface', 'LinkStyle') }}{{ Spec2('CSSOM') }}Keine Änderung bezüglich {{ SpecName('DOM2 Style') }}.
{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-LinkStyle', 'LinkStyle') }}{{ Spec2('DOM2 Style') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

 

diff --git a/files/de/web/api/messageevent/index.html b/files/de/web/api/messageevent/index.html new file mode 100644 index 0000000000..5f3bc4c4c8 --- /dev/null +++ b/files/de/web/api/messageevent/index.html @@ -0,0 +1,205 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +tags: + - API + - Channels + - Interface + - Nachrichten + - Referenz + - WebSockets + - Window + - Workers + - messaging +translation_of: Web/API/MessageEvent +--- +
{{APIRef("HTML DOM")}}
+ +

Das MessageEvent Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.

+ +

Es wird verwendet in in:

+ + + +

Welche Aktion durch dieses Event ausgeführt wird, entscheidet die Funktion die als entsprechender Eventhandler für das {{event("message")}} Event definiert wurde. Beispielsweise durch das setzen eines onmessage handlers. 

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Creates a new MessageEvent.
+
+ +

Eigenschaften

+ +

Dieses Interface erbt auch Eigenschaften seines parents, {{domxref("Event")}}.

+ +
+
{{domxref("MessageEvent.data")}} {{readonlyInline}}
+
Die Daten die vom message emitter gesendet wurden.
+
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
+
Ein {{domxref("USVString")}} der den Ursprung (Origin) des message emitters repräsentiert.
+
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+
Ein {{domxref("DOMString")}} der die einzigartige ID des Events repräsentiert.
+
{{domxref("MessageEvent.source")}} {{readonlyInline}}
+
Eine MessageEventSource (welch ein {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} Objekt sein kann) welche den message emitter repräsentiert.
+
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
+
Ein Array bestehend aus {{domxref("MessagePort")}} Objekten, welche die Ports repräsentieren, welche mit dem channel verbunden sind durch die die Nachricht gesendet wurde (Bespielsweise in channel messaging oder wenn eine Nachricht zu einem shared worker gesendet wird).
+
+ +

Methoden

+ +

Dieses Interface erbt auch Methoden von seinem parent, {{domxref("Event")}}.

+ +
+
{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}
+
Initialisiert ein Message Objekt. Bitte nicht mehr benutzen — benutzen Sie bitte den {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} constructor stattdessen.
+
+ +

Examples

+ +

In unserem  Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML Seiten, von denen jede eine einfache Berechnung ausführt. Die unterschiedlichen Skripte benutzen die gleiche Worker Datei um die Berechnungen auszuführen — sie können beide darauf zugreifen, selbst wenn sich ihre Seiten in verschiedenen Fenstern befinden.

+ +

Der folgende Ausschnitt zeigt wie man ein SharedWorker Objekt mit dem {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor erzeugen kann. Beide Skripte enthalten dies:

+ +
var myWorker = new SharedWorker('worker.js');
+
+ +

Beide Skripte greifen durch ein {{domxref("MessagePort")}} Objekt auf den Worker zu, welcher mit der {{domxref("SharedWorker.port")}} Eigenschaft erstellt wurde. Wenn das onmessage event mittels addEventListener hinzugefügt wird, wird der port automatisch mittels seiner start() Methode gestartet:

+ +
myWorker.port.start();
+ +

Wenn der Port gestartet wurde, senden beide Skripte Nachrichten zu dem Worker und verarbeiten die Nachrichten welche vom Worker empfangen werden mittels  port.postMessage() und port.onmessage:

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

In dem Worker benutzen wir den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns mit dem oben erwähnten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die ports Eigenschaft des {{event("connect")}} Events erreichbar — dann benutzen wir die {{domxref("MessagePort")}} start() Methode um den Port zu starten, und den onmessage Handler um die Nachrichten die von den Hauptthreads gesendet wurden zu verarbeiten.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}
+ +

Specifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9{{CompatUnknown}}{{CompatSafari('10.0+')}}
origin als {{domxref("USVString")}} und source als MessageEventSource{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.0+
origin als {{domxref("USVString")}} und source als MessageEventSource{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/mouseevent/index.html b/files/de/web/api/mouseevent/index.html new file mode 100644 index 0000000000..55d458c6a2 --- /dev/null +++ b/files/de/web/api/mouseevent/index.html @@ -0,0 +1,323 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API + - DOM + - DOM Events + - Interface + - Reference +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

Die MouseEvent Schnittstelle stellt Events bereit, die während der Benutzerinteraktion mit einem Zeigegerät (zum Beispiel eine Maus) auftreten. Häufige Events, die diese Schnittstelle nutzen sind {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.

+ +

MouseEvent wird vererbt von {{domxref("UIEvent")}}, welches wiederum vererbt wird von {{domxref("Event")}}. Obwohl die {{domxref("MouseEvent.initMouseEvent()")}} Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines MouseEvent Objekts durch den {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} Konstruktor erfolgen.

+ +

Mehrere spezifischere Events basieren auf MouseEvent, davon {{domxref("WheelEvent")}} und {{domxref("DragEvent")}}.

+ +

Konstruktor

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
Erstellt einMouseEvent Objekt.
+
+ +

Eigenschaften

+ +

Diese Schnittstelle erbt Eigenschaften der Elternobjekte {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
Gibt true zurück wenn die alt Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
+

Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
Gibt true zurück, wenn die control Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
Gibt true zurück, wenn die meta Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
Die x-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
Die y-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.
+
{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
+
Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
+
{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
+
Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
+
{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
+
Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.
+
{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
+
Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird null zurückgegeben.
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
+

Das sekundäre Zielobjekt des Events, sofern verfügbar.

+
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
Gibt true zurück, wenn die shift Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}
+
Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
+
Die Stärke des Drucks, die auf ein Touch- oder Tabletgerät ausgeübt wurde, während das Event ausgelöst wurde. Der Wert bewegt sich zwischen 0.0 (Minimalste Druckstärke) und 1.0 (Maximalster Druckstärke)
+
{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
+
+

Der Typ des Geräts das den Event generiert hat (eine der MOZ_SOURCE_* Konstanten die weiter unten gelistet werden). Es ermöglicht zum Beispiel die Bestimmung ob ein MouseEvent tatsächlich von einer Maus oder von einem Touchgerät ausgelöst wurde (welches den Grad der Genauigkeit beeinflusst, mit dem man die Koordinaten des Events betrachten kann).

+
+
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+
Die Stärke des Drucks, die beim Klick angewendet wurde.
+
{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
+
Alias auf {{domxref("MouseEvent.clientX")}}.
+
{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
+
Alias auf {{domxref("MouseEvent.clientY")}}
+
+ +

Konstanten

+ +
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Minimum der Kraft, die für einen normalen Klick notwendig ist.
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Minimum der Kraft, die für einen Force-Click notwendig ist.
+
+ +

Methoden

+ +

Das Interface erbt auch die Methoden seiner Eltern, {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState()")}}
+
Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe {{domxref("KeyboardEvent.getModifierState()")}}.
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
Initialisiert den Wert eines erzeugten MouseEvent. Wenn der Event bereits ausgesendet wurde, wird durch diese Methode nichts passieren.
+
+ +

Beispiele

+ +

Dieses Beispiel demonstriert das Simulieren eines Klicks (die programmatische Erzeugung eines Klickereignisses) auf eine Checkbox mittels DOM Methoden. 

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+ +

Auf den Button klicken, um zu sehen wie das Beispiel funktioniert:

+ +

{{ EmbedLiveSample('Example', '', '', '') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}From {{SpecName('DOM3 Events')}}, added the region property.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}From {{SpecName('DOM3 Events')}}, added movementX and movementY properties.
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}From {{SpecName('DOM3 Events')}}, added offsetX and offsetY, pageX and pageY, x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.movementX","movementX")}}
+ {{domxref("MouseEvent.movementY","movementY")}}		{{CompatChrome(37)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}} {{property_prefix("moz")}}{{ CompatUnknown() }}{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{ domxref("MouseEvent.buttons", "buttons") }}{{CompatChrome(43)}}{{CompatVersionUnknown()}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
{{ domxref("MouseEvent.which", "which") }}{{CompatChrome(1)}}{{CompatVersionUnknown()}}1.09.05.01.0
{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}{{CompatChrome(47)}}{{CompatVersionUnknown()}}{{CompatGeckoDesktop(15)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}{{CompatNo}}{{ CompatUnknown() }}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}{{CompatChrome(45)}}{{ CompatUnknown() }}{{CompatGeckoDesktop(11)}}9.0{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{domxref("MouseEvent.region")}}{{CompatChrome(51)}}[1]{{ CompatUnknown() }}{{CompatGeckoDesktop(32)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}{{CompatVersionUnknown()}}9{{CompatGeckoDesktop(40)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Setzt das Aktivieren von ExperimentalCanvasFeatures voraus.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/mozmobileconnection/index.html b/files/de/web/api/mozmobileconnection/index.html new file mode 100644 index 0000000000..f4d2882aab --- /dev/null +++ b/files/de/web/api/mozmobileconnection/index.html @@ -0,0 +1,134 @@ +--- +title: MozMobileConnection +slug: Web/API/MozMobileConnection +translation_of: Archive/B2G_OS/API/MozMobileConnection +--- +

{{APIRef("Firefox OS")}} {{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('certified') }}

+ +
+

This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through {{domxref("window.navigator.mozMobileConnections","navigator.mozMobileConnections")}}, which returns an array of MozMobileConnection objects.

+
+ +
+

Note: The syntax used to be window.navigator.mozMobileConnection, returning a single MozMobileConnection object, but this was updated in Firefox 1.3 due to the introduction of Multi-SIM support (Dual-SIM-Dual-Standby or DSDS).

+
+ +

Interface overview

+ +
callback EventHandler = any (Event event);
+
+interface MozMobileConnection : EventTarget
+{
+  const long ICC_SERVICE_CLASS_VOICE = (1 << 0);
+  const long ICC_SERVICE_CLASS_DATA = (1 << 1);
+  const long ICC_SERVICE_CLASS_FAX = (1 << 2);
+  const long ICC_SERVICE_CLASS_SMS = (1 << 3);
+  const long ICC_SERVICE_CLASS_DATA_SYNC = (1 << 4);
+  const long ICC_SERVICE_CLASS_DATA_ASYNC = (1 << 5);
+  const long ICC_SERVICE_CLASS_PACKET = (1 << 6);
+  const long ICC_SERVICE_CLASS_PAD = (1 << 7);
+  const long ICC_SERVICE_CLASS_MAX = (1 << 7);
+
+  readonly attribute MozMobileConnectionInfo voice;
+  readonly attribute MozMobileConnectionInfo data;
+  readonly attribute DOMString networkSelectionMode;
+  readonly attribute DOMString iccId;
+
+  DOMRequest getNetworks();
+  DOMRequest selectNetwork(MozMobileNetworkInfo network);
+  DOMRequest selectNetworkAutomatically();
+  DOMRequest sendMMI(DOMString mmi);
+  DOMRequest cancelMMI();
+  DOMRequest setCallForwardingOption(MozMobileCFInfo CFInfo);
+  DOMRequest getCallForwardingOption(unsigned short reason);
+
+  attribute EventHandler onvoicechange;
+  attribute EventHandler ondatachange;
+  attribute EventHandler onussdreceived;
+  attribute EventHandler ondataerror;
+  attribute EventHandler oncfstatechange;
+};
+
+ +

Properties

+ +
+
 
+
{{domxref("MozMobileConnection.voice")}} {{readonlyinline}}
+
A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the voice connection.
+
{{domxref("MozMobileConnection.data")}} {{readonlyinline}}
+
A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the data connection.
+
{{domxref("MozMobileConnection.iccId")}} {{readonlyinline}}
+
A string that indicates the Integrated Circuit Card Identifier of the SIM this mobile connection corresponds to.
+
{{domxref("MozMobileConnection.networkSelectionMode")}} {{readonlyinline}}
+
A string that indicates the selection mode of the voice and data networks.
+
{{domxref("MozMobileConnection.oncfstatechange")}}
+
A handler for the {{event("cfstatechange")}} event. This event is fired when the call forwarding state changes.
+
{{domxref("MozMobileConnection.ondatachange")}}
+
A handler for the {{event("datachange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object changes values.
+
{{domxref("MozMobileConnection.ondataerror")}}
+
A handler for the {{event("dataerror")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object receive an error from the RIL.
+
{{domxref("MozMobileConnection.onussdreceived")}}
+
A handler for the {{event("ussdreceived")}} event. This event is fired whenever a new USSD message is received.
+
{{domxref("MozMobileConnection.onvoicechange")}}
+
A handler for the {{event("voicechange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.voice","voice")}} connection object changes.
+
+ +

Constants

+ + + +

Methods

+ +
+

Note: All original methods from the MozMobileConnection interface are fully asynchronous. They all return a {{domxref("DOMRequest")}} which has a onsuccess and onerror event handler to handle the success or failur of the method call.

+
+ +
+
{{domxref("MozMobileConnection.cancelMMI()")}}
+
Cancel the current MMI request if one exists.
+
{{domxref("MozMobileConnection.getCallForwardingOption()")}}
+
Queries current call forward options.
+
{{domxref("MozMobileConnection.getNetworks()")}}
+
Search for available networks.
+
{{domxref("MozMobileConnection.selectNetwork()")}}
+
Manually selects a network, overriding the radio's current selection.
+
{{domxref("MozMobileConnection.selectNetworkAutomatically()")}}
+
Tell the radio to automatically select a network.
+
{{domxref("MozMobileConnection.sendMMI()")}}
+
Send a MMI message.
+
{{domxref("MozMobileConnection.setCallForwardingOption()")}}
+
Configures call forward options.
+
+ +

The MozMobileConnection interface also inherit from the {{domxref("EventTarget")}} interface

+ +

{{page("/en-US/docs/DOM/EventTarget","Methods")}}

+ +

Specification

+ +

Not part of any specification

+ +

See also

+ + diff --git a/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html new file mode 100644 index 0000000000..242901b1c2 --- /dev/null +++ b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html @@ -0,0 +1,57 @@ +--- +title: MozMobileConnection.selectNetworkAutomatically +slug: Web/API/MozMobileConnection/selectNetworkAutomatically +translation_of: Archive/B2G_OS/API/MozMobileConnection/selectNetworkAutomatically +--- +

{{APIRef("Firefox OS")}} {{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('certified') }}

+ +

Summary

+ +

The selectNetworkAutomatically method is used to tell the radio to automatically select a network.

+ +
+

Note: If the network is actually changed by this request, the voicechange and datachange events are fired.

+
+ +

Syntax

+ +
var request = navigator.mozMobileConnection.selectNetworks();
+ +

Return

+ +

A {{domxref("DOMRequest")}} object to handle the success or failure of the method call.

+ +

If the request fails, the request's error is one of:

+ + + +

Example

+ +
var switchNetwork = navigator.mozMobileConnection.selectNetworkAutomatically();
+
+switchNetwork.onsuccess = function () {
+  console.log('Successful switch');
+}
+
+switchNetwork.onerror = function () {
+  console.log('Unable to switch: ' + this.error.name);
+}
+
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/mutationobserver/index.html b/files/de/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..c1367cea73 --- /dev/null +++ b/files/de/web/api/mutationobserver/index.html @@ -0,0 +1,287 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Beobachter-Muster + - DOM-Knoten + - Fortgeschrittene + - Observer Pattern + - Programmierung + - Wertänderungen verfolgen + - Änderungen überwachen +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

Der MutationObserver ermöglicht es, auf Änderungen im DOM-Element zu reagieren. Er löst die Mutation Events aus der DOM3 Events Spezifikation ab.

+ +

Konstruktor

+ +

MutationObserver()

+ +

Konstruktor zum Instanziieren neuer DOM-MutationObservers.

+ +
MutationObserver(
+  function callback
+);
+
+ +
Parameters
+ +
+
callback
+
Die Funktion wird bei jeder Veränderung am DOM-Element ausgelöst. Der Observer (Beobachter) ruft die Callbackfunktion mit zwei Argumenten auf. Das erste ist ein Array aus MutationRecord-Objekten. Das zweite ist diese Instanz des MutationObserver.
+
+ +

Methoden

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +

observe()

+ +

Registriert die Instanz von MutationObserver , um Meldungen über Veränderungen DOM-Elements der angegebenen Node zu erhalten.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parameters
+ +
+
target
+
Die {{domxref("Node")}} , zu dem Veränderungen im DOM beobachtet werden sollen.
+
options
+
Ein MutationObserverInit-Objekt, das angibt, welche DOM-Veränderungen gemeldet werden sollen.
+
+ +
Anmerkung: Einen Observer zu einem Element hinzufügen funktioniert genau wie addEventListener - man kann es auch von mehreren Observern gleichzeitig beobachten lassen. Das heißt, wenn man ein Element doppelt beobachtet, feuert es nicht zweimal und man muss auch nicht zweimal disconnect() aufrufen. Mit anderen Worten: wenn man ein Element beobachtet, macht es keinerlei Unterschied, wenn man es durch dasselbe Objekt nochmal beobachten lässt. Wenn es von einem anderen Objekt beobachtet wird, dann wird natürlich zusätzlich ein weiterer Observer angehängt.
+ +

disconnect()

+ +

Sorgt dafür, dass die MutationObserver-Instanz die Überwachung der DOM-Benachrichtigungen beendet. Bis die observe() -Methode erneut benutzt wird, wird die Callback-Methode des Observers nicht aufgerufen.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Leert die Nachrichten-Kette ("record queue") der MutationObserver Instanz gibt den vorher dort vorhandenen Inhalt zurück.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Gibt ein Array mit MutationRecords zurück.

+ +

MutationObserverInit

+ +

MutationObserverInit ist ein Objekt, das die folgenden Eigenschaften enthalten (und damit festlegen) kann:

+ +
Anmerkung: Als Mindestanforderung muss childList, attributes, oder characterData auf true gesetzt werden. Anderenfalls wird ein Fehler "Ungültiger String angegeben" ("An invalid or illegal string was specified") ausgelöst.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
childListWenn Kindelemente (child nodes) der Ziel-Node (inklusive Textnodes) beobachtet werden sollen, muss childList auf true gesetzt werden.
attributesMuss auf true gesetzt werden, wenn Veränderungen an Attributen der Ziel-Node (target node) beobachtet bzw. berichtet werden sollen.
characterData +

Muss true sein, wenn Veränderungen an den Daten der Ziel-Node beobachtet werden sollen.

+
subtreeAuf true setzen, wenn nicht nur Änderungen an der Ziel-Node (target node) beobachtet werden sollen, sondern auch Veränderungen von dessen Kindelementen (child nodes).
attributeOldValueMuss auf true gesetzt werden, wenn attributes ebenfalls true ist und der Wert des target-node-Attributs vor der Veränderung ebenfalls gemeldet werden soll.
characterDataOldValue +

Muss auf true gesetzt werden, wenn characterData ebenfalls true ist und der Wert von data vor der Veränderung ebenfalls gemeldet werden soll.

+
attributeFilterMit dieser Eigenschaft kann ein Array mit lokalen Attributnamen angegeben werden (ohne Namespace), wenn nicht alle Attribute beobachtet werden sollen.
+ +

MutationRecord

+ +

Als erstes Argument wird an die Callback-Funktion des Observers ein Array aus MutationRecord-Objekten übergeben. Ein MutationRecord-Objekt beinhaltet die folgenden Eigenschaften:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
typeStringGibt attributes zurück, wenn die Veränderung eine Änderung an Attributen der Node gewesen ist, characterData wenn Veränderungen an der CharacterData-Node vorgenommen wurden, und childList wenn es sich um eine Veränderung an den untergeordneten Knoten im Baum handelt.
target{{domxref("Node")}}Gibt die von der Veränderung betroffene Node zurück, abhängig von type. Bei attributes das Element, von dem Attribute geändert wurden. Bei characterData wird die CharacterData-Node zurückgegeben. Bei childList die Node, deren untergeordnete Kindelemente verändert wurden.
addedNodes{{domxref("NodeList")}}Gibt die hinzugefügten Nodes zurück. Wenn keine hinzugefügt wurden, wird eine leere NodeList zurückgegeben.
removedNodes{{domxref("NodeList")}}Gibt die entfernten Nodes zurück. Wenn keine entfernt wurden, wird eine leere NodeList zurückgegeben.
previousSibling{{domxref("Node")}}Gibt den vorhergehenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst null.
nextSibling{{domxref("Node")}}Gibt den folgenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst null.
attributeNameStringGibt den lokalen Namen des geänderten Attributs zurück, sonst null.
attributeNamespaceStringGibt den lokalen Namespace des geänderten Attributs zurück, sonst null.
oldValueStringRückgabewert hängt vom type ab. Bei attributes wird der Wert des Attributs vor der Änderung zurückgegeben. Bei characterData, der Wert von Data vor der Änderung. Bei childList wird null zurückgegeben.
+ +

Nutzungsbeispiel

+ +

Das folgende Beispiel wurde aus diesem Blog-Post übernommen.

+ +
// zu überwachende Zielnode (target) auswählen
+var target = document.querySelector('#some-id');
+
+// eine Instanz des Observers erzeugen
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Konfiguration des Observers: alles melden - Änderungen an Daten, Kindelementen und Attributen
+var config = { attributes: true, childList: true, characterData: true };
+
+// eigentliche Observierung starten und Zielnode und Konfiguration übergeben
+observer.observe(target, config);
+
+// später: Observation wieder einstellen
+observer.disconnect();
+
+ +

Weiterführende Informationen (engl.)

+ + + +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support18 {{ property_prefix("WebKit") }}
+ 26		{{ CompatGeckoDesktop(14) }}11156.0 {{ property_prefix("WebKit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}18 {{ property_prefix("WebKit") }}
+ 26		{{ CompatGeckoMobile(14) }}{{ CompatUnknown() }}15 +

6 {{ property_prefix("WebKit")}}

+ +

7

+
+
diff --git a/files/de/web/api/navigator/index.html b/files/de/web/api/navigator/index.html new file mode 100644 index 0000000000..b6efb42b05 --- /dev/null +++ b/files/de/web/api/navigator/index.html @@ -0,0 +1,122 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML DOM +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("Window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("Connection")}} with information about the network connection of a device.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
The navigator.mozAudioChannelManager object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non standard

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Allows in-app payment.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Sets a user preference. This method is only available to privileged code and is obsolete; you should use the XPCOM Preferences API instead.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.
+
diff --git a/files/de/web/api/navigator/registerprotocolhandler/index.html b/files/de/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..2ffd20da9d --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,170 @@ +--- +title: Navigator.registerProtocolHandler() +slug: Web/API/Navigator/registerProtocolHandler +translation_of: Web/API/Navigator/registerProtocolHandler +--- +
{{APIRef("HTML DOM")}}
+ +

In progress. Allows web sites to register themselves as possible handlers for particular protocols.

+ +

For security reasons, by default, web sites may only register protocol handlers for themselves — the domain and protocol of the handler must match the current site. However, users may set a preference in Firefox to allow cross website installation, by setting the gecko.handlerService.allowRegisterFromDifferentHost pref to true in about:config.

+ +

Extensions can register protocol handlers targeting other sites: see the 'See Also' section for how to use them from XPCOM.

+ +

Syntax

+ +
window.navigator.registerProtocolHandler(protocol, url, title);
+
+ +

Parameters

+ +
+
protocol
+
The protocol the site wishes to handle, specified as a string. For example, you can register to handle SMS text message links by registering to handle the "sms" scheme.
+
url
+
The URL of the handler, as a string. This string should include "%s" as a placeholder which will be replaced with the escaped URL of the document to be handled. This URL might be a true URL, or it could be a phone number, email address, or so forth. +
The handler's URL must use one of "http" or "https" as its scheme.
+
+
title
+
A user-readable title string for the protocol handler. This will be displayed to the user in interface objects as needed.
+
+ +

Exceptions

+ +
+
SecurityError
+
The user agent blocked registration of the protocol handler. This might happen if an invalid scheme is specified, such as "http", which cannot be registered for obvious security reasons.
+
SyntaxError
+
The "%s" string is missing from the specified protocol handler URL.
+
+ +

Permitted schemes

+ +

For security reasons, registerProtocolHandler() has restrictions on which schemes may be registered. A custom scheme may be registered as long as the scheme's name begins with "web+", is at least five characters long (including the "web+" prefix), and has only lower-case ASCII letters in its name. For example, "web+burger", as shown in the {{anch("Example")}} below.

+ +

Otherwise, the scheme must be one of the schemes on the whitelist below:

+ +
+ +
+ +

Example

+ +

If your web application is located at http://www.google.co.uk, you can register a protocol handler for it to handle "web+burger" links like this:

+ +
navigator.registerProtocolHandler("web+burger",
+                                  "https://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+
+ +

This creates a handler that allows web+burger:// links to direct the user to your web application, inserting the burger information specified in the link into the URL. Recall that this script must be run from the same domain (so any page location at google.co.uk) and the second argument passed must be of http or https scheme (in this example it is https) .

+ +

The user will be notified that your code has asked to register the protocol handler, so that they can decide whether or not to permit it. See the screenshot below for an example.

+ +

+ +
+

"Register a webmail service as mailto handler" shows how to do this from XPCOM scope.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#dom-navigator-registerprotocolhandler', 'registerProtocolHandler()')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support13[1]{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}11.60{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("3.5")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Protocol whitelist includes mailto, mms, nntp, rtsp, and webcal. Custom protocols must be prefixed with web+.

+ +

See also

+ + diff --git a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html new file mode 100644 index 0000000000..5f48e63097 --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html @@ -0,0 +1,127 @@ +--- +title: Webbasierte Protokoll-Handler +slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +
{{Fx_minversion_header(3)}}
+ +

Hintergrund

+ +

Man findet im Web häufiger Seiten, die Verweise mit anderen Protokollen als HTTP einsetzen. Ein Beispiel ist das mailto: Protokoll:

+ +
+
<a href="mailto:webmaster@example.com">Web Master</a>
+
+ +

Seitenersteller können mailto: Verweise nutzen, wenn sie einen bequemen Weg anbieten möchten, E-Mails direkt aus ihrer Webseite heraus zu versenden. Wird der Link aktiviert, sollte der Browser das im Betriebssystem eingestelle Standardprogramm für E-Mail starten. Das ist ein Beispiel für einen desktopbasierten Protokoll-Handler.

+ +

Webbasierte Protokoll-Handler erlauben webbasierten Anwendungen ebenfall an solchen Prozessen teilzunehmen. Das wird mit der Migration vieler Anwendungen ins Web zunehmend wichtiger. Tatsächlich gibt es bereits viele Webanwendungen, die einen mailto: Verweis verarbeiten könnten.

+ +

Registrierung

+ +

Das Einrichten einer webbasierten Anwendung als Protokoll-Handler ist unkompliziert. Die Webapp nutzt registerProtocolHandler(), um sich selbst beim Browser als potentiellen Handler für ein bestimmtes Protokoll zu registrieren. Ein Beispiel:

+ +
navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+ +

Die Parameter sind:

+ + + +

Führt ein Browser diesen Code aus, wird er über einen Dialog die Erlaubnis des Nutzers einholen, die Webanwendung als Handler für dieses Protokoll zu registrieren. Firefox zeigt eine Nachricht in der Notification Bar:

+ +

+ +
Hinweis: Das bei der Registrierung angegebene URL Template muss mit der die Anfrage stellenden Webseite übereinstimmen, oder die Registrierung schlägt fehl. Beispielsweise kann http://example.com/homepage.html einen Protokoll-Handler für http://example.com/handle_mailto/%s registrieren, aber nicht für http://example.org/handle_mailto/%s.
+ +

Wird derselbe Handler mehrfach registriert, meldet der Browser das durch ein weiteres Pop-Up, das auf die bereits erfolgte Registrierung hinweist. Daher ist es sinnvoll, die Registrierung mit einem vorangehenden Check abzusichern.

+ +

Beispiel

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Web Protocol Handler Sample - Register</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  </script>
+</head>
+<body>
+  <h1>Web Protocol Handler Sample</h1>
+  <p>This web page will install a web protocol handler for the <code>fake:</code> protocol.</p>
+</body>
+</html>
+
+ +

Aktivierung

+ +

Ab jetzt wird der Browser bei jedem Klick auf einen Verweis, der das neu registrierte Protokoll verwendet, die Ausführung auf die registrierte URL umleiten. Firefox wird zuvor standardmäßig die Bestätigung durch den Nutzer einholen.

+ +

Beispiel

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Web Protocol Handler Sample - Test</title>
+</head>
+<body>
+  <p>Hey have you seen <a href="burger:cheeseburger">this</a> before?</p>
+</body>
+</html>
+
+ +

Handling

+ +

Der nächste Schritt ist das tatsächliche Handling. Der Browser kombiniert die href aus dem aktivierten Link mit dem registrierten URL Template und führt dann damit einen HTTP GET Request aus. Hervorgehend aus den vorangegangenen Beispielen würde der Request auf folgender URL stattfinden:

+ +
http://www.google.co.uk/?uri=burger:cheeseburger
+
+ +

Serverseitiger Code kann dann die query String Parameter extrahieren und die gewünschte Aktion ausführen.

+ +
Hinweis: Dem serverseitigen Code wird der gesamte Inhalt der href übergeben. D.h. der Server muss das Protokoll aus den Daten parsen.
+ +

Beispiel

+ +
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+    <title>Web Protocol Handler Sample</title>
+</head>
+<body>
+  <h1>Web Protocol Handler Sample - Handler</h1>
+  <p>This web page is called when handling a <code>burger:</code> protocol action. The data sent:</p>
+  <textarea>
+<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
+  </textarea>
+</body>
+</html>
+
+ +

Verweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/navigator/sendbeacon/index.html b/files/de/web/api/navigator/sendbeacon/index.html new file mode 100644 index 0000000000..1e8ff5ea2b --- /dev/null +++ b/files/de/web/api/navigator/sendbeacon/index.html @@ -0,0 +1,144 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon +translation_of: Web/API/Navigator/sendBeacon +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

Die navigator.sendBeacon() Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden.

+ +

Syntax

+ +
navigator.sendBeacon(url, data);
+
+ +

Parameter

+ +
+
url
+
Der url Parameter steht für die ermittelte URL, an die data zu senden ist. 
+
+ +
+
data
+
Der Parameter data enthält zu übermittelnde Daten der Art {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}} oder {{domxref("FormData")}}.
+
+ +

Rückgabewerte

+ +

Die sendBeacon() Methode gibt true zurück, falls der User Agent erfolgreich war, data zum Transfer bereit zu stellen. Andernfalls ist der Rückgabewert false.

+ +

Beschreibung

+ +

Diese Methode erfüllt Bedürfnisse von Analyse- und Diagnostik-Code, der regelmäßig versucht, Daten an den Server zu senden bevor der unload Vorgang einer Seite abgeschlossen ist. Daten schon früher zu senden, könnte eine unvollständige Datensammlung bewirken.
+ Bislang war es für Entwickler schwierig, sicherzustellen, dass Daten während eines unload Vorgangs tatsächlich gesendet wurden.

+ +

Üblicherweise ignorieren User Agenten asynchrone XMLHttpRequests in einem unload Anweisungsblock. Dieses Problem wird in Analytik- und Diagnostik-Code oft umgangen, indem in einem unload oder beforeunload Anweisungsblock ein synchroner XMLHttpRequest zum Datenversand genutzt wird.
+ Ein synchroner XMLHttpRequest zwingt den User Agenten den unload Vorgang des Dokuments zu verzögern, sodass jedoch die weitere Navigation langsamer wirkt. Der Eindruck einer schlechten Ladezeit der Folgeseite läst sich dabei nicht verhindern.

+ +

Es gibt weitere Techniken, die Datenübermittlung zu ermöglichen. Eine besteht darin, den unload Vorgang zu verzögern, indem man ein image Element erzeugt und dessen src Attribut innerhalb des unload Anweisungsblocks ändert. Da die meisten User Agenten den unload Vorgang verzögern werden bis das Nachladen des Bildes abgeschlossen ist, können so währenddessen noch Daten übermittelt werden.
+ Noch eine andere Technnik verwendet eine einige Sekunden lange wirkungsfreie (noop) Schleife innerhalb des unload Anweisungsblocks, die das unload verzögert und zwischenzeitliche Datenübermittlung zum Server ermöglicht.

+ +

Diese alternativen Techniken stellen allerdings nicht nur schlechte Programmiermuster dar. Einige sind schlicht unzuverlässig und erzeugen den Eindruck schlechter Seitenladezeiten.

+ +

Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der versucht, Daten an den Server zu schicken mittels synchronem XMLHttpRequest innerhalb des unload Anweisungsblocks. Dies resultiert in einer Verzögerung des unload Vorgangs der Seite.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // der dritte Parameter bewirkt synchrones xhr
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Durch Verwendung der sendBeacon() Methode werden Daten asynchron an den Server gesendet sobald der User Agent Gelegenheit dazu hat und zwar ohne das unload bzw. das Laden der nächsten Seite zu verzögen.

+ +

Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der Daten zum Server sendet mittels sendBeacon()Methode. 

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Initial definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop("31")}}{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("31")}}2.5{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/navigator/vibrate/index.html b/files/de/web/api/navigator/vibrate/index.html new file mode 100644 index 0000000000..55b453cee1 --- /dev/null +++ b/files/de/web/api/navigator/vibrate/index.html @@ -0,0 +1,107 @@ +--- +title: Navigator.vibrate() +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +

{{APIRef("HTML DOM")}}

+ +

Die Navigator.vibrate()-Methode erzeugt eine Vibration, wenn entsprechende Hardware vorhanden ist. Wenn das Gerät keine Vibration unterstützt, hat diese Methode keine Auswirkungen. Wenn eine Vibration gestartet werden soll, aber eine andere Vibration noch ausgeführt wird, wird die Alte gestoppt und die Neue gestartet!

+ +

Wenn die Methode nicht ausgeführt werden konnte aufgrund eines ungültigen Parameters wird ein false zurückgegeben, ansonsten ein true. Wenn das Modell zu lang ausgeführt wird, wird es abgeschnitten: die maximale Dauer ist je nach Implementierung abhängig!

+ +

Syntax

+ +
var successBool = window.navigator.vibrate(pattern);
+
+ +
+
pattern
+
Bietet ein Schema von Vibrationen und Vibrationsintervallen. Jeder Wert bezeichnet eine Anzahl an Millisekunden zum vibrieren und pausieren (im Wechsel). Sie bieten entweder einen einzelnen Wert (um einmal für so viele Millisekunden zu vibrieren) oder ein Array von Werten, um abwechselnd zu vibrieren, pausieren, dann wieder zu vibrieren. Siehe Vibration API für weitere Details.
+
+ +

Wenn man 0 als Wert, einen leeren Array oder einen Array, der nur 0 als Wert(e) enthält, angibt wird die Vibration gestoppt.

+ +

Beispiele

+ +
window.navigator.vibrate(200); // vibriert 200ms lang
+window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // vibriert 'SOS' im Morsecode
+
+ +

Technische Daten

+ + + + + + + + + + + + + + + + +
Technische DatenStatusHinweis
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Linked to spec is the latest editor's draft; W3C version is a REC.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}} (no prefix) [1]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunktionAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile("16.0")}} (no prefix) [1]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Wenn die Vibration zulang ist, das heißt der Wert selbst oder das Muster, wurde bis einschließlich Firefox 26 anstatt  false, eine Fehlermeldung zurückgegeben ({{bug("884935")}}). Ab Firefox 32 wird true zurückgegeben, aber das Muster gekürzt ({{bug(1014581)}}).

+ +

Weitere Informationen

+ + diff --git a/files/de/web/api/navigatoronline/index.html b/files/de/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/de/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorOnLine interface contains methods and properties related to the connectivity status of the browser.

+ +

There is no object of type NavigatorOnLine, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorOnLine interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
+ +

Methods

+ +

The NavigatorOnLine interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}No change from the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/navigatoronline/online/index.html b/files/de/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..2995101bb4 --- /dev/null +++ b/files/de/web/api/navigatoronline/online/index.html @@ -0,0 +1,190 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/NavigatorOnLine/onLine +tags: + - API + - DOM + - Dokumentation + - Eigenschaft + - Navigation + - NavigatorOnLine + - Offline + - Online + - Reference + - WebAPI +translation_of: Web/API/NavigatorOnLine/onLine +--- +
{{ApiRef("HTML DOM")}}
+ +

Diese Eigenschaft gibt einen Wahrheitswert (Bool-Wert) zurück, der Auskunft gibt, ob der Browser eine Internetverbindung aufbauen konnte. Dieser Wert wird immer dann aktualisiert, wenn eine neue Verbindung vom Browser angefordert wurde (durch Script- oder Benutzeraktionen). Es wird "false" zurückgegeben, wenn der letzte Versuch, eine Verbindung aufzubauen, fehlgeschlagen ist.

+ +

Einige Browser implementieren diese Funktion verschieden.

+ +

Für Chrome und Safari gilt, dass wenn keine Verbindung zum LAN oder Router aufgebaut wurde, der Browser "offline" ist. Andernfalls ist der Browser "online". Das bedeutet, dass aus dem Online-Status nicht die tatsächliche Verbindung erkennbar ist. Wenn der Rückgabewert "false" ist, dann ist mit Sicherheit keine Verbindung vorhanden. Wenn der Wert aber "true" ist, muss dies keine tatsächliche Verbindung zum Internet bedeuten. Auch kann die Ausführung innerhalb einer Virtuellen Maschine den Wert verfälschen. Für weitere Informationen kann dieser HTML5-Rocks Artikel hilfreich sein (in Englisch): Working Off the Grid with HTML5 Offline

+ +

Firefox und der Internet Explorer können diesen Wert auch durch die Funktion des "Offline-Modus" verändern. Dann wird auch "false" zurückgegeben, unabhängig vom tatsächlichen Status.

+ +

Bis Firefox 41 wurde in allen anderen Fällen "true" zurückgegeben. Seit Version 41 kann der tatsächliche Verbindungsstatus erkannt werden, wenn Firefox auf OS X oder Windows installiert ist.

+ +

Es sind auch folgende Ereignisse verfügbar, mit denen unmittelbar auf Änderungen des "OnLine"-Wertes reagiert werden kann.

+ + + +

 

+ +

Syntax

+ +
online = window.navigator.onLine;
+
+ +

Value

+ +

Der Rückgabewert ist vom Typ "boolean", kann also true oder false sein.

+ +

 

+ +

Beispiel

+ +

Hier das Live-Beispiel

+ +

Um zu bestimmen, ob der Browser mit dem Internet verbunden ist, müssen Sie den Wert von window.navigator.onLine wie folgt verwenden:

+ +
if (navigator.onLine) {
+  console.log('Verbunden');
+} else {
+  console.log('Getrennt');
+}
+ +

Wenn der Browser onLine nicht kennt, wird false oder undefiniert zurückgegeben.

+ +

Um auf dir Veränderung des Status direkt reagieren zu können, verwenden Sie addEventListener für die Ereignisse window.ononline und window.onoffline; wie in diesem Beispiel:

+ +
window.addEventListener("offline", function(e) { console.log("Nicht Verbunden"); });
+
+window.addEventListener("online", function(e) { console.log("Verbunden"); });
+
+ +

 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

 

+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Einfache Umsetzung{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(1.9.1)}}[2]
+ {{CompatGeckoDesktop(2.0)}}[4]		8[3]{{CompatNo}}[2]5.0.4
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileBlackBerry
Einfache Umsetzung2.2[5]{{CompatGeckoMobile(1.9.1)}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} +

7
+ 10

+
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Vorherige Versionen von Chrome geben true unmittelbar nach den öffnen des Tabs zurück. Erst nach der nächsten Netzwerkaktivität wird der richtige Wert zurückgegeben.  Windows: 11, Mac: 14, Chrome OS: 13, Linux: Liefert immer true zurück. Siehe auch crbug.com/7469.

+ +

[2] Seit Firefox 4 und Opera 11.10 wird false unabhängig von der tatsächlichen Verbindung zurückgegeben, wenn der "offline"-Modus des Browsers aktiviert wurde. 

+ +

[3] Im Internet Explorer 8 werden die "online"- and "offline"-Ereignisse duch document.body ausgelöst; seit dem IE 9 werden diese auch von window ausgelöst.

+ +

[4] Seit Firefox 41, auf OS X und Windows, wird der tatsächliche Verbindungstatus zurückgegeben, solange der "offline"-Modus nicht aktivert wurde.

+ +

[5] Fehler in der WebView-Komponenten, siehe auch: bug 16760.

+ +

 

+ +

Hinweise

+ +

Für weitere Informationen, siehe auch die  Online/Offline‎-Ereignisse 

+ +

 

+ +

Verweise

+ + diff --git a/files/de/web/api/navigatoronline/online_and_offline_events/index.html b/files/de/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..4bceb46e36 --- /dev/null +++ b/files/de/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,120 @@ +--- +title: Online- und Offline-Events +slug: Web/API/NavigatorOnLine/Online_and_offline_events +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

Einige Browser implementieren Online-/Offline-Events basierend auf der WHATWG Web Applications 1.0 specification.

+ +

Übersicht

+ +

Um eine gute offlinefähige Webanwendung erstellen zu können, muss die Anwendung wissen, wann sie offline ist. Zusätzlich muss die Anwendung wissen, wann die Internetverbindung wieder verfügbar ist. Die Voraussetzungen sind also:

+ +
    +
  1. die Anwendung erfährt, wann die Verbindung nach einem Verbindungsabbruch wieder besteht, so dass Änderungen mit dem Server abgeglichen werden können
    2. +
  2. die Anwendung erfährt, wann die Verbindung abbricht, um so Serveranfragen für später in eine Warteschlange einreihen zu können
    3. +
+ +

Dieser Vorgang trägt dazu bei, Online-/Offline Ereignisse zu trivialisieren.

+ +

Oft benötigen Webanwendungen außerdem die Möglichkeit, bestimmte Dokumente im Offline-Cache zu halten. Mehr Informationen darüber gibt es unter Offline resources in Firefox.

+ +

API

+ + + +

navigator.onLine ist eine Eigenschaft mit boole'schem Wert (true für online, false für offline). Sie aktualisiert sich, sobald der Benutzer in den Offline-Modus wechselt, indem der entsprechende Menü-Eintrag angewählt wird (in Firefox: Datei -> Offline-Modus).

+ +

Die Eigenschaft aktualisiert sich außerdem, sobald der Browser nicht mehr in der Lage ist, eine Verbindung herzustellen. Gemäß der Spezifikation:

+ +
The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...
+ +

Firefox 2 aktualisiert diese Eigenschaft beim Wechseln in den Offline-Modus und zurück, sowie beim Abbruch/Wiederaufbau der Netzwerkverbindung in Windows und Linux.

+ +

Diese Eigenschaft existierte bereits in älteren Versionen von Firefox und Internet Explorer (die Spezifikation selbst basiert auf den vorherigen Implementierungen), sodass man sie schon jetzt einsetzen kann. Die Autoerkennung der Konnektivität wurde in Firefox 2 implementiert.

+ +

"online" und "offline" Events

+ +

Mit Firefox 3 gibt es 2 neue Events: "online" und "offline". Diese werden auf dem <body> jeder Sete ausgelöst, wenn der Browser zwischen Online- und Offline-Modus wechselt. Zusätzlich steigen die Events auf von document.body, zu document, und letztlich zu window. Beide können nicht unterbunden werden (man kann den Benutzer nicht daran hindern, online oder offline zu gehen).

+ +

Die Events können auf bekannte Art und Weise registriert werden:

+ + + +

Beispiel

+ +

Es gibt einen einfachen Test, um zu überprüfen, ob die Events funktionieren:

+ +

Hier ist der JavaScript-Teil:

+ +
window.addEventListener('load', function() {
+  var status = document.getElementById("status");
+
+  function updateOnlineStatus(event) {
+    var condition = navigator.onLine ? "online" : "offline";
+
+    status.className = condition;
+    status.innerHTML = condition.toUpperCase();
+
+    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
+  }
+
+  window.addEventListener('online',  updateOnlineStatus);
+  window.addEventListener('offline', updateOnlineStatus);
+});
+ +

Ein bißchen CSS:

+ +
#status {
+  position : fixed;
+  width: 100%;
+  font : bold 1em sans-serif;
+  color: #FFF:
+  padding : 0.5em
+}
+
+#log {
+  padding: 2.5em 0.5em 0.5em;
+  font: 1em sans-serif;
+}
+
+.online {
+  background: green;
+}
+
+.offline {
+  background: red;
+}
+
+ +

Und das entsprechende HTML:XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +
<div id="status"></div>
+<div id="log"></div>
+<p>This is a test</p>
+
+ +

Hier ist das Live-Ergebnis:

+ +

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

+ +

Hinweise

+ +

Wenn die API im Browser nicht implementiert ist, gibt es andere Möglichkeiten herauszufinden, ob der Benutzer offline ist: zum Beispiel durch das Reagieren auf AppCache error Ereignissen oder auf Antworten von XMLHttpRequest.

+ +

Verweise

+ + diff --git a/files/de/web/api/node/appendchild/index.html b/files/de/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..519f6f9a0d --- /dev/null +++ b/files/de/web/api/node/appendchild/index.html @@ -0,0 +1,144 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Die Node.appendChild() Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).

+ +

Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird appendChild() es von der aktuellen Position zu der neuen Position bewegen. Es gibt also keine Notwendigkeit den Knoten erst zu entfernen, weil ein Knoten in einem Dokument nicht gleichzeitig an zwei Stellen vorkommen kann. Also, wenn der Knoten bereits einen Eltern-Knoten hat, wird der Knoten zuerst entfernt und dann erneut am Ende der Kind-Knoten-Liste angehängt.

+ +

Das {{domxref("Node.cloneNode()")}}  kann genutzt werden um eine Kopie des Knotens zu machen, bevor es an einen neuen Eltern-Knoten angehängt wird. Zu beachten: Kopien die mit cloneNode gemacht wurden, werden nicht automatisch Synchron gehalten.

+ +

Syntax

+ +
var aChild = element.appendChild(aChild);
+ +

Parameter

+ +

aChild

+ +

Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).

+ +

Rückgabewert

+ +

Der Rückgabewert ist das angehängte Kindelement (aChild), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.

+ +

Anmerkungen

+ +

Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Setzt nur aBlock auf <b></b>, was möglicherweise nicht das gewünschte ist.

+ +

Beispiele

+ +
//  Erstellen Sie ein neues Absatz-Element und fügen Sie es an das Ende des Dokument-Körpers (body)
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}No change from {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..afbddd274e --- /dev/null +++ b/files/de/web/api/node/childnodes/index.html @@ -0,0 +1,70 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+

Allgemein

+

childNodes gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (childNodes) eines bestimmten HTML-Elements enthält, zurück.

+

Syntax

+
var nodeList = referenzElement.childNodes;
+
+

nodeList ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt childNodes eine leere NodeList zurück.
+
+ Diese Eigenschaft kann nur ausgelesen werden (read-only).

+

Beispiel

+

Folgendes HTML-Dokument liegt vor:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Neue Mitarbeiter eingestellt</h3>
+    <p>Dank der guten Konjunktur letzten Jahres [...]</p>
+  </body>
+</html>
+
+

Nun sollen die childNodes von <body> ausgelesen und in einer Liste namens nodeList gespeichert werden:

+
var bd = document.body;
+
+// Zuerst werden wir überprüfen, ob das <body>-Element überhaupt Kindknoten hat.
+if (bd.hasChildNodes()) {
+   // Nun werden wir die Eigenschaft childNodes auslesen
+   var nodeList = bd.childNodes;
+
+   for(var i = 0; i < nodeList.length; i++) {
+     // So wird nodeList durchlaufen und folgender Code wird an jedem Eintrag ausgeführt
+     // In diesem Fall soll der Name ausgegeben werden
+     alert(nodeList[i].nodeName);
+   }
+}
+
+


+ Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <body>) bewirkt eine aktualisierung der Liste.
+ Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.
+ Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:

+
while(bd.firstChild) {
+    bd.removeChild(bd.firstChild);
+}
+
+

Anmerkungen

+

Mit childNodes erhalten Sie eine Liste aller Kindknoten, einschließlich derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt childNodes die Eigenschaft {{ domxref('Element.children') }}.

+

Die Einträge in nodeList sind Objekte, keine Zeichenketten. Für diese Objekte gelten wiederum alle Methoden und Eigenschaften von {{ domxref("Node") }}. Um also Daten aus diesen Objekten auszulesen, müssen deren Eigenschaften ausgelesen werden. Um beispielsweise den Namen eines in nodeList aufgeführten Elements auszulesen, muss man die eigenschaft nodeName auslesen:

+
var name = nodeList[i].nodeName;
+

Das document Objekt hat zwei Kindknoten: Die Doctype-Deklaration und das root-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.
+ Folgendermaßen kann darauf zugegriffen werden:

+
var root = document.documentElement;
+

In (X)HTML-Dokumenten stellt das HTML-Element das root-Element dar.

+

Siehe auch

+ +

Spezifikationen

+ +

{{ languages( { "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes", "de": "de/DOM/element.childNodes" } ) }}

diff --git a/files/de/web/api/node/clonenode/index.html b/files/de/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..d51a489a69 --- /dev/null +++ b/files/de/web/api/node/clonenode/index.html @@ -0,0 +1,135 @@ +--- +title: Node.cloneNode +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +
{{APIRef("DOM")}}
+ +

Übersicht

+ +

Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.

+ +

Syntax

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
Der Knoten, welcher dupliziert werden soll.
+
dupNode
+
Der duplizierte Knoten.
+
deep
+
true wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, false wenn nur der Knoten dupliziert werden soll.
+
+ +
+

Hinweis: In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument deep optional. Es ist dann laut Spezifikation true.

+ +

Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun false ist. Auch wenn es immer noch optional ist, sollte man das Argument deep aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.

+
+ +

Beispiel

+ +
    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+
+ +

Hinweise

+ +

Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via addEventListener() oder über die jeweilige Elementeigenschaft (z.B. node.onclick = function) gesetzt wurden. Im Fall eines <canvas>-Elements wird das gezeichnete Bild nicht mitkopiert.

+ +

Der mit cloneNode() duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.

+ +

Wenn deep auf false gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.

+ +
Warnung: Die Verwendung von cloneNode() kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.
+ +

Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das name Attribut überlegt werden.

+ +

Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.

+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep as an optional parameter +

Ja

+ +

(Standard: false)

+ 		{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}} +

Yes

+ +

(default is false)

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep as an optional parameter{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Spezifikationen

+ + diff --git a/files/de/web/api/node/firstchild/index.html b/files/de/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..38703904ec --- /dev/null +++ b/files/de/web/api/node/firstchild/index.html @@ -0,0 +1,62 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

Allgemein

+ +

firstChild gibt den ersten Kindknoten (childNode) eines Datenknotens zurück.

+ +

Syntax

+ +
var ersterKindknoten = element.firstChild;
+
+ +

Die Variable ersterKindknoten enthält einen Datenknoten.

+ +

Beispiel

+ +

Folgendes HTML-Dokument ist gegeben:

+ +
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Texte</h3>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+ +

Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:

+ +
var ersterKindknoten = document.body.firstChild;
+
+ +

In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des Paragraphs und dem Start-Tag von <body> ein Zeilenumbruch und vier Leerzeichen befinden.

+ +

Anmerkungen

+ + + +

Spezifikationen

+ + + +

Siehe auch:

+ + + +

{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}

diff --git a/files/de/web/api/node/haschildnodes/index.html b/files/de/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..1ecfb52b48 --- /dev/null +++ b/files/de/web/api/node/haschildnodes/index.html @@ -0,0 +1,120 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API DOM Methode Node +translation_of: Web/API/Node/hasChildNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.hasChildNodes() Methode liefert einen Boolean Wert der anzeigt ob die aktuelle {{domxref("Node")}} child nodes hat oder nicht.

+ +

Syntax

+ +
result = node.hasChildNodes();
+ +
+
result
+
enthält den return Wert true oder false.
+
+ +

Beispiele

+ +

Das nächste Beispiel entfernt die erste child node innerhalb dem element mit der id "foo" wenn foo child nodes enthält.

+ +
var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+
+ +

Zusammenfassung

+ +

Es gibt unterschiedliche Wege herauszufinden ob die node eine child node enthält.

+ + + +

Spezifikation

+ + + +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/index.html b/files/de/web/api/node/index.html new file mode 100644 index 0000000000..9f725381a2 --- /dev/null +++ b/files/de/web/api/node/index.html @@ -0,0 +1,365 @@ +--- +title: Node +slug: Web/API/Node +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

+ +

The following interfaces all inherit from Node its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require localName to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require namespaceURI to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Is a {{domxref("DOMString")}} representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), and PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+ Though recent specifications require prefix to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.textContent")}}
+
Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Insert a {{domxref("Node")}} as the last child node of this element.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
 
+
{{domxref("Node.contains()")}}
+
 
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
...
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
 
+
{{domxref("Node.isEqualNode()")}}
+
 
+
{{domxref("Node.isSameNode()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a Boolean flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.lookupPrefix()")}}
+
 
+
{{domxref("Node.lookupNamespaceURI()")}}
+
 
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
 
+
+ +

Examples

+ +

Browse all child nodes

+ +

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntax

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

+ +

Parameters

+ +
+
parentNode
+
The parent node (Node Object).
+
callbackFunction
+
The callback function (Function).
+
+ +

Sample usage

+ +

The following example send to the console.log the text content of the body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), isSameNode(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition.
+ +

 

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode() {{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.
+ Removed in {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Webkit and Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/node/innertext/index.html new file mode 100644 index 0000000000..bd1594471a --- /dev/null +++ b/files/de/web/api/node/innertext/index.html @@ -0,0 +1,90 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API DOM Property Reference +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

Node.innerText ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.

+ +

{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}} +

Eingeführt, basiert auf dem draft of the innerText specification. Siehe whatwg/html#465 und whatwg/compat#5 für die Historie.

+
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{ CompatGeckoDesktop(45) }}69.6 (probably earlier)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.3 (probably earlier){{ CompatGeckoMobile(45) }}10 (probably earlier)124.1 (probably earlier)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/lastchild/index.html b/files/de/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..9b6f98e59e --- /dev/null +++ b/files/de/web/api/node/lastchild/index.html @@ -0,0 +1,41 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+

Allgemein

+

lastChild gibt den letzten Kindknoten (childNode) eines Datenknotens zurück.

+

Syntax

+
var letzterKindknoten = element.lastChild;
+
+

Die Variable letzterKindknoten enthält einen Datenknoten.

+

Beispiel

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Texte</h3>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+

Um auf das letzte Kindelement zuzugreifen, kann man folgenden Code verwenden:

+
var letzterKindknoten = document.body.lastChild;
+
+

In diesem Fall ist der letzte Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des Paragraphs und dem Schlusstag des body-Tags ein Zeilenumbruch und zwei Leerzeichen befinden.

+

Anmerkungen

+ +

Spezifikation

+

lastChild (en)

+

Siehe auch:

+ +

{{ languages( { "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" , "zh-cn": "zh-cn/DOM/Node.lastChild" } ) }}

diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..414e75a8ce --- /dev/null +++ b/files/de/web/api/node/nextsibling/index.html @@ -0,0 +1,60 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +

{{ ApiRef() }}

+

Allgemein

+

Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird null zurückgegeben.

+

Syntax

+
nextNode = node.nextSibling;
+
+

Beispiele

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div>Das ist eine DIV-Box</div>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+

Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:

+
// Diese Variable speichert eine Referenz auf das Erste Element, das <body> enthält, also die DIV-Box
+	var element = document.body.children[0];
+
+	// Nun ermitteln wir das folgende Element
+	var folgeElement = element.nextSibling;
+
+	// Ausgabe des nodeNames
+	alert(folgeElement.nodeName);
+
+

Erläuterung:

+

Die Variable element enthält das erste Kindelement des <body>-Tags, also die DIV-Box.
+ folgeElement speichert den ersten Geschwisterknoten der DIV-Box. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem > der DIV-Box und dem < des <p> befinden. Das alert()-Fenster gibt somit #text aus.

+

Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:

+
var element = document.body.children[0];
+var liste = [];
+
+while(element.nextSibling) {
+  var element = liste[liste.push(element.nextSibling)-1];
+}
+
+

Das Skript erzeugt ein Array liste mit folgendem Inhalt:

+
Array[3]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+
+

Anmerkungen

+

Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein #text-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft nextSibling auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt nextSibling die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden

+

Spezifikationen

+ +

{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}

+

Siehe auch

+ diff --git a/files/de/web/api/node/nodevalue/index.html b/files/de/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..ab9720812e --- /dev/null +++ b/files/de/web/api/node/nodevalue/index.html @@ -0,0 +1,88 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API DOM Gecko Property +translation_of: Web/API/Node/nodeValue +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.nodeValue Eigenschaft gibt den Wert der aktuellen Node zurück oder setzt ihn.

+ +

Syntax

+ +
value = node.nodeValue;
+
+ +

value ist ein string der den Inhalt, falls es ihn gibt, der aktuellen node enthält.

+ +

Notizen

+ +

Für das Dokument selbst, gibt nodeValue  null zurück. Für Text, Kommentar, und CDATA nodes, gibt nodeValue den Inhalt der node zurück. Für attribute nodes, wird der Inhalt des Attributes zurückgegeben.

+ +

Die folgende Tabelle zeigt die return Werte der unterschiedlichen Elemente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attrvalue of attribute
CDATASectionInhalt der CDATA Section
CommentInhalt des comments
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionGesamter Inhalt, ausgenommen des target
TextInhalt der text node
+ +

Wenn nodeValue als null definiert wird, hat das null setzen keine Auswirkung.

+ +

Spezifikation

+ + diff --git a/files/de/web/api/node/normalize/index.html b/files/de/web/api/node/normalize/index.html new file mode 100644 index 0000000000..e49f29e397 --- /dev/null +++ b/files/de/web/api/node/normalize/index.html @@ -0,0 +1,49 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - API + - DOM + - Méthode + - Node + - Referenz +translation_of: Web/API/Node/normalize +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.normalize() Methode fügt die ausgewählte Node und all Ihre Kindelemente in eine "normalisierte" Form. In einer normalisierten Node sind keine Textnodes leer und es gibt keine parallel existierenden Textnodes.

+ +

Schreibweise

+ +
element.normalize();
+
+ +

Beispiel

+ +
var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Teil 1 ") );
+wrapper.appendChild( document.createTextNode("Teil 2 ") );
+
+// Her wäre: wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Teil 1 "
+// wrapper.childNodes[1].textContent === "Teil 2 "
+
+wrapper.normalize();
+
+// Jetzt: wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Teil 1 Teil 2 "
+ +

Spezifikation

+ + + +

Verwandte Themen

+ + diff --git a/files/de/web/api/node/parentnode/index.html b/files/de/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..6481d10a86 --- /dev/null +++ b/files/de/web/api/node/parentnode/index.html @@ -0,0 +1,79 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +

{{ ApiRef() }}

+

Allgemein

+

Gibt das Elternelement des gegebenen Datenknotens, entsprechend des DOM-Baums zurück.

+

Syntax

+
elternelement = node.parentNode
+
+

elternelement enthält das Elternelement des gegebenen Datenknotens.

+

Beispiel

+
var dokument = document.documentElement.parentNode;
+
+

Anmerkungen

+ +

Siehe auch

+ +

Browserunterstützung

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop(1.0) }}0.2{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile(1) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

Spezifikation

+

DOM Level 2 Core: Node.parentNode (en)

+

{{ languages( { "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "pl": "pl/DOM/element.parentNode" , "zh-cn": "zh-cn/DOM/Node.parentNode" } ) }}

diff --git a/files/de/web/api/node/previoussibling/index.html b/files/de/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..0a5bd2f518 --- /dev/null +++ b/files/de/web/api/node/previoussibling/index.html @@ -0,0 +1,69 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +

{{ ApiRef() }}

+

{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}

+

Allgemein

+

Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.

+

Syntax

+
vorangestellterKnoten = node.previousSibling;
+
+

Beispiele

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div>Das ist eine DIV-Box</div>
+    <p>Hier steht Text!</p>
+    <ul>
+      <li>Punkt 1</li>
+      <li>Punkt 2</li>
+    </ul>
+  </body>
+</html>
+
+

So kann der vorangestellte Datenknoten von <ul> ermittelt werden:

+
	// Diese Variable speichert eine Referenz auf das letzte Element, das <body> enthält, also <ul>
+	var element = document.body.children[2];
+
+	// Nun ermitteln wir durch previousSibling den vorangestellten Knoten
+	var vorangestellterKnoten = element.previousSibling;
+
+	// Ausgabe des Knoten-Namens
+	alert(vorangestellterKnoten.nodeName);
+
+

Erläuterung:

+

Die Variable element enthält das letzte Kindelement des -Tags, also <ul>. vorangestellterKnoten speichert den direkt vorangestellten Geschwisterknoten von <ul>. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem > von <p> und dem < des <ul> befinden. Das alert()-Fenster gibt somit #text aus.

+

So können alle vorangestellten Datenknoten eines Elements ermittelt werden:

+
var element = document.body.children[2];
+var liste = [];
+
+while(element.previousSibling) {
+  var element = liste[liste.push(element.previousSibling)-1];
+}
+
+

Das Skript erzeugt ein Array liste mit folgendem Inhalt:

+
Array[5]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+  3: HTMLDivElement
+  4: Text
+
+

Anmerkungen

+

Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.
+ Da die Eigenschaft previousSibling Textknoten berücksichtigt, kann es sein, dass Sie statt des vorangestellten Elements einen Textknoten als Rückgabewert erhalten. Oft passiert das durch Whitespace aller Art (z.B. Leerzeichen, Zeilenvorschübe), der sich zwischen den beiden Elementen befindet und von previousSibling als Textknoten interpretiert wird.
+ Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}

+

Spezifikationen

+ +

Siehe auch

+ diff --git a/files/de/web/api/node/removechild/index.html b/files/de/web/api/node/removechild/index.html new file mode 100644 index 0000000000..86a8dfd460 --- /dev/null +++ b/files/de/web/api/node/removechild/index.html @@ -0,0 +1,82 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - Entfernen + - Knoten + - Löschen + - Methode(2) + - Referenz +translation_of: Web/API/Node/removeChild +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Methode Node.removeChild() entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.

+ +

Syntax

+ +
var oldChild = element.removeChild(child);
+ODER
+element.removeChild(child);
+
+ + + +

Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die oldChild Objektreferenz. In der zweiten Form wird jedoch keine oldChild-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit automatisch aus dem Speicher entfernt. 

+ +

Wenn child kein Kind des Knotens element ist, wirft die Methode eine Exception. Dies passiert auch wenn child zwar zum Aufruf der Methode ein Kind von element war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).

+ +

 

+ +

Beispiele

+ +
<!-- Beispiel HTML -->
+
+<div id="top" align="center">
+  <div id="nested"></div>
+</div>
+
+ +
// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+
+ +
// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +
// Alle Kindknoten eines Elements entfernen
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/node/replacechild/index.html b/files/de/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..09886ba653 --- /dev/null +++ b/files/de/web/api/node/replacechild/index.html @@ -0,0 +1,61 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +translation_of: Web/API/Node/replaceChild +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

Die Node.replaceChild()-Methode ersetzt den Kind-Knoten (child node) innerhalb des gegebenen Eltern-Knotens (parent node) durch einen anderen.

+ +

Syntax

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Beispiel

+ +
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// erzeuge einen leeren Element-Knoten
+// ohne ID, Attribute oder Inhalt
+var sp1 = document.createElement("span");
+
+// setze sein id Attribut auf 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Inhalt für das neue Element erzeugen
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// den erzeugten Inhalt an das Element anhängen
+sp1.appendChild(sp1_content);
+
+// Referenz auf den zu ersetzenden Knoten erzeugen
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// den existierenden Knoten sp2 mit dem neuen Span-Element sp1 ersetzen
+parentDiv.replaceChild(sp1, sp2);
+
+// Ergebnis:
+// <div>
+//   <span id="newSpan">new replacement span element.</span>
+// </div>
+
+ +

Spezifikation

+ +

DOM Level 1 Core: replaceChild

+ +

DOM Level 2 Core: replaceChild

+ +

{{ languages( { "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild", "pl": "pl/DOM/element.replaceChild", "zh-cn": "zh-cn/DOM/Node.replaceChild" } ) }}

diff --git a/files/de/web/api/node/setuserdata/index.html b/files/de/web/api/node/setuserdata/index.html new file mode 100644 index 0000000000..7c4c714d01 --- /dev/null +++ b/files/de/web/api/node/setuserdata/index.html @@ -0,0 +1,121 @@ +--- +title: Node.setUserData() +slug: Web/API/Node/setUserData +translation_of: Web/API/Node/setUserData +--- +
{{APIRef("DOM")}}{{obsolete_header}}
+ +

Die Methode Node.setUserData()erlaubt es dem Benutzer Daten dem Element hinzuzufügen (oder löschen), ohne dabei die DOM zu modifizieren. Beachte dabei, dass die Daten durch das Nutzen von {{domxref("Node.importNode")}}, {{domxref("Node.cloneNode()")}} und {{domxref("Node.renameNode()")}} nicht mitgegeben werden kann (jedoch kann {{domxref("Node.adoptNode")}} die Information behalten), und bei Vergleichstest mit {{domxref("Node.isEqualNode()")}} werden die Daten nicht berücksichtigt.

+ +

This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.

+ +
+

The Node.getUserData and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or WeakMap can be used instead.

+
+ +

Syntax

+ +
var prevUserData = someNode.setUserData(userKey, userData, handler);
+ +

Parameters

+ + + +

Beispiel

+ +
var d = document.implementation.createDocument('', 'test', null);
+d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
+console.log(d.documentElement.getUserData('key')); // 15
+var e = document.importNode(d.documentElement, true); // causes handler to be called
+console.log(e.getUserData('key')); // null since user data is not copied
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed from the specification.
{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}{{Spec2('DOM3 Core')}}Initial definition
+ +

Browser Kompabilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}} {{CompatGeckoDesktop("22.0")}}[1]		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}} {{CompatGeckoMobile("22.0")}}[1]		{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The method is still available from within chrome scripts.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..c237b6ee70 --- /dev/null +++ b/files/de/web/api/node/textcontent/index.html @@ -0,0 +1,69 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Eigenschaft + - Kommando API + - NeedsSpecTable + - Referenz +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

Die Node.textContent Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.

+ +

Syntax

+ +
var text = element.textContent;
+element.textContent = "Dies ist ein Beispiel-Text";
+
+ +

Beschreibung

+ + + +

Unterschiede zu innerText

+ +

Internet Explorer hat element.innerText eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:

+ + + +

Unterschiede zu innerHTML

+ +

innerHTML gibt, wie der Name schon sagt, das HTML zurück. Sehr häufig wird dies benutzt, um den Text aus einem Element abzurufen oder ihn zu ändern. Stattdessen sollte lieber textContent verwendet werden. Da der Text nicht als HTML geparst wird, ist es sehr wahrscheinlich, dass die Performance besser ist. Weiterhin umgeht man so auch einen möglichen XSS-Angriffspunkt.

+ +

Beispiel

+ +
// Nehmen wir das folgende HTML Fragment:
+//   <div id="divA">Hier ist <span>etwas</span> Text</div>
+
+// Abrufen des Text-Inhalts:
+var text = document.getElementById("divA").textContent;
+// |text| wird auf "Hier ist etwas Text" gesetzt
+
+// Setzen des Text-Inhalts:
+document.getElementById("divA").textContent = "Hier ist auch Text";
+// Das HTML von divA sieht nun so aus:
+//   <div id="divA">Hier ist auch Text</div>
+
+ +

Browser Kompatibilität

+ +

{{Compat("api.Node.textContent")}}

+ +

Spezifikation

+ + diff --git a/files/de/web/api/notification/index.html b/files/de/web/api/notification/index.html new file mode 100644 index 0000000000..aaf5188c37 --- /dev/null +++ b/files/de/web/api/notification/index.html @@ -0,0 +1,265 @@ +--- +title: Notification +slug: Web/API/notification +translation_of: Web/API/Notification +--- +
{{APIRef("Web Notifications")}} {{ SeeCompatTable() }}
+ +
Das Notification interface wird zum konfigurieren und Anzeigen von desktop notifications verwendet.
+ +

Permissions

+ +

Wenn Sie notifications in einer offenen web app verwenden, fügen sie die desktop-notification permission zu ihrem manifest file hinzu. Notifications können für jedes permission level, hosted oder darüber verwendet werden.

+ +
"permissions": {
+    "desktop-notification":{}
+}
+ +

Konstruktor

+ +
var notification = new Notification(title, options);
+ +

Parameter

+ +
+
title
+
Titel der innerhalb der Notification angezeigt werden muss.
+
options {{optional_inline}}
+
Ein Objekt das optionale Konfigurationsparamter enthält. Es kann die folgenden Einträge enthalten: +
    +
  • dir : Die Ausrichtung des Textes; Verfügbar sind auto, ltr, oder rtl.
    • +
  • lang:  Spezifiziere die verwendete Sprache. Dieser String muss ein valides BCP 47 language tag sein.
    • +
  • body:  Ein String, welcher jeglichen extra Inhalt einer notification beinhaltet.
    • +
  • tag: Die ID einer gegebene notification, um diese abzurufen, zu löschen, zu ersetzen oder zu löschen. 
    • +
  • icon: Die Url für das verwendete Icon in einer notification.
    • +
  • data: Ein Benutzerdefiniertes Datenfeld.
    • +
+
+
+ +

Properties

+ +

Static properties

+ +

Diese Eigenschaften sind nur im Notification-Objekt selbst verfügbar.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Eine Zeichenkette, die die aktuell gesetzten Berechtigungen Notifications anzuzeigen darstellt. Mögliche Werte sind: denied (der Nutzer erlaubt keine Benachrichtigungen), granted (der Nutzer akzeptiert, dass Benachrichtigungen angezeigt werden) oder default (die Nutzerwahl ist unbekannt, daher verhält sich der Browser wie bei denied).
+
+ +

Instance properties

+ +

Diese Eigenschaften sind nur in Instanzen des Notification-Objekts verfügbar.

+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Der Titel der Benachrichtigung der in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
Textausrichtung der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Sprachcode der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
Textinhalt der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
ID der Benachrichtung (if any) welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
URL des Bildes welches als Icon der Benachrichtgung verwendet wird, wie in den Parametern des Konstruktors spezifiziert wurde
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Returns a structured clone of the notification’s data.
+
+ +

Event handlers

+ +
+
{{domxref("Notification.onclick")}}
+
A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.
+
{{domxref("Notification.onshow")}}
+
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
+
{{domxref("Notification.onerror")}}
+
A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.
+
{{domxref("Notification.onclose")}}
+
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
+
+ +

Methods

+ +

Static methods

+ +

These methods are available only on the Notification object itself.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications. This method must be called as the result of a user action (for example, an onclick event), and cannot be used without it.
+
+ +

Instance methods

+ +

These properties are available only on an instance of the Notification object or through its prototype. The Notification objects also inherit from the {{domxref("EventTarget")}} interface.

+ +
+
{{domxref("Notification.close()")}}
+
Programmatically closes a notification.
+
+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Example

+ +

Assume this basic HTML:

+ +
<button onclick="notifyMe()">Notify me!</button>
+ +

It's possible to send a notification as follows:

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

See the live result

+ +

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

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5 {{ property_prefix("webkit") }} (see notes)
+ 22		4.0 {{ property_prefix("moz") }} (see notes)
+ 22		{{ CompatNo() }}256 (see notes)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Mobile
Basic support{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		4.0 {{ property_prefix("moz") }} (see notes)
+ 22		1.0.1 {{ property_prefix("moz") }} (see notes)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
+
+ +

Gecko notes

+ + + +

Chrome notes

+ + + +

Android notes

+ + + +

Safari notes

+ + + +

Notes

+ +

{{ref("1")}} Deprecated since Android 4.0.

+ +

See also

+ + diff --git a/files/de/web/api/notification/permission/index.html b/files/de/web/api/notification/permission/index.html new file mode 100644 index 0000000000..bd381fe34c --- /dev/null +++ b/files/de/web/api/notification/permission/index.html @@ -0,0 +1,187 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +tags: + - API + - DOM + - Notifications + - Property + - Reference +translation_of: Web/API/Notification/permission +--- +

{{APIRef("Web Notifications")}}

+ +

Die schreibgeschützte Berechtigungseigenschaft der Schnittstelle {{domxref ("Notificaton")}} gibt die aktuelle Berechtigung an, die der Benutzer für den aktuellen Ursprung zur Anzeige von Web-Benachrichtigungen erteilt hat.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
var permission = Notification.permission;
+ +

Value

+ +

Ein {{domxref ("DOMString")}} repräsentiert die aktuelle Berechtigung. Der Wert kann sein:

+ + + +

Beispiele

+ +

Das folgende ziemlich ausführliche Snippet könnte verwendet werden, wenn Sie zuerst überprüfen möchten, ob Benachrichtigungen unterstützt werden, und prüfen Sie dann, ob für den aktuellen Ursprung die Erlaubnis für das Senden von Benachrichtigungen gewährt wurde, und fordern Sie dann bei Bedarf eine Genehmigung an, bevor Sie eine Benachrichtigung senden.

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    console.log("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Web Notifications","#dom-notification-permission","permission")}}{{Spec2('Web Notifications')}}Lebensstandard
+ +

Browserkombatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung5 {{ property_prefix("webkit") }} (see notes)
+ 22		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		{{ CompatNo() }}256 (see notes)
Vorhanden in den Arbeitskräften{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
+

Grundlegende Unterstützung

+ 		{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		1.0.1 {{ property_prefix("moz") }} (see notes)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
Vorhanden in den Arbeitskräften{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Firefox OS Notizen

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}

+ +

Chrome Notizen

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}

+ +

Safari Notizen

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/page_visibility_api/index.html b/files/de/web/api/page_visibility_api/index.html new file mode 100644 index 0000000000..c6ad0ac2e4 --- /dev/null +++ b/files/de/web/api/page_visibility_api/index.html @@ -0,0 +1,189 @@ +--- +title: Page Visibility API +slug: Web/API/Page_Visibility_API +translation_of: Web/API/Page_Visibility_API +--- +

{{DefaultAPISidebar("Page Visibility API")}}

+ +

Die Page Visibility API informiert sobald eine Webseite sichtbar ist und sich im Fokus befindet. Mit dem Konzept des "tabbed browsing" ist es recht wahrscheinlich, dass sich jede Webseite irgendwann im Hintergrund befindet und deshalb nicht aktiv sichtbar für den Benutzer ist. Wenn der Benutzer die Webseite minimiert oder in einen anderen Tab wechselt, sendet die API ein {{event("visibilitychange")}} Event über die geänderte Sichtbarkeit der Seite. Anhand des Events können dann spezifische Aktionen ausgeführt oder ein von der Sichtbarkeit abhängiges Verhalten aktiviert werden. Wenn etwa ein Video in der Webseite abgespielt wird, könnte dieses pausieren solange die Seite für den Benutzer unsichtbar ist und automatisch fortsetzen, sobald er zu ihr zurückkehrt. Der Benutzer verliert somit die Stelle in dem Video nicht und kann dieses einfach weiter anschauen.

+ +

Die Status eines {{HTMLElement("iframe")}} sind dieselben wie die des übergeordneten document. Wenn der iframe über CSS Eigenschaften versteckt wird, löst dies nicht die visibility events aus und ändert auch nicht den Status der umliegenden Seite.

+ +

Vorteile

+ +

Die API ist besonders hilfreich, um Ressourcen zu sparen und gibt den Entwicklern die Möglichkeit, nicht benötigte Aufgaben einer Webseite oder Web App zu pausieren solange diese nicht sichtbar ist.

+ +

Use cases

+ +

Einige Beispiele für die Nutzung sind:

+ + + +

Bisher mussten hierfür Workarounds von den Entwicklern implementiert werden. Dafür wurden Lösungen verwendet etwa auf Basis von onblur/onfocus Event-Handlern auf dem window, worüber sich ermitteln lässt ob die Webseite gerade die aktive ist oder nicht. Allerdings teilt dies nicht mit, ob die Webseite gerade für den Benutzer effektiv sichtbar ist oder nicht. Die Page Visibility API addressiert genau das. (Verglichen mit der onblur/onfocus basierten Lösung ist ein zentraler Unterschied, dass dort die Webseite nicht unsichtbar wurde, wenn ein ganz anderes Fenster aktiv wurde oder der Browser selbst den Fokus verloren hat, weil der Benutzer zu einer anderen Applikation gewechselt ist. Eine Webseite wird hier nur unsichtbar, wenn der Benutzer innerhalb des Browserfensters zu einem anderen Tab wechselt oder das Fenster minimiert.)

+ +

Beispiel

+ +

Hier ist ein live Code-Beispiel (eines Videos mit Sound).

+ +

Das Beispiel wurde über folgenden Code realisiert:

+ +
// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Eigenschaften

+ +

document.hidden Read only

+ +

Liefert true wenn die Webseite als unsichtbar für den Benutzer gewertet wird und false andernfalls.

+ +

document.visibilityState Read only

+ +

Ist ein string welcher den aktuellen Sichtbarkeitsstatus angibt. Mögliche Werte sind:

+ + + +
//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Initial definition.
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13 {{property_prefix("webkit")}}
+ 33		{{CompatGeckoDesktop(18)}} [2]1012.10[1]7
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4 {{property_prefix("webkit")}}{{CompatGeckoMobile(18)}} [2]1012.10[1]7
+
+ +

[1] Feuert das {{event("visibilitychange")}} Event nicht, wenn das Browserfenster minimiert wird. Ebenso wird hidden nicht auf true gesetzt.

+ +

[2] In den Versionen Firefox 10 bis Firefox 51 einschließlich, konnte diese Eigenschaft verwendet werden mit Vendor-Prefix -moz-.

+ +

Weitere Informationen

+ + diff --git a/files/de/web/api/performance/index.html b/files/de/web/api/performance/index.html new file mode 100644 index 0000000000..14f80850bb --- /dev/null +++ b/files/de/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Navigation Timing + - NeedsTranslation + - Performance + - Reference + - TopicStub + - Web Performance +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API.

+ +

An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.

+ +
+

Note: This interface and its members are available in Web Workers, except where indicated below. Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.

+
+ +

Properties

+ +

The Performance interface doesn't inherit any properties.

+ +
+
{{domxref("Performance.navigation")}} {{readonlyInline}}
+
A {{domxref("PerformanceNavigation")}} object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth. Not available in workers.
+
{{domxref("Performance.timing")}} {{readonlyInline}}
+
A {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.
+
{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}
+
A non-standard extension added in Chrome, this property provides an object with basic memory usage information. You should not use this non-standard API.
+
+ +
+
+

Event handlers

+
+
{{domxref("Performance.onresourcetimingbufferfull")}}
+
An {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.
+
+ +

Methods

+ +

The Performance interface doesn't inherit any methods.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Removes the given mark from the browser's performance entry buffer.
+
{{domxref("Performance.clearMeasures()")}}
+
Removes the given measure from the browser's performance entry buffer.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "resource" from the browser's performance data buffer.
+
{{domxref("Performance.getEntries()")}}
+
Returns a list of {{domxref("PerformanceEntry")}} objects based on the given filter.
+
{{domxref("Performance.getEntriesByName()")}}
+
Returns a list of {{domxref("PerformanceEntry")}} objects based on the given name and entry type.
+
{{domxref("Performance.getEntriesByType()")}}
+
Returns a list of {{domxref("PerformanceEntry")}} objects of the given entry type.
+
{{domxref("Performance.mark()")}}
+
Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer with the given name.
+
{{domxref("Performance.measure()")}}
+
Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively).
+
{{domxref("Performance.now()")}}
+
Returns a {{domxref("DOMHighResTimeStamp")}} representing the amount of milliseconds elapsed since a reference instant.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Sets the browser's resource timing buffer size to the specified number of "resource" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.
+
{{domxref("Performance.toJSON()")}}
+
Is a jsonizer returning a json object representing the Performance object.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Defines toJson() method.
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Defines now() method.
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}{{Spec2('Navigation Timing')}}Defines timing and navigation properties.
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Changes getEntries() interface.
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Defines getEntries(), getEntriesByType() and getEntriesByName() methods.
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Defines clearResourceTimings() and setResourceTimingBufferSize() methods and the onresourcetimingbufferfull property.
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Clarifies mark(), clearMark(), measure() and clearMeasure() methods.
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Defines mark(), clearMark(), measure() and clearMeasure() methods.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.Performance")}}

+
+
diff --git a/files/de/web/api/performance/now/index.html b/files/de/web/api/performance/now/index.html new file mode 100644 index 0000000000..019bafeb55 --- /dev/null +++ b/files/de/web/api/performance/now/index.html @@ -0,0 +1,164 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Méthode + - Performanz + - Referenz + - Web Performance API +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

Die performance.now() Methode gibt einen {{domxref("DOMHighResTimeStamp")}} zurück, der in Millisekunden gemessen wird und auf fünf Tausendstel einer Millisekunde (5 Mikrosekunden) genau ist.

+ +

Der zurückgegebene Wert stellt die Zeit dar, die seit time origin (der {{domxref("PerformanceTiming.navigationStart")}} Eigenschaft und damit der Startzeit) vergangen ist. In einem Web Worker ist die Startzeit die Zeit, in der ihr Ausführungskontext (Thread oder Prozess) erstellt wurde. In einem Browserfenster ist es die Zeit, zu der eine Nutzerin zu dem aktuellen Dokument navigierte (oder die Navigation bestätigte, sollte Bestätigung notwendig gewesen sein). Folgende Punkte sind dabei zu beachten:

+ + + +
t = performance.now();
+ +

Beispiel

+ +
var zeit0 = performance.now();
+machEtwas();
+var zeit1 = performance.now();
+console.log("Der Aufruf von machEtwas dauerte " + (zeit1 - zeit0) + " Millisekunden.");
+
+ +

Anders als andere Zeitmessungsdaten, die in JavaScript verfügbar sind (beispielsweise Date.now), sind die Zeitstempel, die von Performance.now() zurückgegeben werden nicht auf eine Auflösung von einer Millisekunde beschränkt. Stattdessen repräsentieren sie Zeit als Fließkommazahl mit einer Präzision von bis zu einer Mikrosekunde.

+ +

Ebenso anders als Date.now(), wachsen die Werte, die von Performance.now() zurückgegeben werden immer in einem konstanten Tempo, unabhängig von der Systemuhr (die manuell eingestellt oder durch Software wie NTP ungenau geworden sein kann). Ansonsten wird performance.timing.navigationStart + performance.now() annähernd ähnlich zu Date.now() sein.

+ +

Spezifkationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Strengere Definition von Schnittstellen und Typen
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Ursprüngliche Definition
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzliche Unterstützung{{CompatChrome("20.0")}} {{property_prefix("webkit")}}
+ {{CompatChrome("24.0")}} [1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.0{{CompatOpera("15.0")}}{{CompatSafari("8.0")}}
in Web Workern{{CompatChrome("33")}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
now() in einem dedizierten Worker ist nun unabhängig vom now() des Hauptkontextes.{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Grundsätzliche Unterstützung{{CompatAndroid("4.0")}}{{CompatChrome("25.0")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}10.0{{CompatNo}}9{{CompatChrome("25.0")}}
in Web Workern{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
now() in einem dedizierten Worker ist nun unabhängig vom now() des Hauptkontextes.{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Windows Versionen von Chrome 20 bis 33 geben performance.now() nur mit einer Millisekundengenauigkeit zurück.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/push_api/index.html b/files/de/web/api/push_api/index.html new file mode 100644 index 0000000000..84451b1ac4 --- /dev/null +++ b/files/de/web/api/push_api/index.html @@ -0,0 +1,180 @@ +--- +title: Push API +slug: Web/API/Push_API +translation_of: Web/API/Push_API +--- +
{{SeeCompatTable}}
+ +

Die Push API verleiht Web Applikationen die Fähigkeit, Benachrichtigungen zu empfangen, die von einem Server gesendet werden. Das funktioniert auch, wenn die Web Applikation selbst nicht im Vordergrund oder überhaupt aktuell geladen ist. Dies ermöglicht Entwicklern asynchrone Notizen und Updates an Benutzer zu senden, die sich dafür angemeldet haben. Das Ergebnis ist besseres Engagement mit aktuellem Inhalt.

+ +

Push Konzepte und Anwendung

+ +
+

When implementing PushManager subscriptions, it is vitally important that you protect against CSRF/XSRF issues in your app. See the following articles for more information:

+ + +
+ +

Wenn eine App Push Nachrichten erhalten soll, muss sie ein service worker sein. Wenn der Service Worker aktiv ist, kann er Push Benachrichtigungen abonnieren wie folgt: {{domxref("PushManager.subscribe()")}}.

+ +

Das Resultat {{domxref("PushSubscription")}} enthält sämtliche Information, die die App braucht, um Push Nachrichten zu senden: einen Endpunkt und den Kodierungsschlüssel zum Datenversand.

+ +

Der Service Worker startet bei Bedarf, um eintreffende Nachrichten zu verarbeiten, welche an den Event Handler {{domxref("ServiceWorkerGlobalScope.onpush")}} geliefert werden. Dies erlaubt der App auf einlaufende Push Nachrichten zu reagieren, beispielsweise mit der Darstellung einer Notiz (mit dem Befehl {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Jedes Abonnement ist eindeutig für einen Service Worker. Der Endpunkt des Abonnements ist eine eindeutige capability URL: Kenntnis des Endpunkts ist alles was nötig ist, um eine Nachricht an Ihre Applikation zu senden. Die Endpunkt URL ist daher geheim zu halten, da sonst andere Applikationen Nachrichten an Ihre Applikation senden könnten.

+ +

Die Aktivierung einen Service Workers kann eine erhöhte Ressourcennutzung begründen, besonders der Batterie. Die verschiedenen Browser behandeln dies verschieden. Es gibt aktuell keinen Standard dafür. Firefox erlaubt eine begrenzte Anzahlt (quota) Push Nachrichten, die an eine Applikation gesendet werden dürfen, wobei Push Nachrichten, die Notizen generieren, davon ausgenommen sind. Das Limit wird bei jedem Seitenbesuch erneuert. Zum Vergleich verwendet Chrome kein Limit, sondern erfordert, dass jede Push Nachricht mit einer Notiz angezeigt wird.

+ +
+

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of Push messages is received, and not all generate a visible notification.

+
+ +
+

Note: Chrome versions earlier than 52 require you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Represents a push action, sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provides access to push data sent by a server, and includes methods to manipulate the received data.
+
{{domxref("PushSubscription")}}
+
Provides a subcription's URL endpoint, and allows unsubscription from a push service.
+
+ +

Service worker additions

+ +

The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
+
+ +

Examples

+ +

Mozilla's ServiceWorker Cookbook contains many useful Push examples.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1][3]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ + + +

See also

+ + + +
{{DefaultAPISidebar("Push API")}}
diff --git a/files/de/web/api/pushmanager/index.html b/files/de/web/api/pushmanager/index.html new file mode 100644 index 0000000000..96627b0fb0 --- /dev/null +++ b/files/de/web/api/pushmanager/index.html @@ -0,0 +1,161 @@ +--- +title: PushManager +slug: Web/API/PushManager +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Push + - Push API + - Reference + - Service Workers + - TopicStub + - WebAPI +translation_of: Web/API/PushManager +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

The PushManager interface of the Push API provides a way to receive notifications from third-party servers as well as request URLs for push notifications.

+ +

This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.

+ +
+

Note: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.

+
+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{domxref("PushManager.getSubscription()")}}
+
Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a null value.
+
{{domxref("PushManager.permissionState()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of 'granted', 'denied', or 'prompt'.
+
{{domxref("PushManager.subscribe()")}}
+
Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.
+
+ +

Deprecated methods

+ +
+
{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}
+
Returns a {{jsxref("Promise")}} that resolves to the PushPermissionStatus of the requesting webapp, which will be one of granted, denied, or default. Replaced by {{domxref("PushManager.permissionState()")}}.
+
{{domxref("PushManager.register()")}} {{deprecated_inline}}
+
Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.
+
{{domxref("PushManager.registrations()")}} {{deprecated_inline}}
+
Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.
+
{{domxref("PushManager.unregister()")}} {{deprecated_inline}}
+
Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.
+
+ +

Example

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API','#pushmanager-interface','PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

See also

+ + diff --git a/files/de/web/api/pushmanager/subscribe/index.html b/files/de/web/api/pushmanager/subscribe/index.html new file mode 100644 index 0000000000..5d82a28916 --- /dev/null +++ b/files/de/web/api/pushmanager/subscribe/index.html @@ -0,0 +1,143 @@ +--- +title: PushManager.subscribe() +slug: Web/API/PushManager/subscribe +translation_of: Web/API/PushManager/subscribe +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

Die Methode subscribe() des {{domxref("PushManager")}} Interfaces meldet die API an einem Push-Service an.

+ +

Sie bekommt {{jsxref("Promise")}} als Rückgabewert, welcher sich zu einem {{domxref("PushSubscription")}} Objekt auflösen lässt, und weitere Details der Push-Subscription enthält. Eine neue Push-Subscription wird erstellt falls der aktuelle Service-Worker nicht bereits eine existierende Push-Subscription enthält.

+ +

Syntax

+ +
​PushManager.subscribe(options).then(function(pushSubscription) { ... } );
+ +

Parameter

+ +
+
options {{optional_inline}}
+
Ein Objekt das optionale Konfigurationsparameter enthält. Das Objekt kann die folgenden Eigenschaften (properties) haben: +
    +
  • userVisibleOnly: Ein boolscher Wert der anzeigt, dass die zurückgegebene Push-Subscription nur für Nachrichten genutz wird, dessen Effekt den sie (die Push-Subscription) auslöst, auch nur für den Anwender sichtbar sind.
    • +
+
+
+ +

Returnwert

+ +

{{jsxref("Promise")}} welcher ein {{domxref("PushSubscription")}} Objekt auflöst.

+ +

Beispiel

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  /**********************************************
+  ++ Die Überstzung des Kommentars, folgt noch ++
+  **********************************************/
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.endpoint);
+        /**********************************************
+        ++ Die Überstzung des Kommentars, folgt noch ++
+        **********************************************/
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        /**********************************************
+        ++ Die Überstzung des Kommentars, folgt noch ++
+        **********************************************/
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}{{Spec2('Push API')}}Initial-Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Weitere Informationen

+ + diff --git a/files/de/web/api/range/index.html b/files/de/web/api/range/index.html new file mode 100644 index 0000000000..2dd5008afc --- /dev/null +++ b/files/de/web/api/range/index.html @@ -0,0 +1,254 @@ +--- +title: Range +slug: Web/API/Range +tags: + - API + - DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/Range +--- +

{{ APIRef("DOM") }}

+ +

The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.

+ +

A range can be created using the {{ domxref("Document.createRange", "createRange()") }} method of the {{ domxref("Document") }} object. Range objects can also be retrieved by using the {{ domxref("Selection/getRangeAt", "getRangeAt()") }} method of the {{ domxref("Selection") }} object or the {{domxref("Document/caretRangeFromPoint", "caretRangeAtPoint()")}} method of the {{domxref("Document")}} object.

+ +

There also is the {{domxref("Range.Range()", "Range()")}} constructor available.

+ +

Properties

+ +

There are no inherited properties.

+ +
+
{{domxref("Range.collapsed")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the range's start and end points are at the same position.
+
{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}
+
Returns the deepest {{ domxref("Node") }} that contains the startContainer and endContainer nodes.
+
{{domxref("Range.endContainer")}} {{readonlyInline}}
+
Returns the {{ domxref("Node") }} within which the Range ends.
+
{{domxref("Range.endOffset")}} {{readonlyInline}}
+
Returns a number representing where in the endContainer the Range ends.
+
{{domxref("Range.startContainer")}} {{readonlyInline}}
+
Returns the {{ domxref("Node") }} within which the Range starts.
+
{{domxref("Range.startOffset")}} {{readonlyInline}}
+
Returns a number representing where in the startContainer the Range starts.
+
+ +

Constructor

+ +
+
{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}
+
Returns a Range object with the global {{domxref("Document")}} as its start and end.
+
+ +

Methods

+ +

There are no inherited methods.

+ +
+
{{ domxref("Range.setStart()")}}
+
Sets the start position of a Range.
+
{{ domxref("Range.setEnd()")}}
+
Sets the end position of a Range.
+
{{ domxref("Range.setStartBefore()")}}
+
Sets the start position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.setStartAfter()")}}
+
Sets the start position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.setEndBefore()")}}
+
Sets the end position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.setEndAfter()")}}
+
Sets the end position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.selectNode()")}}
+
Sets the Range to contain the {{ domxref("Node") }} and its contents.
+
{{ domxref("Range.selectNodeContents()")}}
+
Sets the Range to contain the contents of a {{ domxref("Node") }}.
+
{{ domxref("Range.collapse()")}}
+
Collapses the Range to one of its boundary points.
+
{{ domxref("Range.cloneContents()")}}
+
Returns a {{ domxref("DocumentFragment") }} copying the nodes of a Range.
+
{{ domxref("Range.deleteContents()")}}
+
Removes the contents of a Range from the {{ domxref("Document") }}.
+
{{ domxref("Range.extractContents()")}}
+
Moves contents of a Range from the document tree into a {{ domxref("DocumentFragment") }}.
+
{{ domxref("Range.insertNode()")}}
+
Insert a {{ domxref("Node") }} at the start of a Range.
+
{{ domxref("Range.surroundContents()")}}
+
Moves content of a Range into a new {{ domxref("Node") }}.
+
{{ domxref("Range.compareBoundaryPoints()")}}
+
Compares the boundary points of the Range with another Range.
+
{{ domxref("Range.cloneRange()")}}
+
Returns a Range object with boundary points identical to the cloned Range.
+
{{ domxref("Range.detach()")}}
+
Releases the Range from use to improve performance.
+
{{ domxref("Range.toString()")}}
+
Returns the text of the Range.
+
{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}
+
Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.
+
{{ domxref("Range.comparePoint()")}} {{experimental_inline}}
+
Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the Range.
+
{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}
+
Returns a {{ domxref("DocumentFragment") }} created from a given string of code.
+
{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}
+
Returns a {{ domxref("DOMRect") }} object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.
+
{{ domxref("Range.getClientRects()") }} {{experimental_inline}}
+
Returns a list of {{ domxref("DOMRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the Range.
+
{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}
+
Returns a boolean indicating whether the given node intersects the Range.
+
{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}
+
Returns a boolean indicating whether the given point is in the Range.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}{{Spec2('DOM WHATWG')}}Do not use RangeException anymore, use DOMException instead.
+ Made the second parameter of collapse() optional.
+ Added the methods isPointInRange(), comparePoint(), and intersectsNode().
+ Added the constructor Range().
{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('DOM Parsing')}}Added the method createContextualFragment().
{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('CSSOM View')}}Added the methods getClientRects() and getBoundingClientRect().
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
Range() constructor {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
compareNode() {{obsolete_inline}}{{non-standard_inline()}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ Removed in {{CompatGeckoDesktop("1.9")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
isPointInRange(), and comparePoint(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}15.0{{CompatUnknown}}
intersectsNode() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("17.0")}} [2]{{CompatNo}}15.0{{CompatUnknown}}
getClientRects() and getBoundingClientRect(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}915.05
createContextualFragment(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}1115.0{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
+
+ +

[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the Range object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a RangeException defined in prior specifications.

+ +

[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.

+ +

See also

+ + diff --git a/files/de/web/api/range/range/index.html b/files/de/web/api/range/range/index.html new file mode 100644 index 0000000000..f4dddfe830 --- /dev/null +++ b/files/de/web/api/range/range/index.html @@ -0,0 +1,95 @@ +--- +title: Range() +slug: Web/API/Range/Range +translation_of: Web/API/Range/Range +--- +

{{ APIRef("DOM") }}{{seeCompatTable}}

+ +

Der Range() Konstrukteur gibt ein neu generiertes Objekt wieder, wessen Start und Ende das globale {{domxref("Document")}} Objekt ist.

+ +

Syntax

+ +
range = new Range()
+ +

Beispiele

+ +
range = new Range();
+endNode = document.getElementsByTagName("p").item(3);
+endOffset = document.getElementsByTagName("p").item(3).childNodes.length;
+range.setEnd(endNode,endOffset);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-range', 'Range.Range()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Unterstützung{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis Unterstützung{{CompatVersionUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + + +

 

diff --git a/files/de/web/api/readablestream/index.html b/files/de/web/api/readablestream/index.html new file mode 100644 index 0000000000..43873c162b --- /dev/null +++ b/files/de/web/api/readablestream/index.html @@ -0,0 +1,101 @@ +--- +title: ReadableStream +slug: Web/API/ReadableStream +tags: + - API + - Fetch + - Interface + - Reference + - Streams +translation_of: Web/API/ReadableStream +--- +

{{APIRef("Streams")}}{{SeeCompatTable}}

+ +

Das ReadableStream Interface der Streams API repräsentiert einen lesbaren Datenstrom von Bytes.

+ +

Konstruktor

+ +
+
{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}
+
Erstellt eine Instanz des ReadableStream Interfaces.
+
+ +

Eigenschaften

+ +
+
{{domxref("ReadableStream.locked")}} {{readonlyInline}}
+
Gibt zurück, ob der Stream bereits für einen Reader gesperrt ist.
+
+ +

Methoden

+ +
+
{{domxref("ReadableStream.cancel()")}}
+
Bricht den Stream ab und signalisiert dadurch, dass der Konsument sein Interesse am Stream verloren hat. Das angegebene reason Argument wird an die darunterliegende Quelle weitergegeben, welche dieses benutzen kann. 
+
{{domxref("ReadableStream.getReader()")}}
+
Erstellt einen Reader, dessen Typ durch die mode Option angegeben wird, und sperrt den Stream für den neuen Reader. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.
+
{{domxref("ReadableStream.getIterator()")}}
+
Erstellt einen asyncronen ReadableStream-Iterator und sperrt den Stream für ihn, sodass der Iterator der einzige Leser ist. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.
+
{{domxref("ReadableStream.pipeThrough()")}}
+
Bietet die Möglichkeit den Stream mit transformierenden Streams zu verketten.
+
{{domxref("ReadableStream.pipeTo()")}}
+
Pipet den aktuellen ReadableStream zu einem gegebenen {{domxref("WritableStream")}} und gibt ein {{domxref("Promise")}} zurück welches erfüllt ist, wenn der Piping-Prozess erfolgreich beendet wurde oder verwirft es, wenn irgendein anderer Fehler auftritt.
+
{{domxref("ReadableStream.tee()")}}
+
Verzweigt den ReadableStream in zwei neue Stream-Instanzen, auf denen parallel gelesen werden kann.
+
{{domxref("ReadableStream[@@asyncIterator]()")}}
+
Alias der getIterator-Methode.
+
+ +

Benutzung

+ +

Im folgenden Beispiel wird eine {{domxref("Response")}} erzeugt, die HTML-Fragmente einer anderen Ressource fetched und an den Browser streamt.

+ +

Dadurch wird die Benutzung von {{domxref("ReadableStream")}} in Kombination mit {{domxref("Uint8Array")}} gezeigt.

+ +
fetch("https://www.example.org/").then((response) => {
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    start(controller) {
+      // Die folgende Funktion behandelt jeden Daten-Chunk
+      function push() {
+        // "done" ist ein Boolean und "value" ein "Uint8Array"
+        return reader.read().then(({ done, value }) => {
+          // Gibt es weitere Daten zu laden?
+          if (done) {
+            // Teile dem Browser mit, dass wir fertig mit dem Senden von Daten sind
+            controller.close();
+            return;
+          }
+
+          // Bekomme die Daten und sende diese an den Browser durch den Controller weiter
+          controller.enqueue(value);
+        }).then(push);
+      };
+
+      push();
+    }
+  });
+
+  return new Response(stream, { headers: { "Content-Type": "text/html" } });
+});
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Streams','#rs-class','ReadableStream')}}{{Spec2('Streams')}}Initial definition
+ +

Browserkompatibilität

+ +
{{Compat("api.ReadableStream")}}
diff --git a/files/de/web/api/renderingcontext/index.html b/files/de/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..d290eb830d --- /dev/null +++ b/files/de/web/api/renderingcontext/index.html @@ -0,0 +1,41 @@ +--- +title: RenderingContext +slug: Web/API/RenderingContext +translation_of: Web/API/RenderingContext +--- +

{{APIRef("Canvas API")}}

+ +

RenderingContext ist eine WebIDL-typedef, die auf eine beliebige der Schnittstellen verweisen kann, die einen Grafik-Rendering-Kontext innerhalb eines {{HTMLElement("canvas")}} Elements darstellen: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} oder {{domxref("WebGL2RenderingContext")}}.

+ +

Durch die Verwendung der Kurzform RenderingContext können Methoden und Eigenschaften, die eine beliebige dieser Schnittstellen verwenden können, einfacher spezifiziert und geschrieben werden; da <canvas> mehrere Rendering-Systeme unterstützt, ist es aus Sicht der Spezifikation und der Browser-Implementierung hilfreich, eine Kurzform zu verwenden, die "eine dieser Schnittstellen" bedeutet.

+ +

Als solches ist RenderingContext ein Implementierungsdetail und nicht etwas, das Webentwickler direkt verwenden. Es gibt keine RenderingContext-Schnittstelle, und es gibt keine Objekte, die den Typ RenderingContext implementieren.

+ +

Die primäre Verwendung dieses Typs ist die Definition der {{domxref("HTMLCanvasElement.getContext()")}} Methode des <canvas>-Elements, die einen RenderingContext (d.h. einen beliebigen der Rendering-Kontext Typen) zurückgibt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}{{Spec2('HTML WHATWG')}}Erstdefinition.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/response/index.html b/files/de/web/api/response/index.html new file mode 100644 index 0000000000..ee370f462e --- /dev/null +++ b/files/de/web/api/response/index.html @@ -0,0 +1,120 @@ +--- +title: Response +slug: Web/API/Response +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

Die Response Schnittstelle der Fetch API stellt die Antwort auf eine Anfrage dar.

+ +

Sie können ein neues Response-Objekt mithilfe des Konstruktors {{domxref("Response.Response()")}} erstellen. Es ist jedoch wahrscheinlicher, dass Sie ein Response-Objekt als Rückgabewert einer API Operation erhalten, z. B. durch einen Service Worker {{domxref("Fetchevent.respondWith")}} oder ein simples {{domxref("GlobalFetch.fetch()")}}.

+ +

Konstruktor

+ +
+
{{domxref("Response.Response","Response()")}}
+
Erstell ein neues Response Objekt.
+
+ +

Eigenschaften

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Enthält das {{domxref("Headers")}} Objekt der Antwort.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Enthält einen boolschen Wert, ob die anfrage Erfolgreich war (Status im Bereich von 200-299) oder nicht.
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Gibt an, ob die Antwort das Ergebnis einer Weiterleitung ist, d. h. die URL-Liste enthält mehrere Einträge.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Enthält den Status-Code der Antwort (z. B. 200 bei Erfolg).
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Enthält die Statusmeldung, die dem Statuscode entspricht (z. B. OK für 200).
+
{{domxref("Response.type")}} {{readonlyinline}}
+
Enthält den Typ der Antwort (z. B. basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
Enthält die URL der Antwort.
+
{{domxref("Response.useFinalURL")}}
+
Enthält einen booleschen Wert, der angibt, ob dies die endgültige URL der Antwort ist.
+
+ +

Response implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Eigenschaften zur Verfügung:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Ein einfacher Getter, der verwendet wird, um einen {{domxref("ReadableStream")}} des Body-Inhalts verfügbar zu machen.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Speichert einen {{domxref("Boolean")}}, der angibt, ob der Body bereits in einer Antwort verwendet wurde.
+
+ +

Methoden

+ +
+
{{domxref("Response.clone()")}}
+
Klont Response Objekt.
+
{{domxref("Response.error()")}}
+
Gibt ein neues Response Objekt zurück, das einem Netzwerkfehler zugeordnet ist.
+
{{domxref("Response.redirect()")}}
+
Erstellt eine neue Antwort mit einer anderen URL.
+
+ +

Response implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Methoden zur Verfügung:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.
+
{{domxref("Body.blob()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.
+
{{domxref("Body.formData()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("FormData")}} Objekt aufgelöst wird.
+
{{domxref("Body.json()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.
+
{{domxref("Body.text()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("USVString")}} (Text) aufgelöst wird.
+
+ +

Beispiele

+ +

In unserem grundlegenden Beispiel zu Fetch (Beispiel live ausführen) verwenden wir einen einfachen Aufruf von fetch(), um ein Bild abzurufen und es in einem {{htmlelement("img")}} Tag anzuzeigen. Der Aufruf von fetch() gibt ein Promise zurück, das zu einem Response Objekt aufgelöst wird, welches mit der Anforderung der Ressource verknüpft ist. Da wir ein Bild anfordern, werden Sie feststellen, dass wir {{domxref("Body.blob")}} ausführen müssen ({{domxref("Response")}} implementiert Body), um der Antwort den richtigen MIME-Type zuzuordnen.

+ +
const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});
+ +

Sie können auch den {{domxref("Response.Response()")}} Konstruktor verwenden, um Ihr eigenes benutzerdefiniertes Response Objekt zu erstellen:

+ +
const response = new Response();
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Response")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/response/response/index.html b/files/de/web/api/response/response/index.html new file mode 100644 index 0000000000..53f3eff566 --- /dev/null +++ b/files/de/web/api/response/response/index.html @@ -0,0 +1,75 @@ +--- +title: Response() +slug: Web/API/Response/Response +translation_of: Web/API/Response/Response +--- +
{{APIRef("Fetch")}}
+ +

Der Response() Konstruktor erstellt ein neues {{domxref("Response")}} Objekt.

+ +

Syntax

+ +
var myResponse = new Response(body, init);
+ +

Parameter

+ +
+
body {{optional_inline}}
+
Ein Objekt, welches den Body für eine Antwort definiert. Das kann entweder null oder eins der folgenden sein: +
    +
  • {{domxref("Blob")}}
    • +
  • {{domxref("BufferSource")}}
    • +
  • {{domxref("FormData")}}
    • +
  • {{domxref("ReadableStream")}}
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("USVString")}}
    • +
+
+
init {{optional_inline}}
+
Ein Objekt mit Optionen, welches benutzerdefinierte Einstellungen enthält, die auf die Antwort angewendet werden sollen. Mögliche Optionen sind: +
    +
  • status: Der Statuscode der Antwort, z. B. 200.
    • +
  • statusText: Die Statusnachricht die dem Statuscode zugeordnet ist, z. B. OK.
    • +
  • headers: Etwaige Header die Sie Ihrer Antwort hinzufügen wollen, die einem {{domxref("Headers")}} Objekt or einem Objekt-Literal von {{domxref("ByteString")}} Schlüsselwertpaaren enthalten sind (siehe HTTP Header für Referenzen).
    • +
+
+
+ +

Beispiel

+ +

In unserem Beispiel für eine Fetch Antwort (live ausführen) erstellen wir ein neues Response Objekt mit dem Konstruktor, dem wir einen neuen {{domxref("Blob")}} als Body und ein init Objekt übergeben, welches einen benutzerdefinierten status und statusText enthält:

+ +
var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response','Response()')}}{{Spec2('Fetch')}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Response.Response")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/rtcicecandidate/index.html b/files/de/web/api/rtcicecandidate/index.html new file mode 100644 index 0000000000..4479c64bb6 --- /dev/null +++ b/files/de/web/api/rtcicecandidate/index.html @@ -0,0 +1,121 @@ +--- +title: RTCIceCandidate +slug: Web/API/RTCIceCandidate +translation_of: Web/API/RTCIceCandidate +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}{{draft}}

+ +

Das RTCIceCandidate Interface der WebRTC API repräsentiert einen Kandidaten für einen Internet Connectivity Establishment (ICE) Server, welcher eine {{domxref("RTCPeerConnection")}} herstellt.

+ +

Konstruktoren

+ +
+
{{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}}
+
Erstellt ein RTCIceCandidate Objekt.
+
+ +

Properties

+ +
+
{{domxref("RTCIceCandidate.candidate")}} {{readonlyInline}}
+
Ein {{domxref("DOMString")}}, der die Transportadresse für den Kadidaten repräsentiert, welche zur Konnektivitätsprüfung verwendet werden kann. Das Format der Adresse ist ein candidate-attribute, wie in {{RFC(5245)}} definiert. Dieser String ist leer (""), wenn der RTCIceCandidate einen "end of candidates" Indikator repräsentiert.
+
{{domxref("RTCIceCandidate.foundation")}} {{readonlyInline}}
+
Gibt einen eindeutigen Identifikator zurück, der es dem ICE erlaubt, Kandidaten, die in mehreren {{domxref("RTCIceTransport")}} Objekten vorhanden sind, in Beziehung zu setzen.
+
{{domxref("RTCIceCandidate.ip")}} {{readonlyInline}}
+
Gibt die IP-Adresse des Kandidaten zurück.
+
{{domxref("RTCIceCandidate.port")}} {{readonlyInline}}
+
Gibt den Port des Kandidaten zurück.
+
{{domxref("RTCIceCandidate.priority")}} {{readonlyInline}}
+
Gibt die zugewiesene Priorität des Kandidaten zurück.
+
{{domxref("RTCIceCandidate.protocol")}} {{readonlyInline}}
+
Gibt das vom Kandidaten verwendete Protokoll zurück, entweder TCP oder UDP.
+
{{domxref("RTCIceCandidate.relatedAddress")}} {{readonlyInline}}
+
Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist relatedAddress die IP-Adresse des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist sie null.
+
{{domxref("RTCIceCandidate.relatedPort")}} {{readonlyInline}}
+
Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist relatedPort der Port des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist er null.
+
{{domxref("RTCIceCandidate.sdpMid")}} {{readonlyInline}}
+
Enthält, wenn nicht null, den Identifikator der "media stream identification" (wei definiert in RFC 5888) für die Medienkomponente, zu der dieser Kandidat zugeordnet ist.
+
{{domxref("RTCIceCandidate.sdpMLineIndex")}} {{readonlyInline}}
+
Enthält, wenn nicht null, den Index (beginnend bei 0) der Medienbeschreibung (wie definiert in RFC 4566) im SDP, dem dieser Kandidat zugeordnet ist.
+
{{domxref("RTCIceCandidate.tcpType")}} {{readonlyInline}}
+
Wenn protocol den Wert tcp enthält, dann repräsentiert tcpType den Typ des TCP Kandidats. Ansonsten enthält tcpType den Wert null.
+
{{domxref("RTCIceCandidate.type")}} {{readonlyInline}}
+
Einer aus host, srflx, prflx, oder relay.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0', '#rtcicecandidate-interface', 'RTCIceCandidate')}}{{Spec2('WebRTC 1.0')}}Initiale definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(22)}}   
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
+
diff --git a/files/de/web/api/rtcpeerconnection/index.html b/files/de/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..df67ef624c --- /dev/null +++ b/files/de/web/api/rtcpeerconnection/index.html @@ -0,0 +1,379 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +

{{APIRef}}{{SeeCompatTable}}

+ +

The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.

+ +
+

Note: RTCPeerConnection and {{domxref("RTCSessionDescription")}} are currently prefixed in most browsers, and the {{domxref("navigator.getUserMedia()")}} method is prefixed in many versions of some browsers; you should use code like the following to access these:

+ +
var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||
+                       window.webkitRTCPeerConnection || window.msRTCPeerConnection;
+var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
+                       window.webkitRTCSessionDescription || window.msRTCSessionDescription;
+
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
+                       navigator.webkitGetUserMedia || navigator.msGetUserMedia;
+
+ +

Simple code such as this is all it takes to ensure that your project will work on as many versions of as many browsers as possible.

+
+ +

Basic usage

+ +

Basic RTCPeerConnection usage involves negotiating a connection between your local machine and a remote one by generating Session Description Protocol to exchange between the two. The caller starts the process by sending an offer to the remote machine, which responds by either accepting or rejecting the call.

+ +

Both parties (the caller and the called party) need to set up their own RTCPeerConnection instances to represent their end of the peer-to-peer connection:

+ +
var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// Helper functions
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i < videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.close();
+}
+
+function error(err) {
+  endCall();
+}
+
+ +

Initializing the call

+ +

If you are the one initiating the call, you would use {{domxref("navigator.getUserMedia()")}} to get a video stream, then add the stream to the RTCPeerConnection. Once that's been done, call {{domxref("RTCPeerConnection.createOffer()")}} to create an offer, configure the offer, then send it to the server through which the connection is being mediated.

+ +
// Get a list of friends from a server
+// User selects a friend to start a peer connection with
+navigator.getUserMedia({video: true}, function(stream) {
+  // Adding a local stream won't trigger the onaddstream callback,
+  // so call it manually.
+  pc.onaddstream({stream: stream});
+  pc.addStream(stream);
+
+  pc.createOffer(function(offer) {
+    pc.setLocalDescription(new RTCSessionDescription(offer), function() {
+      // send the offer to a server to be forwarded to the friend you're calling.
+    }, error);
+  }, error);
+});
+
+ +

Answering a call

+ +

On the opposite end, the friend will receive the offer from the server using whatever protocol is being used to do so. Once the offer arrives, {{domxref("navigator.getUserMedia()")}} is once again used to create the stream, which is added to the RTCPeerConnection. An {{domxref("RTCSessionDescription")}} object is created and set up as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.

+ +

Then an answer is created using {{domxref("RTCPeerConnection.createAnswer()")}} and sent back to the server, which forwards it to the caller.

+ +
var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream({stream: stream});
+  pc.addStream(stream);
+
+  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+    pc.createAnswer(function(answer) {
+      pc.setLocalDescription(new RTCSessionDescription(answer), function() {
+        // send the answer to a server to be forwarded back to the caller (you)
+      }, error);
+    }, error);
+  }, error);
+});
+
+ +

Handling the answer

+ +

Back on the original machine, the response is received. Once that happens, call {{domxref("RTCPeerConnection.setRemoteDescription()")}} to set the response as the remote end of the connection.

+ +
// pc was set up earlier when we made the original offer
+var offer = getResponseFromFriend();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
+
+ +

Constructor

+ +
+
{{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}}
+
Constructor; returns a new RTCPeerConnection object.
+
+ +

Properties

+ +

This interface inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("RTCPeerConnection.iceConnectionState")}} {{ReadOnlyInline}}
+
Returns an enum of type RTCIceConnectionState that describes the ICE connection state for the connection. When this value changes, a {{event("iceconnectionstatechange")}} event is fired on the object.
+
{{domxref("RTCPeerConnection.iceGatheringState")}} {{ReadOnlyInline}}
+
Returns an enum of type RTCIceGatheringState that describes the ICE gathering state for the connection.
+
{{domxref("RTCPeerConnection.localDescription")}} {{ReadOnlyInline}}
+
Returns a {{domxref("RTCSessionDescription")}} describing the session for the local end of the connection. If it has not yet been set, it can be null.
+
{{domxref("RTCPeerConnection.peerIdentity")}} {{ReadOnlyInline}}
+
Returns a RTCIdentityAssertion, that is a couple of a domain name (idp) and a name (name) representing the identity of the remote peer of this connection, once set and verified. If no peer has yet been set and verified, this property will return null. Once set, via the appropriate method, it can't be changed.
+
{{domxref("RTCPeerConnection.remoteDescription")}} {{ReadOnlyInline}}
+
Returns a {{domxref("RTCSessionDescription")}} describing the session for the remote end of the connection. If it has not yet been set, it can be null.
+
{{domxref("RTCPeerConnection.signalingState")}} {{ReadOnlyInline}}
+
Returns an enum of type RTCSignalingState that describes the signaling state of the local connection. This state describes the SDP offer, that defines the configuration of the connections like the description of the locally associated objects of type {{domxref("MediaStream")}}, the codec/RTP/RTCP options, the candidates gathered by the ICE Agent. When this value changes, a {{event("signalingstatechange")}} event is fired on the object.
+
+ +

Event handlers

+ +
+
{{domxref("RTCPeerConnection.onaddstream")}}
+
Is the event handler called when the {{event("addstream")}} event is received. Such an event is sent when a {{domxref("MediaStream")}} is added to this connection by the remote peer. The event is sent immediately after the call {{domxref("RTCPeerConnection.setRemoteDescription()")}} and doesn't wait for the result of the SDP negotiation.
+
{{domxref("RTCPeerConnection.ondatachannel")}}
+
Is the event handler called when the {{event("datachannel")}} event is received. Such an event is sent when a {{domxref("RTCDataChannel")}} is added to this connection.
+
{{domxref("RTCPeerConnection.onicecandidate")}}
+
Is the event handler called when the {{event("icecandidate")}} event is received. Such an event is sent when a {{domxref("RTCICECandidate")}} object is added to the script.
+
{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
+
Is the event handler called when the {{event("iceconnectionstatechange")}} event is received. Such an event is sent when the value of {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} changes.
+
{{domxref("RTCPeerConnection.onidentityresult")}}
+
Is the event handler called when the {{event("identityresult")}} event is received. Such an event is sent when an identity assertion is generated, via {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}}, or during the creation of an offer or an answer.
+
{{domxref("RTCPeerConnection.onidpassertionerror")}}
+
Is the event handler called when the {{event("idpassertionerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while generating an identity assertion.
+
{{domxref("RTCPeerConnection.onidpvalidationerror")}}
+
Is the event handler alled when the {{event("idpvalidationerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while validating an identity assertion.
+
{{domxref("RTCPeerConnection.onnegotiationneeded")}}
+
Is the event handler called when the {{event("negotiationneeded")}} event, sent by the browser to inform that negotiation will be required at some point in the future, is received.
+
{{domxref("RTCPeerConnection.onpeeridentity")}}
+
Is the event handler called when the {{event("peeridentity")}} event, sent when a peer identity has been set and verified on this connection, is received.
+
{{domxref("RTCPeerConnection.onremovestream")}}
+
Is the event handler called when the {{event("removestream")}} event, sent when a {{domxref("MediaStream")}} is removed from this connection, is received.
+
{{domxref("RTCPeerConnection.onsignalingstatechange")}}
+
Is the event handler called when the {{event("signalingstatechange")}} event, sent when the value of {{domxref("RTCPeerConnection.signalingState", "signalingState")}} changes, is received.
+
+ +

Methods

+ +
+
{{domxref("RTCPeerConnection.addIceCandidate()")}}
+
 
+
{{domxref("RTCPeerConnection.addStream()")}}
+
Adds a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to be able to use it.
+
{{domxref("RTCPeerConnection.close()")}}
+
Abruptly closes a connection.
+
{{domxref("RTCPeerConnection.createAnswer()")}}
+
Creates an answer to the offer received by the remote peer, in a two-part offer/answer negotiation of a connection. The two first parameters are respectively success and error callbacks, the optional third one represent options for the answer to be created.
+
{{domxref("RTCPeerConnection.createDataChannel()")}}
+
Creates a new {{domxref("RTCDataChannel")}} associated with this connection. The method takes a dictionary as parameter, with the configuration required for the underlying data channel, like its reliability.
+
{{domxref("RTCPeerConnection.createDTMFSender()")}}
+
Creates a new {{domxref("RTCDTMFSender")}}, associated to a specific {{domxref("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.
+
{{domxref("RTCPeerConnection.createOffer()")}}
+
Creates a request to find a remote peer with a specific configuration. 
+
{{domxref("RTCPeerConnection.generateCertificate()")}}
+
Creates and stores an X.509 certificate and corresponding private key then returns an {{domxref("RTCCertificate")}}, providing access to it.
+
{{domxref("RTCPeerConnection.getConfiguration()")}}
+
 
+
{{domxref("RTCPeerConnection.getIdentityAssertion()")}}
+
Initiates the gathering of an identity assertion. This has an effect only if the {{domxref("RTCPeerConnection.signalingState", "signalingState")}} is not "closed". It is not expected for the application dealing with the RTCPeerConnection: this is automatically done; an explicit call only allows to anticipate the need.
+
{{domxref("RTCPeerConnection.getLocalStreams()")}}
+
Returns an array of {{domxref("MediaStream")}} associated with the local end of the connection. The array may be empty.
+
{{domxref("RTCPeerConnection.getRemoteStreams()")}}
+
Returns an array of {{domxref("MediaStream")}} associated with the remote end of the connection. The array may be empty.
+
{{domxref("RTCPeerConnection.getStats()")}}
+
Creates a new {{domxref("RTCStatsReport")}} that contains and allows access to statistics regarding the connection.
+
{{domxref("RTCPeerConnection.getStreamById()")}}
+
Returns the {{domxref("MediaStream")}} with the given id that is associated with local or remote end of the connection. If no stream matches, it returns null.
+
{{domxref("RTCPeerConnection.removeStream()")}}
+
Removes a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to stop using it.
+
{{domxref("RTCPeerConnection.setIdentityProvider()")}}
+
Sets the Identity Provider (IdP) to the triplet given in parameter: its name, the protocol used to communicate with it (optional) and an optional username. The IdP will be used only when an assertion will be needed.
+
{{domxref("RTCPeerConnection.setLocalDescription()")}}
+
Changes the local description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.
+
{{domxref("RTCPeerConnection.setRemoteDescription()")}}
+
Changes the remote description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.
+
{{domxref("RTCPeerConnection.updateIce()")}}
+
 
+
+ +

Constructor

+ +
new RTCPeerConnection({{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints);
+ +
+

Note: While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.

+
+ +

Methods

+ +

createOffer

+ +

void createOffer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints);

+ +

Create offer generates a blob of description data to facilitate a PeerConnection to the local machine. Use this when you've got a remote Peer connection and you want to set up the local one.

+ +

Example

+ +
var pc = new PeerConnection();
+pc.addStream(video);
+pc.createOffer(function(desc){
+  pc.setLocalDescription(desc, function() {
+    // send the offer to a server that can negotiate with a remote client
+  });
+}
+ +

Arguments

+ +
+
successCallback
+
An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object
+
errorCallback
+
An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object
+
[optional] constraints
+
An optional {{domxref("MediaConstraints")}} object.
+
+ +

createAnswer

+ +

void createAnswer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints)")

+ +

Respond to an offer sent from a remote connection.

+ +

Example

+ +
var pc = new PeerConnection();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+  pc.createAnswer(function(answer) {
+    pc.setLocalDescription(answer, function() {
+      // send the answer to the remote connection
+    })
+  })
+});
+ +

Arguments

+ +
+
successCallback
+
An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object
+
errorCallback
+
An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object
+
[optional] constraints
+
An optional {{domxref("MediaConstraints")}} object.
+
+ +

updateIce()

+ +

updateIce(optional {{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints)

+ +

The updateIce method updates the ICE Agent process of gathering local candidates and pinging remote candidates. If there is a mandatory constraint called "IceTransports" it will control how the ICE engine can act. This can be used to limit the use to TURN candidates by a callee to avoid leaking location information prior to the call being accepted. This call may result in a change to the state of the ICE Agent, and may result in a change to media state if it results in connectivity being established.

+ +

Example

+ +
 
+ +

addIceCandidate()

+ +

addIceCandidate ({{domxref("RTCIceCandidate")}} candidate, {{domxref("Function")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback);

+ +

The addIceCandidate() method provides a remote candidate to the ICE Agent. In addition to being added to the remote description, connectivity checks will be sent to the new candidates as long as the "IceTransports" constraint is not set to "none". This call will result in a change to the connection state of the ICE Agent, and may result in a change to media state if it results in different connectivity being established.

+ +

Example

+ +
  pc.addIceCandidate(new RTCIceCandidate(candidate));
+
+ +

createDataChannel

+ +

{{domxref("RTCDataChannel")}} createDataChannel ({{domxref("DOMString")}} label, optional {{domxref("RTCDataChannelInit")}} dataChannelDict);

+ +

Creates a data channel for sending non video or audio data across the peer connection

+ +

Example

+ +
var pc = new PeerConnection();
+var channel = pc.createDataChannel("Mydata");
+channel.onopen = function(event) {
+  channel.send('sending a message');
+}
+channel.onmessage = function(event) { console.log(event.data); }
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/rtcrtptransceiver/direction/index.html b/files/de/web/api/rtcrtptransceiver/direction/index.html new file mode 100644 index 0000000000..644e007d52 --- /dev/null +++ b/files/de/web/api/rtcrtptransceiver/direction/index.html @@ -0,0 +1,82 @@ +--- +title: RTCRtpTransceiver.direction +slug: Web/API/RTCRtpTransceiver/direction +tags: + - API + - Attribut + - RTCRtpTransceiver + - RTP + - Richtung + - Transceiver + - Transceiver Richtung + - WebRTC + - direction +translation_of: Web/API/RTCRtpTransceiver/direction +--- +
{{APIRef("WebRTC")}}
+ +

Das {{domxref("RTCRtpTransceiver")}} direction Attribut gibt als String die bevorzugte Transceiver-Richtung an. Es muss sich hierbei um einen Wert des {{domxref("RTCRtpTransceiverDirection")}} Enum handeln.

+ +

Die tatsächliche, aktuelle Richtung des Transceivers kann über das {{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} Attribut abgelesen werden.

+ +

Syntax

+ +
var direction = RTCRtpTransceiver.direction
+ +

Value

+ +

Ein {{domxref("DOMString")}}, dessen Wert einem Wert des RTCRtpTransceiverDirection Enum / Aufzählungstypen entspricht und die bevorzugte Transceiver-Richtung angibt. {{page("/en-US/docs/Web/API/RTCRtpTransceiverDirection", "Values")}}

+ +

Exceptions

+ +

Wird der direction Wert eines Transceivers gesetzt, können folgende Fehler auftreten:

+ +
+
InvalidStateError
+
Der Receiver des Transceivers {{domxref("RTCPeerConnection")}} wurde bereits geschlossen und befindet sich nun im closed Zustand oder der {{domxref("RTCRtpReceiver")}} wurde gestoppt und befinet sich im stopped Zustand.
+
+ +

Hinweise zur Nutzung

+ +

Ändern der Übertragungsrichtung

+ +

Wird der Wert des direction Attributes geändert, wird eine InvalidStateError Ausnahme geworfen, insofern die RTCPeerConnection bereits geschlossen wurde oder aber der jeweils betroffene Receiver oder Sender bereits gestoppt wurde.

+ +

Wenn der neu gesetzte Wert für direction sich vom aktuellen Wert unterscheidet, muss die Übertragung mit dem Peer neu verhandelt werden, es wird also ein {{event("negotiationneeded")}} Event auf der {{domxref("RTCPeerConnection")}} ausgelöst.

+ +

Transceiver-Richtung in SDP

+ +

Der direction Wert wird von {{domxref("RTCPeerConnection.createOffer()")}} bzw. {{domxref("RTCPeerConnection.createAnswer()")}} genutzt, um die entsprechenden SDP-Nachrichten zu generieren. SDP stellt die Richtung über eine Attribut-Zeile (a-line) dar. Wenn die Richtung des Transceivers als "sendrecv" definiert wurde, so enthält die hierzu erzeugte SDP-Nachricht folgende Attribut-Zeile:

+ +
a=sendrecv
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebRTC 1.0", "#dom-rtcrtptransceiver-direction", "RTCRtpTransceiver.direction")}}{{Spec2("WebRTC 1.0")}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.RTCRtpTransceiver.direction")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/rtcrtptransceiver/index.html b/files/de/web/api/rtcrtptransceiver/index.html new file mode 100644 index 0000000000..0bf844cf0f --- /dev/null +++ b/files/de/web/api/rtcrtptransceiver/index.html @@ -0,0 +1,85 @@ +--- +title: RTCRtpTransceiver +slug: Web/API/RTCRtpTransceiver +tags: + - API + - Interface + - Media + - MediaStreamTrack + - NeedsTranslation + - RTCRtpTransceiver + - RTP + - Reference + - SDP + - TopicStub + - Transceiver + - WebRTC +translation_of: Web/API/RTCRtpTransceiver +--- +
{{APIRef("WebRTC")}}
+ +

The WebRTC interface RTCRtpTransceiver describes a permanent pairing of an {{domxref("RTCRtpSender")}} and an {{domxref("RTCRtpReceiver")}}, along with some shared state.

+ +

Each {{Glossary("SDP")}} media section describes one bidirectional SRTP ("Secure Real Time Protocol") stream (excepting the media section for {{domxref("RTCDataChannel")}}, if present). This pairing of send and receive SRTP streams is significant for some applications, so RTCRtpTransceiver is used to represent this pairing, along with other important state from the media section. Each non-disabled SRTP media section is always represented by exactly one transceiver.

+ +

A transceiver is uniquely identified using its {{domxref("RTCRtpTransceiver.mid", "mid")}} property, which is the same as the media ID (mid) of its corresponding m-line. An RTCRtpTransceiver is associated with an m-line if its mid is non-null; otherwise it's considered disassociated.

+ +

Properties

+ +
+
{{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} {{ReadOnlyInline}}
+
A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which indicates the transceiver's current directionality, or null if the transceiver is stopped or has never participated in an exchange of offers and answers.
+
{{domxref("RTCRtpTransceiver.direction", "direction")}}
+
A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which is used to set the transceiver's desired direction.
+
{{domxref("RTCRtpTransceiver.mid", "mid")}} {{ReadOnlyInline}}
+
The media ID of the m-line associated with this transceiver. This association is established, when possible, whenever either a local or remote description is applied. This field is null if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer.
+
{{domxref("RTCRtpTransceiver.receiver", "receiver")}} {{ReadOnlyInline}}
+
The {{domxref("RTCRtpReceiver")}} object that handles receiving and decoding incoming media.
+
{{domxref("RTCRtpTransceiver.sender", "sender")}} {{ReadOnlyInline}}
+
The {{domxref("RTCRtpSender")}} object responsible for encoding and sending data to the remote peer.
+
{{domxref("RTCRtpTransceiver.stopped", "stopped")}}
+
Indicates whether or not sending and receiving using the paired RTCRtpSender and RTCRtpReceiver has been permanently disabled, either due to SDP offer/answer, or due to a call to {{domxref("RTCRtpTransceiver.stop", "stop()")}}.
+
+ +

Methods

+ +
+
{{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}}
+
A list of {{domxref("RTCRtpCodecParameters")}} objects which override the default preferences used by the {{Glossary("user agent")}} for the transceiver's codecs.
+
{{domxref("RTCRtpTransceiver.stop", "stop()")}}
+
Permanently stops the RTCRtpTransceiver. The associated sender stops sending data, and the associated receiver likewise stops receiving and decoding incoming data.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebRTC 1.0", "#rtcrtptransceiver-interface", "RTCRtpTransceiver")}}{{Spec2("WebRTC 1.0")}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.RTCRtpTransceiver")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/service_worker_api/index.html b/files/de/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..54e3e1d86e --- /dev/null +++ b/files/de/web/api/service_worker_api/index.html @@ -0,0 +1,280 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Offline + - Referenz + - Service-Worker + - Worker +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +

Service-Worker verhalten sich im Wesentlichen wie Proxy-Server, welche zwischen der Webanwendung bzw. dem Browser und dem Netzwerk (sofern dieses verfügbar ist) sitzen. Sie sollen u. a. das Erstellen wirksamer Offline-Erfahrungen ermöglichen und können Netzwerkanfragen abfangen und passende Maßnahmen abhängig davon ergreifen, ob das Netzwerk verfügbar ist und ob der Server veränderte Ressourcen enthält. Sie erlauben außerdem den Zugriff auf Push-Benachrichtigungen und Background Sync APIs.

+
+ +

Konzepte von Service-Workern und deren Nutzung

+ +

Ein Service-Worker ist ein ereignisgesteuerter Worker, der an einem Ursprung und einem Pfad registriert ist. Sie ist eine JavaScript-Datei, die in Abhängigkeit zu einer Webseite steht, Anfragen von Ressourcen abfängt und cached. In manchen Situationen kann es das Verhalten der Webseite beeinflussen. Ein häufiger Anwendungsfall ist die Abfrage, ob ein Netzwerk verfügbar ist, oder nicht.

+ +

Ein Service-Worker läuft in einem Worker-Kontext. Es hat keinerlei Zugriff auf das DOM und läuft in einem separaten Thread, also isoliert vom JavaScript, dass die Hauptinteraktionslogik der Website steuert. Es läuft vollständig asynchron und verhindert die Ausführung anderer Scripte nicht. Daraus resultiert, dass APIs wie XHR  oder LocalStorage nicht in Service-Workern benutzt werden können.

+ +

Service-Worker laufen aus Sicherheitsgründen nur über das HTTPS-Protokoll. Veränderte Netzwerkanfragen könnten "Man in the middle"-Angriffe deutlich leichter machen.

+ +
+

Hinweis: Service-Worker haben in Bereichen wie AppCache gezeigt, dass sie dort besonders gut genutzt werden können, da sie keine Vermutungen darüber treffen, was Sie machen wollen und brechen ihre Aktionen entsprechend ab. Sie haben deshalb die Kontrolle über alles.

+
+ +
+

Hinweis: Service-Worker basieren auf Promises. Generell sind sie abhängig von Anfragen und sie werden mit einer erfolgreichen oder einer fehlerhaften Aktion antworten. Die Architektur ist deshalb ideal dafür.

+
+ +

Registrierung

+ +

Ein Service-Worker wird über die {{domxref("ServiceWorkerContainer.register()")}}-Methode registriert. Falls sie erfolgreich war, wird Ihr Service-Worker vom Client heruntergeladen und versucht eine Installation/Aktivierung (siehe unten)  für URLs, die innerhalb der Quelle liegen oder die URLs, die Sie vorgeben.

+ +

Download, Installation und Aktivierung

+ +

Ihr Service-Worker muss folgenden Lebenszyklus durchlaufen:

+ +
    +
  1. Download
    2. +
  2. Installation
    3. +
  3. Aktivierung
    4. +
+ +

Der Service-Worker wird sofort mit heruntergeladen, sobald der Nutzer erstmals eine von Service-Workern kontrollierte Seite aufruft.

+ +

Danach wird es alle 24 Stunden neu heruntergeladen. Es kann auch in kürzeren Abständen heruntergeladen werden, aber die 24 Stunden können nicht überschritten werden. Damit sollen die Ladezeiten kürzer werden.

+ +

Eine Installation wird versucht, wenn die heruntergeladene Datei neu ist, also Unterschiede byteweise verglichen mit dem bestehenden Service-Worker aufweist oder es der erste Service-Worker ist, der für diese Seite heruntergeladen wurde.

+ +

Wenn ein Service-Worker erstmals verfügbar ist, wird eine Installation versucht. Nach einer erfolgreichen Installation ist es aktiviert.

+ +

Wenn bereits ein bestehender Service-Worker installiert wurde, wird die neue Version im Hintergrund installiert, aber noch nicht aktiviert. Zu diesen Zeitpunkt wartet der Worker, bis alle Seiten heruntergeladen wurden, die noch den alten Service-Worker nutzen. Sobald alle Seiten geladen worden sind, wird der neue Service-Worker aktiviert.

+ +

Sie können ein Ereignishandler für das {{domxref("InstallEvent")}} erstellen. Standardmäßig wird der Worker für den Einsatz vorbereitet, wenn das Event feuert. Zum Beispiel beim erstellen eines Caches, bei der die Built-In Storage API verwendet wird und Assets hineingeladen werden, damit die App offline verwendet werden kann.

+ +

Außerdem existiert ein activate-Event. Wenn es feuert, ist es ein guter Zeitpunkt die alten Caches und andere Daten zu bereinigen, die mit der vorherigen Version ihres Workers zusammenhängen.

+ +

Ihr Service-Worker kann mit dem {{domxref("FetchEvent")}} auf Anfragen antworten. Sie können die Antworten auf die Anfragen verändern, wie Sie wollen. Nutzen Sie dazu die {{domxref("FetchEvent.respondWith") }}-Methode.

+ +
+

Hinweis: Weil oninstall/onactivate eine Weile benötigen, um ihre Aktionen abzuschließen, ist es empfehlenswert, eine waitUntil-Methode bereitzustellen, die, wenn oninstall oder onactivate gefeuert werden, ein Promise geliefert wird. Events, die der Funktion dienen, werden dem Service-Worker nicht enthalten und der Promise wird erfolgreich ausgeführt.

+
+ +

Für eine komplette Anleitung, die zeigt, wie Sie Ihr erstes Beispiel erstellen, siehe Using Service Workers.

+ +

Weitere Anwendungsbereiche

+ +

Service-Worker werden auch benutzt für:

+ + + +

In Zukunft werden Service-Worker zu weiteren nützlichen Dingen fähig sein, die sie näher an eine native App bringen. Andere Spezifikationen können und werden den Service-Worker-Kontext benutzen. Zum Beispiel:

+ + + +

Schnittstellen

+ +
+
{{domxref("Cache") }}
+
Repräsentiert einen Speicher für {{domxref("Request")}} / {{domxref("Response")}}-Objeltpaare, die als ein Teil des {{domxref("ServiceWorker")}}-Lifecycles agieren.
+
{{domxref("CacheStorage") }}
+
Repräsentiert einen Speicher für {{domxref("Cache")}}-Objekte. Es ist das Hauptverzeichnis für {{domxref("ServiceWorker")}}. Es beinhaltet alle benannten Caches basierend auf Strings, auf die der Worker zugreifen kann.
+
{{domxref("Client") }}
+
Repräsentiert den Gültigkeitsbereich von einem Service-Worker-Client. Ein Service-Worker-Client ist entweder ein Dokument in einem Browser-Kontext oder ein {{domxref("SharedWorker")}}, welches von einem aktiven Worker gesteuert wird.
+
{{domxref("Clients") }}
+
Repräsentiert einen Container von {{domxref("Client")}}-Objekten; die hauptsächtliche Methode, um die aktiven Service-Worker-Clients anzusteuern.
+
{{domxref("ExtendableEvent") }}
+
Erweitert die Lebensdauer der install und activate-Events, die vom {{domxref("ServiceWorkerGlobalScope")}} entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. das {{domxref("FetchEvent")}} nicht vom {{domxref("ServiceWorker")}}, solange sie veraltete Cache-Einträge löschen usw.
+
{{domxref("ExtendableMessageEvent") }}
+
Das Event-Objekt von einem {{event("message_(ServiceWorker)","message")}}-Event, welches von einem Service-Worker gefeuert wird.
+
{{domxref("FetchEvent") }}
+
Die Parameter, die dem {{domxref("ServiceWorkerGlobalScope.onfetch")}}-Handler übergeben werden. FetchEvent repräsentiert eine Fetch-Aktion, die vom {{domxref("ServiceWorkerGlobalScope")}} eines {{domxref("ServiceWorker")}} entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt die {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}-Methode bereit. Es ermöglicht eine willkürliche Antwort, die zurück  zur kontrollierten Seite gesendet wird.
+
{{domxref("InstallEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the InstallEvent interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. 
+
{{domxref("Navigator.serviceWorker") }}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
{{domxref("NotificationEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the NotificationEvent interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorker") }}
+
Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.
+
{{domxref("ServiceWorkerContainer") }}
+
Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Represents the global execution context of a service worker.
+
{{domxref("ServiceWorkerMessageEvent")}}
+
Contains information about an event sent to a {{domxref("ServiceWorkerContainer")}} target. 
+
{{domxref("ServiceWorkerRegistration") }}
+
Represents a service worker registration.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Provides an interface for registering and listing sync registrations.
+
{{domxref("WindowClient") }}
+
Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser-Kompatibilität

+ +
{{ CompatibilityTable() }}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{ CompatNo() }}24{{ CompatNo() }}
install/activate events{{ CompatChrome(40.0) }}{{ CompatGeckoDesktop("44.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache +

{{CompatChrome(42.0)}}

+ 		{{ CompatGeckoDesktop("39.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
 install/activate events{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("39.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+

Note: For backwards compatibility, you could choose to use service workers and AppCache on the same web app to do equivalent things (if the AppCache will support doing those things, of course.) What happens in such a case is that browsers that don’t support Service Workers will use AppCache, and those that do will ignore the AppCache and let the service worker take over.

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/service_worker_api/using_service_workers/index.html b/files/de/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..f45d69025f --- /dev/null +++ b/files/de/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,507 @@ +--- +title: Service-Worker benutzen +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Anleitung + - Grundlagen +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +
+

Dieser Artikel informiert über die ersten Schritte mit Service-Workern, inklusive der Basisarchitektur, der Registrierung eines Service-Workers, der Installation und des Aktivierungsprozesses für einen neuen Service-Worker, Aktualisierung eines Service-Workers, Cache-Kontrolle und benutzerdefinierte Antworten, alles im Kontext von einer simplen App mit Offline-Funktionalität. 

+
+ +

Die Voraussetzung von Service-Workern

+ +

Ein großes Problem, unter dem Web-User seit Jahren leiden, ist der Verlust der Internetverbindung. Selbst die beste Webanwendung liefert eine furchtbare Benutzererfahrung, wenn sie nicht heruntergeladen werden kann. Es gab verschiedene Versuche, Technologien zu erstellen, die dieses Problem lösen (wie unsere Offline-Seite zeigt) und einige Themen konnten so angegangen werden. Das größte Problem aber ist, dass es immer noch keinen guten allgemeinen Kontroll-Mechanismus für Asset-Caching und eigene Netzwerkanfragen gibt. 
+
+ Der vorausgegangene Versuch — AppCache — schien eine gute Idee, da er der Entwicklerin erlaubte, Assets zu spezifizieren, die leicht zu cachen sein sollten. Die Technologie traf jedoch Annahmen darüber, was die Entwicklerin zu tun gedachte und schlug an mehreren Stellen fehl, wenn die Webanwendung diesen Annahmen nicht eins zu eins folgte. Mehr Details dazu finden sich in Jake Archibalds "Application Cache is a Douchebag".

+ +
+

Beachte:  Wird AppCache verwendet, um Offline-Support für eine Seite zur Verfügung zu stellen, wird seit Firefox 44 eine Warnmeldung auf der Console angezeigt, die Entwicklern statt dessen die Verwendung von Service-Workern empfiehlt ({{bug("1204581")}}).

+
+ +

Service-Worker sollen diese Probleme schließlich beheben. Ihre Syntax ist komplexer als die des AppCaches, der Vorteil ist aber, dass nun JavaScript benutzt werden kann, um die vom AppCache getroffenen Annahmen feinschrittig zu kontrollieren, was das zuvor beschriebene Problem und viele weitere löst. Mit Hilfe eines Service-Workers, kann die Webanwendung leicht aufgesetzt werden, um vorrangig gecachte Assets zu benutzen und so auch im Offline-Fall eine bestimmte Benutzererfahrung zu ermöglichen, bevor weitere Daten aus dem Netzwerk geladen werden (auch bekannt als Offline First-Ansatz). Native Apps stellen dieses Feature bereits bereit, was der Grund dafür ist, dass native Apps oft Webanwendungen vorgezogen werden.

+ +

Einrichtung zur Verwendung von Service-Workern

+ +

Viele der Eigenschaften von Service-Workern sind inzwischen in neueren Versionen unterstützender Browser standardmäßig eingestellt. Sollte der Beispielcode in einem der installierten Browser jedoch nicht funktionieren, kann die explizite Aktivierung einer Einstellung vonnöten sein:

+ + + +

Stellen Sie weiterhin sicher, dass Ihr Code über HTTPS gesendet wird — Service-Worker sind aus Sicherheitsgründen auf HTTPS beschränkt. Da GitHub (resp. GitHub Pages) HTTPS unterstüzt, ist es ein guter Ort, um Experimente zu hosten.

+ +

Grundarchitektur

+ +

+ +

Ein einfache Implementierung von Service-Workern folgt für gewöhnlich den folgenden Schritten:

+ +
    +
  1. Die URL des Service-Workers wird aufgerufen und via {{domxref("serviceWorkerContainer.register()")}} registriert.
    2. +
  2. War dies erfolgreich, wird der Service-Worker in einem {{domxref("ServiceWorkerGlobalScope")}} ausgeführt; Im Prinzip ist dies eine besondere Art von Worker-Kontext, welcher außerhalb des Threads des Hauptscriptes läuft und keinen Zugriff auf das DOM hat.
    3. +
  3. Der Service-Worker kann nun Events verarbeiten.
    4. +
  4. Die Installation des Workers wird versucht, wenn Seiten, die durch Service-Worker verwaltet werden, wiederholt besucht werden. Ein Install-Event ist immer das erste, welches an einen Service-Worker gesendet wird (Dies kann beispielsweise benutzt werden, um den Prozess zu starten, der die IndexDB befüllt und Seiten-Assets cacht). Das ist der gleiche Ablauf, der bei der Installation einer nativen oder FirefoxOS App stattfindet - alles für die Offline-Nutzung vorbereiten.
    5. +
  5. Sobald der oninstall-Handler abgeschlossen ist, wird der Service-Worker als installiert betrachtet.
    6. +
  6. Der nächste Schritt ist Aktivierung. Sobald der Service-Worker installiert wurde, erhält dieser ein activate-Event. Der Hauptnutzen von onactivate ist das Aufräumen von Ressourcen, die in vorherigen Versionen des Service-Worker-Scripts genutzt wurden.
    7. +
  7. Der Service-Worker kann nun Webseiten verwalten, aber nur wenn diese nach dem erfolgreichen Abschluss von register() aufgerufen wurden. So wird ein Dokument, welches ohne Service-Worker gestartet wurde bis zu einem Neuladen nicht von einem Service-Worker verwaltet werden.
    8. +
+ +

Promises

+ +

Promises sind ein sehr guter Mechanismus um asynchrone Operationen, deren Erfolg voneinander abhängt, auszuführen. Diese Technologie ist zentral für die Arbeitsweise von Service-Workern.
+
+ Promises ermöglichen viele verschiedene Dinge, für unseren Zweck reicht es allerdings aus zu wissen, dass, wenn eine Funktion eine Promise zurück gibt, ein .then() an das Ende des Aufrufs gehangen werden und mit Callbacks für Erfolg, Misserfolg, etc. versehen werden kann. Des Weiteren kann .catch() am Ende benutzt werden, um einen besonderen Callback für den Misserfolg hinzuzufügen.

+ +

Vergleichen wir nun die traditionelle synchrone Callback-Struktur mit ihrem asynchronen Promise-Äquivalent.

+ +

sync

+ +
try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});
+ +

Im ersten Beispiel müssen wir warten, bis die myFunction() ausgeführt wird und value zurückgegeben wird bevor weiterer Code ausgeführt werden kann. Im zweiten Beispiel gibt myFunction() eine Promise für value zurück, danach kann weiterer Code ausgeführt werden. Wenn die Promise aufgelöst wird, wird der Code in then asynchron ausgeführt.
+
+ Nun zu einem echten Beispiel: Was, wenn wir Bilder dynamisch laden, aber sicher stellen wollen, dass sie erst angezeigt werden, wenn sie vollständig geladen sind? Dies ist etwas, was häufig gemacht werden soll, aber sehr kompliziert werden kann. .onload kann benutzt werden, um ein Bild erst anzuzeigen, wenn es geladen wurde. Was aber geschieht mit Events, die stattfinden, bevor wir auf diese hören können? Man könnte versuchen, dieses Problem mit Hilfe von .complete zu umgehen, was jedoch nicht betriebssicher ist und den Umgang mit mehreren Bildern gleichzeitig nicht abdeckt. Auch ist dieser Ansatz weiterhin synchron und blockiert somit den Haupt-Thread.
+
+ Wir können jedoch stattdessen eine eigene Promise bauen, die diesen Fall abdeckt. (Siehe unser Promises-Test-Beispiel für den entsprechenden Quellcode, oder hier für eine Liveanwendung.)

+ +

{{note("Eine echte Service-Worker-Implementierung würde Caching und das onfetch-Event statt der überholten XMLHttpRequest API benutzen. Diese Features wurden hier nicht benutzt, um den Fokus auf Promises setzen zu können.")}}

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Bild wurde nicht geladen; Fehlercode:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('Ein Netzwerkfehler ist aufgetreten.'));
+    };
+
+    request.send();
+  });
+}
+ +

Wir geben eine neue Promise mit Hilfe des Promise()-Konstruktors zurück, der als Parameter eine Callback-Funktion mit resolve- und reject- Parametern erhält. Innerhalb dieser Funktion müssen wir definieren, was passieren muss, dass die Promise erfolgreich aufgelöst oder zurückgewiesen wird — In diesem Fall also entweder einen 200 OK Status zurückgegeben bekommen oder nicht — und dann bei Erfolg resolve und bei Misserfolg reject aufzurufen. Der restliche Inhalt dieser Funktion sind Schritte zum Umgang mit XHR, über die wir uns im Moment keine Gedanken machen müssen.

+ +

Wenn wir beim Aufruf der imgLoad()-Funktion angelangt sind, rufen wir diese mit der URL zu dem Bild, welches wir laden möchten, wie erwartet auf, der restliche Code ist jedoch ein bisschen anders:

+ +
var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});
+ +

Die then()-Methode wird an das Ende des Funktionsaufrufes gehangen, und enthält zwei Funktionen – die erste wird ausgeführt, wenn die Promise aufgelöst wird, die zweite, wenn sie zurückgewiesen wird. Im Auflösungsfall zeigen wir das Bild innerhalb von myImage an und fügen es an den body an (Das Argument der then()-Funktion ist die request.response innerhalb der resolve-Methode des Promises); im Zurückweisungsfall geben wir einen Fehler in der Konsole aus.

+ +

Dies alles geschieht asynchron.

+ +
+

Beachte: Promises können aneinandergekettet werden, zum Beispiel:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

Beachte: Weitere Informationen zu Promises finden sich in Jake Archibalds Artikel JavaScript Promises: there and back again.

+
+ +

Service-Worker Demo

+ +

Um die Grundlagen der Registrierung und Installation eines Service-Workers zu demonstrieren, haben wir eine kleine Demo namens sw-test geschaffen, die eine überschaubare Star-Wars-Lego-Bildergalerie ist. Sie nutzt eine Promise-unterstützte Funktion um Bilddaten von einem JSON-Objekt zu lesen und diese Bilder mit Hilfe von Ajax zu laden, bevor sie untereinander auf der Webseite angezeigt werden. Die Anwendung ist statisch und einfach gehalten. Sie registriert, installiert und aktiviert des Weiteren einen Service-Worker und cacht die erforderlichen Dateien für die Offline-Nutzung, sollten weitere Aspekte dieser Spezifikation bei den aufrufenden Browsern aktiviert sein.

+ +


+
+
+ Der Quellcode ist auf GithHub zu finden, eine Live-Version kann hier betrachtet werden. Der Aspekt, den wir hier betrachten wollen, ist die Promise (siehe app.js Zeilen 17-42), die eine modifizierte Version dessen ist, was in der Promises Test Demo zu lesen war. Die Unterschiede sind die folgenden:

+ +
    +
  1. Im Original haben wir nur eine URL zu einem Bild, welches wir laden wollen, hineingereicht. In dieser Version reichen wir ein JSON-Fragment hinein, welches alle Daten für ein einzelnes Bild beinhaltet (in image-list.js kann ein Blick darauf geworfen werden). Das geschieht, weil wegen der Asynchronität die gesamten Daten für jedes Auflösen der Promise in in diese hineingereicht werden müssen. Würde nur die URL hineingereicht werden und versucht werden, während der for()-Schleife, auf andere Dinge im JSON zuzugreifen, schlüge dies fehl, da die Promise nicht zeitgleich mit dem Abschluss der Iteration auflösen würde, da dies ein synchroner Prozess ist.
    2. +
  2. Wir lösen die Promise des Weiteren mit einem Array auf, da wir den geladenen Bild-Blob, aber auch Bildname, Bildnachweis und Alt-Text später der auflösenden Funktion zur Verfügung stellen wollen. (siehe app.js Zeilen 26-29). Promises lösen mit einem einzigen Argument auf, werden also mehrere Werte gebraucht, muss dies über ein Array bzw. Objekt gelöst werden.
    3. +
  3. Um auf die Werte der aufgelösten Promise zuzugreifen, greifen wir auf eben jene Funktion zu. (siehe app.js Zeilen 55-59.) Dies mag auf den ersten Blick seltsam erscheinen, ist aber die korrekte Handhabung von Promises.
    4. +
+ +

Service-Worker auf die Bühne, bitte!

+ +

Auf geht's zu Service-Workern!

+ +

Service-Worker registrieren

+ +

Der erste Code-Block in der JavaScript-Datei unserer App — app.js — sieht wie folgt aus. Dies ist unser Startpunkt für die Nutzung von Service-Workern.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // Registrierung erfolgreich
+    console.log('Registrierung erfolgreich. Scope ist ' + reg.scope);
+  }).catch(function(error) {
+    // Registrierung fehlgeschlagen
+    console.log('Registrierung fehlgeschlagen mit ' + error);
+  });
+};
+ +
    +
  1. Der äußere Block kümmert sich um die Feature-Erkennung um sicher zu stellen, dass Service-Worker unterstützt werden, bevor einer registriert wird.
    2. +
  2. Als nächstes nutzen wir die {{domxref("ServiceWorkerContainer.register()") }}-Funktion, um den Service Worker für diese Seite zu registrieren. Dieser ist nur eine JavaScript-Datei innerhalb unserer App. (Beachte, dass die URL der Datei relativ zum Ursprung ist, und nicht zur JavaScript-Datei, die sie referenziert.)
    3. +
  3. Der scope Parameter ist optional, und kann benutzt werden, um den Teil der. Applikation einzuschränken, den der Service-Worker kontrollieren soll. In diesem Fall, haben wir '/sw-test/' spezifiziert, was alle Inhalte unter dem App-Ursprungsverzeichnis beinhaltet. Wird der Parameter weggelassen, würde standardmäßig dieses Verzeichnis gewählt werden. Wir haben es hier zu Anschauungszwecken jedoch spezifiziert..
    4. +
  4. Die .then() Promise-Funktion wird genutzt, um den Erfolgsfall an unsere Promise-Struktur zu hängen. Wenn die Promise erfolgreich auflöst, wird der Programmcode innerhalb dieser Funktion ausgeführt.
    5. +
  5. Zuletzt fügen wir die.catch()-Funktion ans Ende an, die ausgeführt wird, sollte die Promise zurückgewiesen werden.
    6. +
+ +

Jetzt ist ein Service-Worker registriert, der in einem Worker-Kontext läuft und daher keinen Zugriff auf das DOM hat. Code im Service-Worker wird außerhalb der normalen Seiten ausgeführt, um deren Laden zu kontrollieren.
+
+ Ein einzelner Service-Worker kann viele Seiten kontrollieren. Wird eine Seite innerhalb des spezifizierten Codes geladen, wird der Service-Worker für diese eingerichtet und nimmt seine Arbeit auf. Es sollte daher nicht vergessen werden, dass vorsichtig mit globalen Variablen im Service-Worker-Script umgegangen werden muss: Jede Seite im Scope hat den selben Worker, mit dem sie arbeitet.

+ +
+

Beachte: Service-Worker funktionieren wie Proxy-Server, was es unter anderem erlaubt, Netzwerkanfragen und -antworten zu modifizieren und mit Objekten aus dem Cache zu ersetzen.

+
+ +
+

Beachte: Eine gute Sache an Service-Workern ist, dass, wenn Feature-Erkennung wie im obigen Beispiel verwendet wird, Browser, die Service-Worker nicht unterstützen, die App dennoch normal und wie erwartet benutzen können. Wenn weiterhin AppCache und Service-Worker gemeinsam auf einer Seite benutzt werden, werden Browser, die AppCache aber nicht Service-Worker unterstützen, ersteres benutzen. Browser die beides unterstützen, werden AppCache zu Gunsten von Service-Workern ignorieren.

+
+ +

Wieso schlägt die Registrierung meines Service Workers fehl?

+ +

Dies kann aus folgenden Gründen passieren:

+ +
    +
  1. Die Applikation läuft nicht unter HTTPS
    2. +
  2. Der Pfad zur Service-Worker-Datei ist nicht korrekt beschrieben — er muss relativ zum Ursprung geschrieben sein, nicht relativ zum Wurzelverzeichnis der App. In unserem Beispiel liegt der Worker unter https://mdn.github.io/sw-test/sw.js, wohingegen das Wurzelverzeichnis der App https://mdn.github.io/sw-test/ ist. Der Pfad muss also als /sw-test/sw.js, geschrieben werden, und nicht als /sw.js.
    3. +
  3. Der Service-Worker, auf den verwiesen wird, hat einen anderen Ursprung als die App. Auch das ist nicht gestattet.
    4. +
+ +

Weiterhin zu beachten:

+ + + +

Installation und Aktivierung: Füllen des Caches

+ +

Nachdem der Service-Worker registriert wurde, versucht der Browser den Service-Worker für die entsprechende Seite zu installieren und zu aktivieren.
+
+ Das Install-Event wird abgesetzt wenn eine Installation erfolgreich abgeschlossen wurde. Dieses Event wird für gewöhnlich dazu genutzt, den Offline-Cache des Browsers mit den Assets zu befüllen, die benötigt werden, damit die App offline laufen kann. Um das zu erreichen, nutzen wir die Storage-API der Service-Worker — {{domxref("cache")}} — ein globales Objekt des Service-Workers, welches uns erlaubt Assets, die durch Netzwerkantworten geliefert wurden, zu speichern. Diese API arbeitet ähnlich wie der Browser interne Cache, ist allerdings Domain spezifisch und besteht, bis Gegenteiliges gesagt wird, was erneut volle Kontrolle erlaubt.

+ +
+

Beachte: Die Cache API ist nicht in jedem Browser unterstützt. (Siehe auch den Abschnitt {{anch("Browserkompabilität")}} für weitere Informationen.) Soll sie jetzt genutzt werden, kann ein Polyfill in Betracht gezogen werden, wie er beispielsweise in Googles Topeka Demo enthalten ist, oder die Assets in IndexedDB gespeichert werden.

+
+ +

Wir beginnen diesen Abschnitt mit einem Blick auf ein Code-Beispiel — Das ist der erste Block in unserem Service-Worker:

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Hier wird dem Service-Worker (mit Hilfe von this) ein installEvent-Listener hinzugefügt, und die {{domxref("ExtendableEvent.waitUntil()") }}-Methode dem Event angehängt — das stellt sicher, dass der Service-Worker nicht installiert wird, bis der Code innerhalb von waitUntil() erfolgreich ausgeführt wurde.
    2. +
  2. Innerhalb von waitUntil() benutzen wir die caches.open()-Methode um einen neuen Cache mit dem Namen v1 zu erstellen, welcher die erste Version des Ressourcenspeichers unserer Seite sein wird. Das gibt eine Promise für den erstellten Cache zurück; sobald diese aufgelöst ist, rufen wir eine Funktion auf, die wiederum addAll() auf dem erstellten Cache aufruft und als Parameter einen Array mit zum Ursprung relativen URLs der zu cachenden Ressourcen enthält.
    3. +
  3. Sollte die Promise zurückgewiesen werden, schlägt die Installation fehl und der Worker tut nichts. Das ist in Ordnung und bietet die Möglichkeit, den Code zu korrigieren und es bei der nächsten Registrierung erneut zu versuchen.
    4. +
  4. Nach erfolgreicher Installation wird der Service-Worker aktiviert. Wurde der Service-Worker zum ersten mal installiert und aktiviert ist dies nicht weiter von Bedeutung, aber wichtig, wenn der Service-Worker aktiviert wird. (Siehe den Abschnitt {{anch("Aktualisieren des Service-Workers") }} im späteren Verlauf.)
    5. +
+ +
+

Beachte: localStorage funktioniert ähnlich wie der Service-Worker-Cache, ist aber synchron und daher in Service-Workern nicht gestattet.

+
+ +
+

Beachte: IndexedDB kann, wenn nötig, innerhalb eines Service-Workers benutzt werden.

+
+ +

Eigene Antworten auf Netzwerkanfragen

+ +

Da jetzt die Assets der Seite gecacht wurden, kann nun den Service-Workern mitgeteilt werden, was sie mit dem gecachten Inhalt tun sollen. Dies geschieht mit Hilfe des fetch-Events.

+ +

Ein fetch-Event wird jedes Mal abgesetzt, wenn eine Ressource, die vom Service-Worker kontrolliert wird (also die Dokumente innerhalb seines Scopes sowie die dort referenzierten Ressourcen), geladen wird.  (Wenn also index.html eine Cross-Origin-Anfrage an ein eingebettetes Bild absetzt, geht auch das durch den Service-Worker.)

+ +

Ein fetch Event-Listener kann dem Service-Worker hinzugefügt, und die respondWith()-Methode des Events aufgerufen werden, um die HTTP-Antworten abzufangen und mit unseren eigenen zu ersetzen.

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // Hier eigene Antworten
+  );
+});
+ +

Es kann damit begonnen werden, jedes Mal mit der Ressource zu antworten, deren URL der der Netzwerkanfrage entspricht:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});
+ +

caches.match(event.request) erlaubt uns, jede Ressource, die vom Netzwerk angefragt wird, mit der entsprechenden Ressource des Caches zu ersetzen, so diese verfügbar ist. Der Abgleich geschieht wie bei normalen HTTP-Anfragen über URLs und Header.

+ +

Betrachten wir einige weitere Optionen, die wir haben, wenn wir unsere eigenen Antworten definieren wollen (siehe auch die Fetch-API Dokumentation für weitere Informationen über {{domxref("Request")}}- und {{domxref("Response")}}-Objekte.)

+ +
    +
  1. +

    Der {{domxref("Response.Response","Response()")}}-Konstruktor  erlaubt uns das Erstellen einer benutzerdefinierten Antwort. In diesem Fall geben wir eine einfache Zeichenkette zurück:

    + + 
    new Response('Hallo vom freundlichen Service-Worker!');
    +
    2. +
  2. +

    Das folgende komplexere Response-Beispiel zeigt, dass optional eine Anzahl an Headern in der Antwort gesetzt werden können, die die Standard HTTP-Responce-Header emulieren. Hier wird dem Browser nut der Content-Type unserer künstlichen Antwort mitgeteilt:

    + + 
    new Response('<p>Hallo from freundlichen Service-Worker!</p>', {
+  headers: { 'Content-Type': 'text/html' }
+})
    +
    3. +
  3. +

    Wenn im Cache kein Treffer gefunden wurde, könnte der Browser angewiesen werden, die standardmäßigen Netzwerkanfrage mit {{domxref("GlobalFetch.fetch","fetch")}} auszuführen, um die Ressource aus dem Netzwerk zu laden, wenn dieses verfügbar ist:

    + + 
    fetch(event.request)
    +
    4. +
  4. +

    Wenn es keinen Treffer gab und auch das Netzwerk nicht verfügbar ist, kann die Anfrage mit einer Ausweichseite beantwortet werden, indem {{domxref("CacheStorage.match","match()")}} folgendermaßen verwendet wird:

    + + 
    caches.match('/fallback.html');
    +
    5. +
  5. +

    Viele Informationen über jeden Request können erhalten werden, indem Parameter des {{domxref("Request")}}-Objekts, welches vom {{domxref("FetchEvent")}} zurückgegeben wird, aufgerufen werden.

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    6. +
+ +

Umgang mit fehlgeschlagenen Cache-Anfragen

+ +

caches.match(event.request)ist hilfreich, wenn es einen Treffer im Service-Worker-Cache gibt. Was aber, wenn das nicht der Fall ist? Stellten wir keine Möglichkeit zur Behandlung einer scheiternden Cache-Anfrage bereit, würde unsere Promise zurückgewiesen werden und wir würden einem Netzwerkfehler gegenüber stehen, wenn es keinen Treffer im Cache gibt.

+ +

Glücklicherweise erlaubt die Promise basierte Struktur des Service-Workers weitere Optionen bereitzustellen. Beispielsweise:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});
+ +

Falls die Promise zurückgewiesen wird, gibt die catch()-Funktion die Standard-Netzwerkanfrage für die Ressource zurück, was es erlaubt, diese vom Server zu laden, sollte eine Netzwerkverbindung bestehen.

+ +

Ein weiterer Weg wäre, die Ressource nicht bloß aus dem Netzwerk zu laden, sondern für zukünftige Anfragen im Cache zu speichern, damit diese ebenfalls offline verwendet werden können. Das bedeutet, sollten weitere Bilder zur Star-Wars-Galerie hinzugefügt werden, kann unsere App diese laden und cachen. Es würde folgendermaßen implementiert werden:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Wir geben an dieser Stelle die Standard-Netzwerkanfrage mit return fetch(event.request) zurück, die wiederum eine Promise zurückgibt. Wenn diese Promise aufgelöst wird, reagieren wir mit einer Funktion, die unseren Cache mit caches.open('v1') öffnet, was eine weitere Promise zurückgibt. Wenn diese auflöst, wird cache.put() benutzt, um die Ressource dem Cache hinzuzufügen. Diese wird aus event.request gezogen, die Netzwerkantwort mit response.clone() kopiert und dem Cache hinzugefügt. Die Kopie wird gespeichert und die Original-Netzwerkantwort an den Browser und somit an die Seite, die die Anfrage gestellt hat, zurückgegeben.

+ +

Warum das alles? Der Datenstrom von Netzwerkanfrage und -antwort kann nur ein einziges Mal gelesen werden. Damit die Netzwerkantwort an den Browser zurückgegeben werden und trotzdem auch im Cache gespeichert werden kann, muss sie kopiert werden. Dadurch kann das Original an den Browser gereicht und die Kopie im Cache gespeichert werden. Original und Kopie werden somit jeweils nur einmal gelesen.

+ +

Zuletzt bleibt noch das Problem, was passieren soll, wenn es weder einen Treffer im Cache noch eine verfügbare Netzwerkverbindung gibt. Zur Zeit schlägt unsere Anfrage an die Ressource fehl. Wenn wir eine Ausweichlösung bereitstellen, werden, egal was passiert, die Nutzer eine Antwort bekommen:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

Wir haben uns an dieser Stelle für ein Ausweichbild entschieden, da die einzigen Anfragen, die potentiell fehlschlagen, die für neue Bilder in der Galerie sein werden. Um alles andere wurde sich bereits während des install-Events der Installation gekümmert.

+ +

Aktualisieren des Service-Workers

+ +

Wurde der Service-Worker bereits installiert, aber eine neue Version bei Neuladen der Seite bereitgestellt werden, wird dieser neue Worker im Hintergrund installiert, jedoch noch nicht aktiviert. Das geschieht erst dann, wenn keine der Seiten, die den alten Worker nutzen, mehr geladen werden. Sobald dies der Fall ist, wird der neue Service-Worker aktiviert.

+ +

Damit dies geschehen kann, muss derinstall-Event-Listener im neuen Service-Worker ungefähr folgendermaßen angepasst werden (Augenmerk auf die neue Versionsnummer):

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+             …
+
+              // hier können weitere neue Ressourcen stehen...
+      ]);
+    });
+  );
+});
+ +

Während dies alles geschieht, ist weiterhin die vorherige Version des Service-Workers für die Verwaltung der Anfragen verantwortlich und die neue Version wird im Hintergrund installiert. Der neue Cache hat in diesem Beispiel den Namen v2, so dass der Cache mit dem Namen v1 nicht beeinträchtigt wird.

+ +

Wenn keine Seiten mehr die aktuelle Version benutzen, wird der neue Worker aktiviert und verwaltet die Netzwerkanfragen.

+ +

Löschen des alten Caches

+ +

Es steht weiterhin ein activate-Event zur Verfügung. Es wird generell genutzt, um Dinge abzuhandeln, die die alte Version stark beeinträchtigt hätten, würden sie zu deren Laufzeit ausgeführt werden. Dies betrifft zum Beispiel das Löschen der alten Caches. Das Event ist auch nützlich, um Daten zu löschen, die nicht mehr gebraucht werden und so zu verhindern, dass zu viel Speicherplatz verbraucht wird — jeder Browser hat eine feste Obergrenze für die Menge an Cache-Speicherplatz, die ein Service-Worker nutzen kann. Der Browser selbst verwaltet den Speicherplatz an sich selbstständig, aber es kann passieren, dass der Cache-Speicherplatz für eine Seite gelöscht wird, denn wenn der Browser Daten dieser Art löscht, dann entweder alle oder keine Daten der Seite.

+ +

Promises, die waitUntil() hineingereicht werden, blockieren weitere Events bis diese abgearbeitet wurden, so dass sicher gestellt werden kann, dass alle Aufräumarbeiten abgeschlossen sind, bevor die erste Netzwerkanfrage an den neuen Cache gestellt wird.

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Entwicklertools

+ +

Chrome hat chrome://inspect/#service-workers, wo Aktivität und Speicherplatz der aktuellen Service-Worker eingesehen werden können, und chrome://serviceworker-internals, wo mehr Details zu finden sind und Service-Worker gestartet, beendet und der Fehlersuche unterworfen werden können. Zukünftige Versionen werden zusätzlich Mittel zur Netzwerkdrosselung und einen Offline-Modus bereitsellen, um schlechte oder nicht vorhandene Netzwerkverbindungen zu simulieren.

+ +

Auch Firefox hat die Entwicklung nützlicher Werkzeuge in Bezug auf Service-Worker begonnen:

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initiale Definition.
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstüzung{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("33.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstüzung{{CompatNo}}{{CompatChrome(40.0)}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown() }}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/serviceworker/index.html b/files/de/web/api/serviceworker/index.html new file mode 100644 index 0000000000..38d160b96b --- /dev/null +++ b/files/de/web/api/serviceworker/index.html @@ -0,0 +1,103 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +translation_of: Web/API/ServiceWorker +--- +
{{APIRef("Service Workers API")}}
+ +

Die ServiceWorker-Schnittstelle der Service Worker-API stellt einen Verweis auf einen Serviceworker bereit. Mehrere "Glossary"-Glossar-("Browsing-Kontexte", "Browsing-Kontexte") (z. B. .pages, Arbeitskräfte usw.) können demselben Service-Worker zugeordnet werden, jeder durch ein eindeutiges Objekt.ServiceWorker

+ +

Ein Objekt ist in der Eigenschaft ""ServiceWorkerRegistration.active"" und in der Eigenschaft ""ServiceWorkerContainer.controller"" verfügbar – dies ist ein Service-Worker, der aktiviert wurde und die Seite steuert (der Service-Worker wurde erfolgreich registriert, und die gesteuerte Seite wurde neu geladen).)ServiceWorker

+ +

Die Schnittstelle wird eine Reihe von Lebenszyklusereignissen – und – und funktionalen Ereignissen einschließlich ausgelöst. Einem Objekt ist ein Objekt zugeordnet, dem der Lebenszyklus von "ServiceWorker.state") zugeordnet ist.ServiceWorkerinstallactivatefetchServiceWorker

+ +

Properties

+ +

The ServiceWorker interface inherits properties from its parent, {{domxref("Worker")}}.

+ +
+
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+
Returns the serialized script URL defined as part of {{domxref("ServiceWorkerRegistration")}}. The URL must be on the same origin as the document that registers the .ServiceWorkerServiceWorker
+
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
+
Returns the state of the service worker. It returns one of the following values: , , , or .installinginstalled,activatingactivatedredundant
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+
An {{domxref("EventListener")}} property called whenever an event of type is fired; it is basically fired anytime the {{domxref("ServiceWorker.state")}} changes.statechange
+
+ +

Methods

+ +

The ServiceWorker interface inherits methods from its parent, {{domxref("Worker")}}, with the exception of {{domxref("Worker.terminate")}} — this should not be accessible from service workers.

+ +

Examples

+ +

This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the {{domxref("ServiceWorker.state")}} and returns its value.

+ +
if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Something went wrong during registration. The service-worker.js file
+        // might be unavailable or contain a syntax error.
+    });
+} else {
+    // The current browser doesn't support service workers.
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#serviceworker', 'ServiceWorker')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ServiceWorker")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/serviceworkercontainer/index.html b/files/de/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..2899d05b7c --- /dev/null +++ b/files/de/web/api/serviceworkercontainer/index.html @@ -0,0 +1,158 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

The ServiceWorkerContainer interface of the ServiceWorker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

+ +

Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.

+ +

Properties

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Returns a {{domxref("ServiceWorker")}} object if its state is activated (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns null if the request is a force refresh (Shift + refresh) or if there is no active worker.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+
An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
+
{{domxref("ServiceWorkerContainer.onerror")}}
+
An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.
+
{{domxref("ServiceWorkerContainer.onmessage")}}
+
An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given scriptURL.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a Promise. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a ServiceWorkerContainer in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a Promise. 
+
+ +

Examples

+ +

This code snippet is from the service worker fallback-response sample (see fallback-response live). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/serviceworkercontainer/register/index.html b/files/de/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..e900e8085c --- /dev/null +++ b/files/de/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,122 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

Die register() Methode der ServiceWorkerContainer Schnittstelle erstellt oder aktualisiert eine ServiceWorkerRegistration für die gegebene scriptURL. 

+ +

Nach erfolgreicher Registrierung verwendet die Service Worker Registrierung die übergebene scriptURL und ihren Bereich für den Navigationsabgleich. Die Methode gibt ein Promise zurück, welches zu einer ServiceWorkerRegistration aufgelöst wird. Die Funktion kann bedingungslos aufgerufen werden - Es muss vorher nicht kontrolliert werden, ob eine aktive Registrierung vorhanden ist.

+ +

Es entstehen häufig Verwirrungen über die Bedeutung und Verwendung des scope. Da ein ServiceWorker keinen größeren Bereich abdecken kann als seinen einen Pfad, sollte man den Parameter nur verwenden, wenn man einen kleineren Bereich als den Standardbereich abdecken will.

+ +

Syntax

+ +
ServiceWorkerContainer.register(scriptURL, options).then(function(ServiceWorkerRegistration) {
+  // Do something with ServiceWorkerRegistration.
+});
+ +

Parameter

+ +
+
scriptURL
+
Die Url des Service Workers Scripts.
+
options {{optional_inline}}
+
Ein Object, welches verschiedene Registrierungsoptionen beinhaltet. Zur Zeit stehen folgende Optionen zur Verfügung: +
    +
  • scope: Ein USVString, welcher eine URL darstellt, die zur Festlegung des Bereiches des Service Workers verwendet wird. Dies ist normalerweise eine relative URL. Der Standardwert ist die URL, die man bekommen würde, wenn man './' mit dem Pfad des Service Worker Scripts verwenden würde.
    • +
+
+
+ +

Rückgabewert

+ +

Ein Promise, welches zu einem ServiceWorkerRegistration Objekt aufgelöst wird.

+ +

Beispiele

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
+    document.querySelector('#status').textContent = 'succeeded';
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  // Der verwendete Browser unterstützt Service Worker nicht.
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initiale Definition.
+ +

Browserkompatiblität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
diff --git a/files/de/web/api/sharedworker/index.html b/files/de/web/api/sharedworker/index.html new file mode 100644 index 0000000000..52ecc8075b --- /dev/null +++ b/files/de/web/api/sharedworker/index.html @@ -0,0 +1,117 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +tags: + - API + - Interface + - Reference + - SharedWorker + - WebWorkers + - Workers +translation_of: Web/API/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

Das SharedWorker Interface repräsentiert eine spezielle Art von Worker, auf welchen durch mehrere Kontexte zugegeriffen werden kann. Hier kann es sich um verschiedene Tabs, iFrames oder auch Worker handeln. Diese implementieren ein anderes Interface als dedicated Worker und haben einen anderen Global Scope {{domxref("SharedWorkerGlobalScope")}}.

+ +
+

Note: Wenn auf einen SharedWorker von mehreren Browser Kontexten aus zugegriffen wird müssen all diese denselben Urpsrung haben. (Dasselbe Protocol, Host und Port)

+
+ +

Konstruktoren

+ +
+
{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
+
Erstellt einen Shared Web Worker, der ein Script zu einer angegebenen URL ausführt.
+
+ +

Eigenschaften

+ +

Erbt Eigenschaften von dem Parent {{domxref("EventTarget")}} und implementiert Eigenschaften von {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Ist ein{{domxref("EventListener")}} der immer aufgerufen wird wenn ein {{domxref("ErrorEvent")}} vom Typ error durch den Worker läuft.
+
{{domxref("SharedWorker.port")}} {{readonlyInline}}
+
Returnt ein {{domxref("MessagePort")}} Objekt, welches zum Kommunizieren und Kontrollieren des Shared Workers verwendet wird.
+
+ +
+
+ +

Methoden

+ +

Erbt Methoden von dem Parent {{domxref("EventTarget")}} und implementiert Methoden von {{domxref("AbstractWorker")}}.

+ +

Beispiel

+ +

In unserem Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML Seiten, von denen beide etwas JavaScript verwenden um simple Kalkulationen auszuführen. Die verschiedenen Skripte verwenden dasselbe Worker File um die Kalkulation durchzuführen. Beide können auf dieses zugreifen, auch wenn diese in verschiedenen Fenstern ausgeführt werden.

+ +

Das folgende Code Beispiel zeigt das Erstellen eines SharedWorker Objekts unter der Verwendung des {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} Konstruktors. Beide Skripte enthalten:

+ +
var myWorker = new SharedWorker('worker.js');
+
+ +

Beide Skripte greifen dann auf den Worker durch ein {{domxref("MessagePort")}} Objekt zu, welches mithilfe von {{domxref("SharedWorker.port")}} erstellt wurde. Wenn das onmessage Event mithilfe von addEventListener angehängt wurde, wird der Port automatisch gestartet mittels der start() Methode:

+ +
myWorker.port.start();
+ +

Wenn der Port gestartet ist senden beide Skripte Nachrichten an den Worker und behandeln die empfangenen Nachrichten von port.postMessage() und port.onmessage:

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Innerhalb des Workers verwenden wird den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns an den oben genannten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die Eigenschaft ports im {{event("connect")}} Event zugänglich. Anschließend verwenden wir die {{domxref("MessagePort")}} start() Methode um den Port zu starten und verwenden den onmessage Handler um die Nachrichten aus dem Main Thread zu behandeln.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}Keine Änderung von {{SpecName("Web Workers")}}.
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.SharedWorker")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/speechsynthesis/index.html b/files/de/web/api/speechsynthesis/index.html new file mode 100644 index 0000000000..b90f40aa6f --- /dev/null +++ b/files/de/web/api/speechsynthesis/index.html @@ -0,0 +1,134 @@ +--- +title: SpeechSynthesis +slug: Web/API/SpeechSynthesis +translation_of: Web/API/SpeechSynthesis +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

Die SpeechSynthesis-Schnittstelle der Web Speech API ist die Controller-Schnittstelle für den Sprachdienst. Sie kann genutzt werden um Informationen über die Synthesestimmen, die auf dem Gerät verfügbar sind, zu erhalten. Außerdem um die Sprache zu starten, zu pausieren und andere Befehle auszuführen.

+ +

Eigenschaften

+ +

SpeechSynthesis erbt ebenfalls Eigenschaften seiner Elternschnittstelle, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}
+
Ein {{domxref("Boolean")}} der true zurückgibt, wenn das SpeechSynthesis-Objekt sich im pausierten Zustand befindet.
+
{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}
+
Ein {{domxref("Boolean")}} der true zurückgibt, wenn die Äußerungen-Warteschlange bisher ungesprochene Äußerungen enthält.
+
{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}
+
Ein {{domxref("Boolean")}} der true zurückgibt, wenn eine Äußerung aktuell gesprochen wird — auch wenn SpeechSynthesis sich aktuell im pausierten Zustand befindet.
+
+ +

Event-Handler

+ +
+
{{domxref("SpeechSynthesis.onvoiceschanged")}}
+
Wird ausgelöst, wenn sich die Liste von {{domxref("SpeechSynthesisVoice")}}-Objekten, die von der {{domxref("SpeechSynthesis.getVoices()")}}-Methode zurückgegeben würde, geändert hat.
+
+ +

Methoden

+ +

SpeechSynthesis erbt ebenfalls Methoden von seiner Elternschnittstelle, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.cancel()")}}
+
Entfernt alle Äußerungen aus der Äußerungen-Warteschlange.
+
{{domxref("SpeechSynthesis.getVoices()")}}
+
Gibt eine Liste von {{domxref("SpeechSynthesisVoice")}}-Objecten zurück die alle verfügbaren Stimmen auf dem aktuellen Gerät repräsentiert.
+
{{domxref("SpeechSynthesis.pause()")}}
+
Versetzt das SpeechSynthesis-Objekt in den pausierten Zustand.
+
{{domxref("SpeechSynthesis.resume()")}}
+
Versetzt das SpeechSynthesis-Object in den nicht-pausierten Zustand: setzt es fort, wenn es bereits pausiert war.
+
{{domxref("SpeechSynthesis.speak()")}}
+
Fügt eine {{domxref("SpeechSynthesisUtterance", "Äußerung")}} Äußerung zur Äußerungen-Warteschlange hinzu; sie wird gesprochen, wenn alle anderen davor eingereihten Äußerungen fertig gesprochen wurden.
+
+ +

Beispiele

+ +

In our basic Speech synthesiser demo, we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.

+ +

Inside the inputForm.onsubmit handler, we stop the form submitting with preventDefault(),  create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+
+  inputTxt.blur();
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}{{Spec2('Web Speech API')}} 
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.SpeechSynthesis")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/storage/clear/index.html b/files/de/web/api/storage/clear/index.html new file mode 100644 index 0000000000..5e6c6d5678 --- /dev/null +++ b/files/de/web/api/storage/clear/index.html @@ -0,0 +1,61 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API Methode Storage +translation_of: Web/API/Storage/clear +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode clear() der {{domxref("Storage")}}-Schnittstelle löscht sämtliche Datensätze des Objekts.

+ +

Syntax

+ +
storage.clear();
+ +

Rückgabewert

+ +

{{jsxref("undefined")}}.

+ +

Beispiele

+ +

Die folgende Funktion speichert drei Datensätze und löscht sie abschließend mit clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.clear")}}

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/getitem/index.html b/files/de/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..364c3cbc83 --- /dev/null +++ b/files/de/web/api/storage/getitem/index.html @@ -0,0 +1,78 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API Methode Storage +translation_of: Web/API/Storage/getItem +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode getItem() der {{domxref("Storage")}}-Schnittstelle gibt bei Nennung des Schlüssels im Parameter keyName den Wert des zugehörigen Datensatzes zurück.

+ +

Syntax

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parameter

+ +
+
keyName
+
Ein {{domxref("DOMString")}}, der den Namen des Schlüssels, dessen Wert ausgelesen werden soll, enthält.
+
+ +

Rückgabewert

+ +

Ein {{domxref("DOMString")}}, der den Wert des Schlüssels enthält. Falls der Schlüssel nicht existiert, wird null zurückgegeben.

+ +

Beispiel

+ +

Die folgende Funktion liest drei Datenwerte aus dem lokalen Speicher und verwendet sie, um einen benutzerdefinierten Style auf einer Seite zu setzen.

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.getItem")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/storage/index.html b/files/de/web/api/storage/index.html new file mode 100644 index 0000000000..7b5d09b041 --- /dev/null +++ b/files/de/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +translation_of: Web/API/Storage +--- +

{{APIRef("Web Storage API")}}

+ +

Die Storage-Schnittstelle der Web-Storage-API ermöglicht den Zugriff auf einfache Schlüssel-Wert-Datenbanken des Browsers, in denen Daten mit einer Domain verknüpft gespeichert werden können.

+ +

In {{domxref("Window.sessionStorage")}} gespeicherte Daten verfallen mit Ablauf der Sitzung (in der Regel dem Schließen des Browsers), {{domxref("Window.localStorage")}} speichert die Daten hingegen grundsätzlich zeitlich unbegrenzt.

+ +

Eigenschaften

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Anzahl der in diesem Storage-Objekt gespeicherten Datensätze.
+
+ +

Methoden

+ +
+
{{domxref("Storage.key()")}}
+
Gibt unter Angabe einer Zahl n den Schlüssel des n-ten Datensatzes zurück.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Gibt den zum Schlüssel gehörigen Wert zurück.
+
{{domxref("Storage.setItem()")}}
+
Speichert den gegebenen Wert im Storage-Objekt unter dem gegebenen Schlüssel. Ist unter diesem Schlüssel bereits ein Datensatz vorhanden, wird sein Wert mit dem gegebenen überschrieben.
+
{{domxref("Storage.removeItem()")}}
+
Löscht den Datensatz des gegebenen Schlüssels.
+
{{domxref("Storage.clear()")}}
+
Löscht sämtliche Datensätze des Storage-Objekts.
+
+ +

Beispiele

+ +

In diesem Beispiel wird auf das Storage-Objekt localStorage zugegriffen.

+ +

Zuerst wird mit !localStorage.getItem('bgcolor') geprüft, ob das Objekt keinen Datensatz namens bgcolor enthält. Ist der Datensatz bgcolor nicht vorhanden, wird populateStorage() aufgerufen, um Werte aus der Seite auszulesen und mittels {{domxref("Storage.setItem()")}} im Storage-Objekt zu speichern.
+ Anschließend folgt der Aufruf der Funktion setStyles(), die alle Daten mittels {{domxref("Storage.getItem()")}} ausliest und die Darstellung der Seite entsprechend ändert.
+  

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+}
+setStyles();
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Anmerkung: Dieses Beispiel kann unter Web Storage Demo ausprobiert werden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}8113.2[1]
+
+ +

[1] Seit iOS 5.1 speichert Safari Mobile in localStorage abgelegte Daten im Cache-Verzeichnis. Dieses wird in unregelmäßigen Abständen vom Betriebssystem teilweise geleert, spätestens jedoch, sobald nur noch wenig Speicherplatz zur Verfügung steht.
+ Desweiteren verhindert der private Modus von Safari Mobile jegliche Nutzung von localStorage.

+ +

Die Speicherkapazität von localStorage und sessionStorage. unterscheidet sich von Browser zu Browser (siehe diese detailierte Aufstellung der Speicherkapazitäten für verschiedene Browser).

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/key/index.html b/files/de/web/api/storage/key/index.html new file mode 100644 index 0000000000..65e56c9ec0 --- /dev/null +++ b/files/de/web/api/storage/key/index.html @@ -0,0 +1,75 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - API Methode Storage +translation_of: Web/API/Storage/key +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode key() der {{domxref("Storage")}}-Schnittstelle gibt durch Übergabe des Parameters n den Schlüssel des n-ten Datensatzes zurück.
+ Die Reihenfolge der Schlüssel folgt keiner Vorgabe und hängt alleine vom Browser ab.

+ +

Syntax

+ +
var aKeyName = storage.key(index);
+ +

Parameter

+ +
+
index
+
Ein Integer, der die Position des gewünschten Schlüssels bestimmt. Die Nummerierung beginnt bei 0.
+
+ +

Rückgabewert

+ +

Ein {{domxref("DOMString")}} mit dem Namen des Schlüssels.

+ +

Beispiele

+ +

Die folgende Funktion liest in einer Schleife für jeden Datensatz den Schlüssel und übergibt diesen an die Funktion callback():

+ +
function forEachKey(callback) {
+  for (var i = 0; i < localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}
+ +

Nachfolgend wird in einer Schleife zu jedem Datensatz erst der Schlüssel, dann mit dem Schlüssel der Wert gelesen und dieser in der Konsole ausgegeben.

+ +
for (var i = 0; i < localStorage.length; i++) {
+   var key = localStorage.key(i);
+   var value = localStorage.getItem(key);
+   console.log(value);
+}
+ +
+

Hinweis: Weitere Beispiele sind in der Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.key")}}

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/length/index.html b/files/de/web/api/storage/length/index.html new file mode 100644 index 0000000000..767ef0c21b --- /dev/null +++ b/files/de/web/api/storage/length/index.html @@ -0,0 +1,63 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API Eigenschaft Storage +translation_of: Web/API/Storage/length +--- +

{{APIRef("Web Storage API")}}

+ +

Die length-Eigenschaft der {{domxref("Storage")}}-Schnittstelle enthält die Anzahl der im Storage-Objekt gespeicherten Datensätze.

+ +

Syntax

+ +
var aLength = Storage.length;
+ +

Rückgabewert

+ +

Ein Integer.

+ +

Beispiel

+ +

Die folgende Funktion fügt drei Datensätze hinzu und liest abschließend die Anzahl der vorhandenen Datensätze:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // sollte 3 zurückgeben
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.length")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/storage/removeitem/index.html b/files/de/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..6b180f52db --- /dev/null +++ b/files/de/web/api/storage/removeitem/index.html @@ -0,0 +1,68 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API Methode Storage Speicher +translation_of: Web/API/Storage/removeItem +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode removeItem() der {{domxref("Storage")}}-Schnittstelle löscht den im Parameter keyName benannten Datensatz aus dem Speicher. Ist kein Datensatz unter diesem Schlüssel vorhanden, tut diese Funktion nichts.

+ +

Syntax

+ +
storage.removeItem(keyName);
+ +

Parameter

+ +
+
keyName
+
Ein {{domxref("DOMString")}}, der den Schlüssel des zu löschenden Datensatzes enthält.
+
+ +

Rückgabewert

+ +

Keiner.

+ +

Beispiel

+ +

Die nachfolgende Funktion speichert drei Datensätze und löscht abschließend den Datensatz mit dem Schlüssel image.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.removeItem")}}

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/setitem/index.html b/files/de/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..94145670a9 --- /dev/null +++ b/files/de/web/api/storage/setitem/index.html @@ -0,0 +1,146 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Méthode + - Referenz + - Speicher + - Webspeicher + - localStorage + - sessionStorage +translation_of: Web/API/Storage/setItem +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode setItem() der {{domxref("Storage")}}-Schnittstelle fügt das gegebene Schlüssel-Wert-Paar zum Speicher hinzu oder überschreibt ein bereits unter diesem Schlüssel im Speicher vorhandenes.

+ +

Syntax

+ +
storage.setItem(keyName, keyValue);
+ +

Parameter

+ +
+
keyName
+
Ein {{domxref("DOMString")}} mit dem Schlüssel des Datensatzes, der erstellt oder überschrieben werden soll.
+
keyValue
+
Ein {{domxref("DOMString")}} mit dem Wert, der in den mit keyName benannten Datensatz geschrieben werden soll.
+
+ +

Rückgabewert

+ +

Keiner.

+ +

Fehler

+ +

setItem() kann bei vollem Speicher eine Exception auslösen. Insbesondere im mobilen Safari (ab iOS 5) wird sie immer ausgelöst, falls der Nutzer sich im privaten Modus befindet, da Safari in diesem Modus das Speicherkontingent auf 0 Bytes setzt. Andere Browser nutzen für den privaten Modus einen separaten Daten-Container.
+ Deshalb sollte immer sichergestellt sein, dass ein möglicher Fehler eingeplant und entsprechend behandelt wird.

+ +

Beispiel

+ +

Die folgende Funktion erstellt drei Datensätze im localStorage-Objekt.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Alle Browser haben verschiedene Kapazitäten für localStorage und sessionStorage. Hier gibt es eine detaillierten Übersicht der Kapazitäten verschiedener Browser.

+ +
+

Hinweis: Seit iOS 5.1, speichert Safari Mobile localStorage-Daten im Cache-Ordner, der gelegentlich durch das Betriebssystem geleert wird, insbesondere falls nur noch wenig freier Speicher zur Verfügung steht.

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/transferable/index.html b/files/de/web/api/transferable/index.html new file mode 100644 index 0000000000..20ed3dfccd --- /dev/null +++ b/files/de/web/api/transferable/index.html @@ -0,0 +1,122 @@ +--- +title: Transferable +slug: Web/API/Transferable +tags: + - API + - Interface + - Reference + - Web Workers + - postMessage +translation_of: Web/API/Transferable +--- +

{{ ApiRef("HTML DOM") }}

+ +

Das Transferable Interface stellt ein Objekt dar, welches zwischen unterschiedlichen Ausführungskontexten, wie zum Beispiel dem main thread und Web Workers, ausgetauscht werden kann.

+ +

Es existiert von dem Interface keine Instanz und kein Objekt. Ebenso definiert es keinerlei Eigenschaften und Methoden. Zweck des Transferable Interface ist lediglich die Möglichkeit der Kennzeichnung von Objekten für die spezifische Situation eines Transfers und Austauschs etwa zwischen Anwendung und {{domxref("Worker")}} via {{domxref("Worker.postMessage()")}}.

+ +

Die Typen {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} and {{domxref("ImageBitmap")}} implementieren dieses Interface.

+ +

Properties

+ +

Das Transferable Interface implementiert und erbt keine spezifischen Eigenschaften.

+ +

Methods

+ +

Das Transferable Interface implementiert und erbt keine spezifischen Methoden.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML WHATWG')}}Keine Änderung von {{SpecName("HTML5 W3C")}}, wenngleich das neue {{domxref("CanvasProxy")}} auch Transferable implementiert.
{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML5 W3C')}}Initiale Definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
MessagePort{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
MessagePort{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 10 only accepts a single {{domxref("Transferable")}} object as parameter, but not an array.

+ +

See also

+ + diff --git a/files/de/web/api/url/createobjecturl/index.html b/files/de/web/api/url/createobjecturl/index.html new file mode 100644 index 0000000000..f3668e7f70 --- /dev/null +++ b/files/de/web/api/url/createobjecturl/index.html @@ -0,0 +1,139 @@ +--- +title: URL.createObjectURL() +slug: Web/API/URL/createObjectURL +tags: + - API + - Experimentell + - Méthode + - URL + - URL API +translation_of: Web/API/URL/createObjectURL +--- +

{{ApiRef("URL API")}}{{SeeCompatTable}}

+ +

Zusammenfassung

+ +

Die statische Methode URL.createObjectURL() erzeugt einen {{domxref("DOMString")}}, welcher eine URL enthält, die das übergebene Objekt repräsentiert. Die Gültigkeitsdauer der URL ist von dem Dokumentobjekt {{domxref("document")}} abhängig, in dessen Fenster sie erzeugt wurde. Die neue Objekt-URL repräsentiert das angegebene {{domxref("File")}}- bzw. {{domxref("Blob")}}-Objekt.

+ +

Syntax

+ +
objectURL = URL.createObjectURL(blob);
+
+ +

Parameter

+ +
+
blob
+
+ +
+
Ist ein {{domxref("File")}}-Objekt oder ein {{domxref("Blob")}}-Objekt, für das eine URL generiert werden soll.
+
+ + + +

Beispiele

+ +

Siehe "Using object URLs to display images".

+ +

Anmerkungen

+ +

Immer, wenn createObjectURL() aufgerufen wird, wird eine neue Objekt-URL erzeugt, auch wenn schon eine URL für das gleiche Objekt existiert. Jede dieser URLs muss durch einen Aufruf von {{domxref("URL.revokeObjectURL()")}}  wieder freigegeben werden, sofern sie nicht mehr benötigt wird. Wenn das Dokument geschlossen wird, gibt der Browser die URLs automatisch wieder frei. Für eine optimale Performance and Speichernutzung sollten die URLs freigegeben werden, sofern sichergestellt werden kann, dass sie nicht mehr benötigt werden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}{{Spec2('File API')}}Erste Definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung8 mit vorangestelltem webkitURL für URL
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(2)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(6)}} mit vorangestelltem webkitURL für URL
+ {{CompatSafari(7)}}
In a {{ domxref("Worker", "Web Worker") }}10 mit vorangestelltem webkitURL für URL
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}{{CompatSafari(6)}} mit vorangestelltem webkitURL für URL
+ {{CompatSafari(7)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome for AndroidAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support18 mit vorangestelltem webkitURL für URL4.0 mit vorangestelltem webkitURL für URL{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} mit vorangestelltem webkitURL für URL6.0 mit vorangestelltem webkitURL für URL
In einem {{ domxref("Worker", "Web Worker") }}18 mit vorangestelltem webkitURL für URL{{CompatVersionUnknown}} mit vorangestelltem webkitURL für URL{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} mit vorangestelltem webkitURL für URL6.0 mit vorangestelltem webkitURL für URL
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/url/index.html b/files/de/web/api/url/index.html new file mode 100644 index 0000000000..6f1bb53686 --- /dev/null +++ b/files/de/web/api/url/index.html @@ -0,0 +1,222 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Experimental + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/URL +--- +
{{ApiRef("URL API")}} {{SeeCompatTable}}
+ +

The URL interface represent an object providing static methods used for creating object URLs.

+ +

When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as Window.webkitURL).

+ +

Properties

+ +

Implements properties defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URLUtils.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("URLUtils.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URLUtils.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URLUtils.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URLUtils.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URLUtils.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URLUtils.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URLUtils.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
+ +
+
{{domxref("URLUtils.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Constructor

+ +
+
{{domxref("URL.URL", "URL()")}}
+
Creates and return a URL object composed from the given parameters.
+
+ +

Methods

+ +

The URL interface implements methods defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Static methods

+ +
+
{{ domxref("URL.createObjectURL()") }}
+
Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
+
{{ domxref("URL.revokeObjectURL()") }}
+
Revokes an object URL previously created using {{ domxref("URL.createObjectURL()") }}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
{{SpecName('URL', '#api', 'Node')}}{{Spec2('URL')}}Initial definition (implements URLUtils).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0 as webkitURL
+ 35		{{CompatGeckoDesktop("2.0")}} (non-standard name) [1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0 as webkitURL
+ {{CompatVersionUnknown}}		6.0 as webkitURL
+ 7.0
URLUtils properties32{{CompatVersionUnknown}}{{CompatUnknown}}19{{CompatVersionUnknown}}
username, password, and origin32{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
protocol, host, hostname, port, href, pathname, search, hash32{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
searchParams{{CompatNo}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}as webkitURL{{CompatGeckoMobile("14.0")}}(non-standard name) [1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0 as webkitURL +

6.0 as webkitURL

+ +

 

+
URLUtils {{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
username, password, href, and origin{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard nsIDOMMozURLProperty internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.

+ +

Chrome Code - Scope Availability

+ +

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['URL']);
+
+ +

URL is available in Worker scopes.

+ +

See also

+ + diff --git a/files/de/web/api/url/protocol/index.html b/files/de/web/api/url/protocol/index.html new file mode 100644 index 0000000000..08d4ad6b6f --- /dev/null +++ b/files/de/web/api/url/protocol/index.html @@ -0,0 +1,61 @@ +--- +title: URL.protocol +slug: Web/API/URL/protocol +tags: + - API + - Property + - Protocols + - Reference + - URL +translation_of: Web/API/URL/protocol +--- +
{{ApiRef("URL API")}}
+ +

Die protocol Eigenschaft der {{domxref("URL")}} Schnittstelle ist ein {{domxref("USVString")}} der das Protokollschema der URL, einschließlich des finalen ':' darstellt.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
string = object.protocol;
+object.protocol = string;
+
+ +

Wert

+ +

Ein {{domxref("USVString")}}.

+ +

Beispiele

+ +
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+var result = url.protocol; // Gibt "https:" zurück.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('URL', '#dom-url-protocol', 'protocol')}}{{Spec2('URL')}}Erste Definition.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.URL.protocol")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/urlsearchparams/index.html b/files/de/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..3c635d180d --- /dev/null +++ b/files/de/web/api/urlsearchparams/index.html @@ -0,0 +1,211 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +tags: + - API + - Experimentell + - Interface + - Referenz + - URL API +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

Das URLSearchParams Interface definiert Hilfsmethoden um mit dem Query-String einer URL zu arbeiten.

+ +

Ein Objekt, welches URLSearchParams implementiert, kann auch direkt in einem {{jsxref("Statements/for...of", "for...of")}} Konstrukt genutzt werden, anstatt {{domxref('URLSearchParams.entries()', 'entries()')}}: for (var p of mySearchParams) ist äquivalent zu for (var p of mySearchParams.entries()).

+ +

Konstruktor

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
Konstruktor erzeugt ein URLSearchParams Objekt von einem Query-String.
+
+ +

Eigenschaften

+ +

Dieses Interface erbt keine Eigenschaften.

+ +

Methoden

+ +

Dieses Interface erbt keine Methoden.

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Hängt ein Schlüssel/Wert - Paar an den Query-String.
+
{{domxref("URLSearchParams.delete()")}}
+
Löscht einen Schlüssel und den zugehörigen Wert aus dem Query-String.
+
{{domxref("URLSearchParams.entries()")}}
+
Gibt einen {{jsxref("Iteration_protocols","Iterator")}} über alle Schlüssel/Wert - Paare im Query-String.
+
{{domxref("URLSearchParams.get()")}}
+
Gibt den ersten Wert, der im Query-String mit einem Schlüssel assoziiert ist.
+
{{domxref("URLSearchParams.getAll()")}}
+
Gibt alle Werte, die im Query-String mit einem Schlüssel assoziiert sind.
+
{{domxref("URLSearchParams.has()")}}
+
Gibt einen {{jsxref("Boolean")}}, der anzeigt ob ein Schlüssel im Query-String vorkommt.
+
{{domxref("URLSearchParams.keys()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Schlüssel im Query-String.
+
{{domxref("URLSearchParams.set()")}}
+
Setzt den Wert eines Schlüssels. Wenn der Schlüssel mehrfach im Query-String vorkommt, werden die Restlichen gelöscht.
+
{{domxref("URLSearchParams.sort()")}}
+
Sortiert alle Schlüssel/Wert Paare, nach dem Schlüssel.
+
Sorts all key/value pairs, if any, by their keys.
+
{{domxref("URLSearchParams.toString()")}}
+
Gibt den Query-String, in der passenden Form um in einer URL einzusetzen.
+
{{domxref("URLSearchParams.values()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Werte im Query-String.
+
+ +

Beispiel

+ +
var paramsString = "q=URLUtils.searchParams&topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Iteriert über die Suchparameter
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Initial definition.
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(49)}}{{CompatGeckoDesktop("29.0")}}{{CompatNo}}3610.1
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatGeckoDesktop("44.0")}}{{CompatNo}}36{{CompatUnknown}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatNo}}{{CompatGeckoDesktop("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("44.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Verweise

+ + + +
+
diff --git a/files/de/web/api/usvstring/index.html b/files/de/web/api/usvstring/index.html new file mode 100644 index 0000000000..4021cc4cc8 --- /dev/null +++ b/files/de/web/api/usvstring/index.html @@ -0,0 +1,42 @@ +--- +title: USVString +slug: Web/API/USVString +tags: + - API + - DOM + - DOM Referenz + - Referenz + - String + - WebIDL +translation_of: Web/API/USVString +--- +

{{APIRef("DOM")}}

+ +

Ein USVString entspricht der Menge aller möglichen Folgen von Unicode-Skalarwerten. USVString konvertiert zu String, wenn es in JavaScript zurückgegeben wird; Es wird allgemein nur für APIs verwendet, die Text verarbeiten und einen String mit Unicode-Skalarwerten benötigen. USVString ist gleich zu DOMString, mit der Ausnahme, dass USVString ungepaarte Ersatzcodepoints nicht erlaubt. Ungepaarte Ersatzcodepoints in einem USVString werden vom Browser zum Unicode 'Ersatzzeichen' U+FFFD konvertiert.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebIDL', '#idl-USVString', 'USVString')}}{{Spec2('WebIDL')}}Initiale Definition.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/vollbild_api/index.html b/files/de/web/api/vollbild_api/index.html new file mode 100644 index 0000000000..1ddce4c572 --- /dev/null +++ b/files/de/web/api/vollbild_api/index.html @@ -0,0 +1,305 @@ +--- +title: Vollbild API +slug: Web/API/Vollbild_API +tags: + - API + - DOM + - JS + - Tutorial + - Vollbild API +translation_of: Web/API/Fullscreen_API +--- +

{{DefaultAPISidebar("Fullscreen API")}}

+ +

Die Vollbild-API bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.

+ +
+

Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe Vendor Präfixe für Unterschiede zwischen Präfixen und Namen. 

+ +

Für eine universelle Lösung des Problems siehe Fscreen.

+
+ +

Aktivieren des Vollbildmodus

+ +

Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.

+ +

Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:

+ +
<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+
+ +

Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+
+ +

Anzeige-Schwierigkeiten

+ +

An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "width: 100%; height: 100%". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "width: 100%; height: 100%;"-CSS-Regel zum entsprechenden Element hinzufügen:

+ +
#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+ +

Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.

+ +

Benachrichtigung

+ +

Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das document, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das document wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das document in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des document nicht null ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.

+ +

Wenn die Vollbild-Anfrage scheitert

+ +

Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein mozfullscreenerror-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.

+ +
+

Hinweis: Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. 

+
+ +

Verlassen des Vollbildmodus

+ +

Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der  {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.

+ +

Weitere Informationen

+ +

Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:

+ +
+
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
+
Das fullscreenElement-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht null ist, befindet sich das document im Vollbildmodus. Sonst, wenn dieses Attribut null ist, befindet sich das Dokument nicht im Vollbildmodus.
+
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+
Das fullscreenEnabled-Attribut gibt an, ob das document aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.
+
+ +

Was die Nutzer wissen wollen

+ +

Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit ESC (oder F11) verlassen können.

+ +

Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  Alt+Tab) auch den Vollbildmodus.

+ +

Beispiel

+ +

In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von Return oder Enter kann der Nutzer den Vollbildmodus des Videos umschalten.

+ +

Live-Beispiel ansehen

+ +

Watching for the Enter key

+ +

When the page is loaded, this code is run to set up an event listener to watch for the Enter key.

+ +
document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Toggling fullscreen mode

+ +

This code is called when the user hits the Enter key, as seen above.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+
+ +

This starts by looking at the value of the fullscreenElement attribute on the {{ domxref("document") }} (checking it prefixed with both moz, ms, or webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.

+ +

If fullscreen mode is already active (fullscreenElement is non-null), we call {{ domxref("document.exitFullscreen()") }}.

+ +

Vendor Präfixe

+ +

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen). Here is the table summarizing the prefixes and name differences between them:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StandardBlink (Chrome & Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerrorMSFullscreenErroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
+ +

Browser Kompatibilität

+ +

All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of requestFullscreen(), there is MozRequestFullScreen().

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/web_animations_api/index.html b/files/de/web/api/web_animations_api/index.html new file mode 100644 index 0000000000..ad88873dfd --- /dev/null +++ b/files/de/web/api/web_animations_api/index.html @@ -0,0 +1,99 @@ +--- +title: Web Animations API +slug: Web/API/Web_Animations_API +translation_of: Web/API/Web_Animations_API +--- +

{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}

+ +
+

Die Web Animations API ermöglicht die Synchronisierung und zeitliche Abstimmung von Änderungen an der Präsentation einer Webseite, d. H. der Animation von DOM-Elementen. Dabei werden zwei Modelle kombiniert: das Timing-Modell und das Animationsmodell.

+
+ +

Konzepte und Verwendung

+ +

Die Web-Animations-API bietet Browsern und Entwicklern eine gemeinsame Sprache, um Animationen auf DOM-Elementen zu beschreiben. Weitere Informationen zu den Konzepten der API und ihrer Verwendung finden Sie unter Verwenden der Web Animations-API.

+ +

Webanimationsschnittstellen

+ +
+
+ +
+
{{domxref("Animation")}}
+
Bietet Steuerelemente zur Wiedergabe und eine Zeitleiste für einen Animationsknoten. Kann ein mit dem {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} Konstruktor erstelltes Object aufnehmen.
+
{{domxref("KeyframeEffect")}}
+
Beschreibt eine Menge animierbarer Eigenschaften und Werte, die als Keyframes bezeichnet werden, sowie deren Timing-Optionen. Diese können dann mit dem {{domxref("Animation.Animation", "Animation()")}} Konstruktor abgespielt werden. 
+
{{domxref("AnimationTimeline")}}
+
Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle ist zum Definieren von Timeline-Features (geerbt von {{domxref ("DocumentTimeline")}} und zukünftigen Timeline-Objekten) vorhanden, auf die Entwickler nicht selbst zugreifen.
+
{{domxref("AnimationEvent")}}
+
Eigentlich Teil von CSS-Animationen.
+
{{domxref("DocumentTimeline")}}
+
Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (auf die über die Eigenschaft {{domxref ("Document.timeline")}} zugegriffen wird).
+
{{domxref("EffectTiming")}}
+
{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} und {{domxref ("KeyframeEffect.KeyframeEffect ()")}} akzeptieren alle ein optionales Objekt von Timing-Eigenschaften.
+
+ +

Erweiterungen zu anderen Schnittstellen

+ +

 

+ +

Die Web-Animations-API fügt {{domxref ("document")}} und {{domxref ("element")}} einige neue Funktionen hinzu.

+ +

Etweiterungen der Document Schnittstelle

+ +
+
{{domxref("document.timeline")}}
+
Das DocumentTimeline Objekt stellt die Standardzeitleiste des Dokuments dar.
+
{{domxref("document.getAnimations()")}}
+
Gibt ein Array von {{domxref ("Animation")}} - Objekten zurück, die derzeit für Elemente im document wirksam sind.
+
+

Erweiterungen der Element Schnittstelle

+
+
{{domxref("Element.animate()")}}
+
Eine Shortcut-Methode zum Erstellen und Wiedergeben einer Animation für ein Element. Sie gibt die erstellte {{domxref ("Animation")}} Objektinstanz zurück.
+
+ +
+
+ +

Read-Only-Schnittstellen für Web-Animationen

+ +

Die folgenden Schnittstellen sind in der Spezifikation enthalten, z. B. um Features zu definieren, die an mehreren anderen Stellen verwendet werden, oder um als Basis für mehrere Schnittstellen zu dienen, die alle als Werte derselben Eigenschaften verwendet werden können. Du würdest diese nicht direkt in der Entwicklungsarbeit verwenden, aber für Bibliotheksautoren könnte es interessant sein, die Funktionsweise der Technologie zu verstehen, sodass ihre Implementierungen effektiver sein können, oder für Browseringenieure, die eine einfachere Referenz suchen, als die Spezifikation bietet.

+ +
+
{{domxref("AnimationEffectTimingReadOnly")}}
+
Ein dictionary Objekt mit Timing-Eigenschaften, die von der veränderlichen {{domxref ("AnimationEffectTiming")}} - Schnittstelle geerbt werden, die der {{domxref ("KeyframeEffect")}} zugeordnet ist.
+
{{domxref("AnimationEffectReadOnly")}}
+
Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by CSS Animations and Transitions). All values of {{domxref("Animation.effect")}} are of types based on AnimationEffectReadOnly.
+
{{domxref("KeyframeEffectReadOnly")}}
+
Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation", "Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. 
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations')}}{{Spec2('Web Animations')}}Initial definition
+ +

See also

+ + diff --git a/files/de/web/api/web_storage_api/index.html b/files/de/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..ae3779f420 --- /dev/null +++ b/files/de/web/api/web_storage_api/index.html @@ -0,0 +1,142 @@ +--- +title: Web Storage API +slug: Web/API/Web_Storage_API +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

Die Web Storage API bietet Mechanismen, durch welche Browser in einer weitaus intuitiveren Form Schlüssel-Werte-Paare abspeichern können, als dies bei Cookies der Fall ist.

+ +

Web Storage Konzepte und Verwendung

+ +

Die zwei Mechanismen innerhalb des Web Storage sind wie folgt:

+ + + +

Diese Mechanismen stehen durch die Eigenschaften {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} zur Verfügung (um dies näher zu beschreiben: Zur Unterstützung der Browser implementiert das Window Objekt die Objekte WindowLocalStorage und WindowSessionStorage, welche von localStorage und sessionStorage bereitgestellt werden) — durch deren Aufruf wird eine Instanz des {{domxref("Storage")}} Objekts erstellt, durch welches Daten gespeichert, abgerufen und gelöscht werden können. Ein anderes Speicherelement wird für das sessionStorage und localStorage jedes Ausgangspunktes verwendet — beide arbeiten getrennt und werden auch getrennt gesteuert.

+ +
+

Hinweis: Ab Firefox 45 aufwärts wird die Datenspeicherung pro Ausgangspunkt auf 10MB begrenzt, um Speicherprobleme durch übermäßige Verwendung des Web storage zu vermeiden.

+
+ +
+

Hinweis: Zugang zum Web Storage von IFrames Ditter wird verweigert, wenn der Anwender Cookies Dritter deaktiviert hat (Firefox implementiert dieses Verhalten ab der version 43 aufwärts.)

+
+ +
+

Hinweis: Web Storage ist nicht dasselbe wie mozStorage (Mozillas XPCOM Schnittstelle zu SQLite) oder die Session store API (ein XPCOM Speicherprogramm, welches von Erweiterungen verwendet wird).

+
+ +

Web Storage Schnittstellen

+ +
+
{{domxref("Storage")}}
+
Erlaubt das Speichern, Abrufen und Löschen von Daten einer spezifischen Domain und des Speichertyps (session oder local).
+
{{domxref("Window")}}
+
Die Web Storage API erweitert das {{domxref("Window")}} Objekt mit zwei neuen Attributen — {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} — welche den Zugang zu den jeweiligen session- und local-Objekten der aktuellen Domain sowie eine {{domxref("Window.onstorage")}} Ereignissteuerung (event handler), welche aktiviert wird, wenn ein Speicherbereich geändert wird (z.B. bei der Speicherung eines neuen Datensatzes).
+
{{domxref("StorageEvent")}}
+
Das storage-Ereignis wird über das Window-Objekt eines (html-) Dokuments aktiviert, wenn sich ein Speicherbereich ändert.
+
+ +

Beispiele

+ +

Um einige der typischen Anwendungsfälle von Web Storage darzulegen, wurde ein einfaches Beispiel erstellt, fantasievoll als Web Storage Demo benannt. Die Startseite bietet die Möglichkeit, Farbe, Schriftart und ein dekoratives Bild zu verändern. Wenn verschiedene Optionen ausgewählt werden, wird die Seite umgehend aktualisiert. Zudem werden die ausgewählten Optionen im localStorage gespeichert, sodass diese beim Verlassen und erneutem Aufruf der Seite bestehen bleiben. 

+ +

Zudem besteht eine Ereignis-Ausgabeseite — wenn diese Seite in einem weiteren Tab geladen wird, hiernach Änderungen auf der Startseite vorgenommen werden, sind die aktualisierten Speicherinformationen zu sehen, welche durch die Aktivierung des Ereignisses {{event("StorageEvent")}} zustandekommen.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
+ +

Browser-Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Alle Browser haben variiernde Kapazitäten sowohl für das localStorage und auch das sessionStorage. Hier ist ein detailierter Ablauf aller Speicherkapazitäten verschiedener Browser zu finden.

+ +
+

Hinweis: Seit iOS 5.1, speichert Safari Mobile localStorage-Daten in den cache-Ordner, welcher gelegentlichen Speicherbereinigungen durch das OS ausgesetzt ist, welche typischerweise bei knappem Speicher auftreten.

+
+ +

Privates Surfen / Inkognito-Modus

+ +

Die meisten modernen Browser unterstützen die als "Inkognito", "Privates Surfen" o.ä. bezeichnete Datenschutz-Option, welche keine Daten wie Verlauf und Cookies speichert. Aus ersichtlichen Gründen ist dies grundsätzlich inkompatibel mit Web Storage. Nichtsdestotrotz experimentieren Browseranbieter mit verschiedenen Szenarien, um mit dieser Inkompatibilität umzugehen.

+ +

Für die meisten Browser hat man sich für eine Strategie entschieden, wobei Speicher-APIs vorhanden und scheinbar voll funktionsfähig sind, mit dem einen großen Unterschied, dass alle gespeicherten Daten gelöscht werden, nachdem der Browser geschlossen wird. Für diese Browser bestehen desweiteren unterschiedliche Interpretationen dazu, was mit den vorhandenen abgespeicherten Daten (aus einer regulären Sitzung) geschehen soll. Sollten sie zum Abruf zur Verfügung stehen, um im Inkognito-Modus gelesen werden zu können? Dann gibt es einige Browser, insbesondere Safari, welche sich dazu entschieden haben, den Speicher zur Verfügung zu stellen, dieser jedoch leer ist und ihm ein Speicheranteil von 0 Byte zugeordnet ist. Dadurch machen sie es praktisch unmöglich, Daten auf den Speicher zu schreiben.

+ +

Entwicklern sollten diese unterschiedlichen Implementierungen bewusst sein und sie sollten dies bei der Entwicklung von Webseiten, welche von den Web Storage APIs abhängen, in Betracht ziehen. Für weitere Informationen werfe man einen Blick auf diesen WHATWG Blogpost , das sich insbesondere mit diesem Thema befasst.

+ +

Siehe auch

+ +

Using the Web Storage API
+ HTML5 Storage API By Venkatraman

diff --git a/files/de/web/api/web_workers_api/index.html b/files/de/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..46dccd115d --- /dev/null +++ b/files/de/web/api/web_workers_api/index.html @@ -0,0 +1,226 @@ +--- +title: Web Worker API +slug: Web/API/Web_Workers_API +translation_of: Web/API/Web_Workers_API +--- +

{{DefaultAPISidebar("Web Workers API")}}

+ +

Web Workers ermöglichen Entwicklern Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen. Dies hat den Vorteil, dass rechenintensive Operationen in einem gesonderten Thread ausgeführt werden können und somit der Hauptthread, der für gewöhnlich das UI bereitstellt, arbeiten kann ohne verlangsamt oder blockiert zu werden.

+ +

Web Workers Konzepte und Anwendung

+ +

Ein Worker ist ein Objekt das mit einem Konstruktor erzeugt wird (beispielsweise {{domxref("Worker.Worker", "Worker()")}}) und eine JavaScript Datei mit Namen ausführt. In dieser Datei ist der Code enthalten der im Worker-Thread ausgeführt wird. Worker arbeiten in einem eigenen globalen Kontext, der vom aktuellen Hauptkontext {{domxref("window")}} verschieden ist. Dieser Kontext ist durch das Objekt  {{domxref("DedicatedWorkerGlobalScope")}}  repräsentiert, falls es sich um einen dedizierten Worker handelt (also einen Worker der nur von einem Skript genutzt wird, was der Standard ist.). Shared Workers benutzen das Objekt {{domxref("SharedWorkerGlobalScope")}}.

+ +

Man kann bis auf einige Ausnahmen beliebige Anweisungen ausführen. Beispielsweise kann man das DOM nicht direkt ändern und auch einige Standardmethoden und -attribute von {{domxref("window")}} können nicht genutzt werden. Viele andere Elemente von window können allerdings schon genutzt werden, unter anderem WebSockets und Datenspeicher, wie IndexedDB und die Firefox-OS-only Data Store API.  Unter Functions and classes available to workers finden Sie mehr Details.

+ +

Daten werden zwischen den Workern und dem Hauptthread mithilfe eines Nachrichtensystems verschickt — beide Seiten verschicken ihre Nachrichten mit der postMessage() Methode und antworten mit dem onmessage Event Handler (die empfangene Nachricht ist im data Attribut {{event("Message")}} des Events enthalten). Die Daten werden kopiert und nicht geteilt.

+ +

Worker können neue Worker erzeugen, solange diese vom selben Ursprung gehosted werden wie die Ursprungsseite.  Außerdem können Worker XMLHttpRequest für Netzwerk I/O benutzen mit der Ausnahme, dass  die responseXML und channel Attribute von XMLHttpRequest stets null zurückgeben.

+ +

Neben dedizierten Workern gibt es noch andere Typen:

+ + + +
+

Note: As per the Web workers Spec, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.

+
+ +

Web Worker interfaces

+ +
+
{{domxref("AbstractWorker")}}
+
Abstrakte Attribute und Methoden für alle Worker (z.B. {{domxref("Worker")}} oder {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Repräsentiert einen laufenden Workerthread. Erlaubt das Senden von Nachrichten an den Code im Worker.
+
{{domxref("WorkerLocation")}}
+
Definiert die absolute Quelle des Skripts das im  Worker ausgeführet wird.
+
+ +
+
{{domxref("SharedWorker")}}
+
Repräsentiert einen speziellen Worker, auf den von verschiedenen Fenstern, IFrames oder sogar Workern  zugegrifffen werden kann.
+
{{domxref("WorkerGlobalScope")}}
+
Repräsentiert den generischen Scope jedes Workers (dies entspricht dem {{domxref("Window")}} objekt für normale Webinhalte). Andere Worker haben Scopes die von diesem vererbt werden und spezifische Eigenschaften hinzufügen.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines dedizierten Workers. Fügt besondere Eigenschaften hinzu.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines  Shared Workers. Fügt besondere Eigenschaften hinzu.
+
{{domxref("WorkerNavigator")}}
+
Repräsentiert die Identität und den Zustand des User Agents (dem client).
+
+ +

Beispiele

+ +

Sie finden ein paar einfache Beispiele, die die Benutzung veranschaulichen unter diesen Links:

+ + + +

Unter Using web workers finden Sie mehr Informationen wie diese Demos funktionieren.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#workers')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}10.010.64
Shared workers4{{CompatNo}}{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Passing data using structured cloning13{{CompatVersionUnknown}}{{CompatGeckoDesktop(8)}}10.011.56
Passing data using  transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatNo}}{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[1]
+ 23		{{CompatVersionUnknown}}{{CompatGeckoDesktop(21)}}11156[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Shared workers{{CompatNo}}4{{CompatNo}}291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}4{{CompatVersionUnknown}}81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using  transferable objects{{CompatNo}}{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] As webkitURL.

+ +

Weiterführend

+ + diff --git a/files/de/web/api/webgl_api/index.html b/files/de/web/api/webgl_api/index.html new file mode 100644 index 0000000000..cd699e7ee1 --- /dev/null +++ b/files/de/web/api/webgl_api/index.html @@ -0,0 +1,258 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL + - WebGL2 +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit WebGL steht eine API zur Verfügung, die an OpenGL ES 2.0 angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.

+
+ +

WebGL steht ab Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ und Internet Explorer 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.

+ +

WebGL2 steht ab Firefox 51+, Google Chrome 56+ und Opera 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.

+ +

Das {{HTMLElement("canvas")}} Element kann auch von Canvas 2D genutzt werden, um 2D Grafiken rendern zu können.

+ +

Reference

+ +
+ +
+ +

Extensions

+ +
+ +
+ +

Events

+ + + +

Konstanten und Typen

+ + + +

Themen

+ +

Die folgenden acht Artikel bauen aufeinander auf.

+ +
+
Einführung in WebGL
+
Wie man einen WebGL-Kontext herstellt.
+
Hinzufügen von 2D Inhalten in einen WebGL-Kontext
+
Wie eine einfache, flache Form mittels WebGL erstellt wird.
+
Farben mittels Shader in einen WebGL-Kontext hinzufügen
+
Zeigt wie Farben mit Shadern auf die Form gebracht werden können.
+
Objekte mit WebGL animieren
+
Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.
+
3D-Objekte mit WebGL erstellen
+
Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).
+
Texturen in WebGL verwenden
+
Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.
+
Beleuchtung in WebGL
+
Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.
+
Animierte Texturen in WebGL
+
Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.
+
+ +

Ressourcen

+ +
+
WebGL Spezifikation
+
Der Entwurf der WebGL Spezifikation.
+
Khronos WebGL Seite
+
Die Hauptseite für WebGL der Khronos Group.
+
Learning WebGL
+
Eine Reihe von Tutorials über WebGL (Englisch).
+
Das WebGL Kochbuch
+
Rezepte für das Schreiben von WebGL-Code (Englisch).
+
Sylvester
+
Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.
+
Planet WebGL
+
Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Grundlegende Definition. Basierend auf OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Erweiterung von WebGL1. Basierend auf OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}91112[1]5.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}425[1]{{CompatNo}}12[1]8.1
+
+ +

[1] Die Implementierung dieses Features ist experimentell.

+ +

Kompatibilitätshinweise

+ +

Neben dem Browser muss auch die GPU selbst dieses Feature unterstützen. So ist zum Beispiel S3 Texture Compression (S3TC) derzeit nur auf Desktop-Rechnern und Tegra-basierenden Tablets verfügbar. Die meisten Browser stellen den {{domxref("HTMLCanvasElement.getContext", "WebGL-Context")}} durch den webgl Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen experimental-webgl.

+ +

Das kommende WebGL 2 ist vollständig abwärtskompatibel und wird über den Contextnamen experimental-webgl2 aufgerufen. Ab Firefox 42.0 ist der Aufruf auch über den Contextnamen webgl2 möglich - WebGL2 ist bis einschließlich Firefox 50 ein experimentelles Feature und kann zu Testzwecken über Flag-Settings des Konfigurationseditors aktiviert werden. WebGL2 ist ab Firefox 51+, Chrome 56+ und Opera 42+ standardmäßig aktiviert - Internet Explorer und Edge bieten derzeit noch keinen Support für WebGL2.

+ +

Anmerkungen zu Gecko

+ +

WebGL Debugging und Testing

+ +

Ab Gecko 10.0 {{geckoRelease("10.0")}} werden zwei Möglichkeiten geboten, die WebGL-Fähigkeit des Browsers zu Testzwecken zu beeinflussen:

+ +
+
webgl.min_capability_mode
+
Ein boolescher Wert, der bei true einen minimalen Kompatibiätsmodus zur Verfügung stellt. Ist dieser Modus aktiviert, wird WebGL ausschließlich mit dem geringsten Features betrieben, die von der WebGL-Spezifikation definiert wurden. Damit lässt sich sicherstellen, dass dein WebGL-Code auf jedem Gerät unabhängig besonderer Fähigkeiten lauffähig ist. Der Standarardwert ist false.
+
webgl.disable_extensions
+
Ein boolescher Wert, der bei true alle WebGL Extensions deaktiviert. Der Standarardwert ist false.
+
+ +

WebGL2 Aktivierung

+ +
+
webgl.enable-prototype-webgl2 (ab Firefox 38)
+
webgl.enable-webgl2 (ab Firefox 50)
+
Ein boolescher Wert, der bei true den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert ist false - ab Firefox 51 ist der Standardwert true.
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html new file mode 100644 index 0000000000..d3a21591fd --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html @@ -0,0 +1,126 @@ +--- +title: 3D-Objekte mit WebGL erstellen +slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

+ +

Bringen wir unser Quadrat in die dritte Dimension, indem wir fünf oder mehr Flächen hinzufügen und daraus einen Würfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt über die Vertices zur gl.drawArray() Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz für Positionen jeder Fläche zu definieren, indem wir gl.drawElements() aufrufen.

+ +

Bedenken Sie: Jede Fläche benötigt vier Vertices, die diese definieren, aber jeder Vertex wird von drei Flächen verwendet. Wir können eine Menge Daten sparen, indem wir eine Liste aller 24 Vertices erstellen und uns dann auf jeden Vertex durch dessen Index in der Liste beziehen, anstatt den gesamten Koordinatensatz zu verwenden.

+ +

Die Vertex-Positionen des Würfels definieren

+ +

Zunächst wollen wir den Positionsspeicher der Vertices erstellen, indem wir den Code in initBuffers() ändern. Das geschieht genau so wie für das Quadrat, allerdings haben wir hier ein paar Datensätze mehr, da wir 24 Vertices (4 pro Seite) haben müssen:

+ +
  var vertices = [
+    // vordere Fläche
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // hintere Fläche
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // obere Fläche
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // untere Fläche
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // rechte Fläche
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // linke Fläche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+
+ +

Die Farben der Vertices definieren

+ +

Außerdem müssen wir einen Array für die Farben der 24 Vertices erstellen. Dieser Code definiert zunächst die Farben für jede Fläche und verwendet dann eine Schleife, um jeden der Vertices mit einer Farbe zu bestücken.

+ +
  var colors = [
+    [1.0,  1.0,  1.0,  1.0],    // vordere Fläche: weiß
+    [1.0,  0.0,  0.0,  1.0],    // hintere Fläche: rot
+    [0.0,  1.0,  0.0,  1.0],    // obere Fläche: grün
+    [0.0,  0.0,  1.0,  1.0],    // untere Fläche: blau
+    [1.0,  1.0,  0.0,  1.0],    // rechte Fläche: gelb
+    [1.0,  0.0,  1.0,  1.0]     // linke Fläche: violett
+  ];
+
+  var generatedColors = [];
+
+  for (j=0; j<6; j++) {
+    var c = colors[j];
+
+    for (var i=0; i<4; i++) {
+      generatedColors = generatedColors.concat(c);
+    }
+  }
+
+  cubeVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(generatedColors), gl.STATIC_DRAW);
+
+ +

Das Element-Array definieren

+ +

Sobald die Vertex-Arrays generiert worden sind, müssen wir das Element-Array erstellen.

+ +
  cubeVerticesIndexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+  // Dieser Array definiert jede Fläche als zwei Dreiecke über die Indizes
+  // im Vertex-Array, um die Position jedes Dreiecks festzulegen.
+
+  var cubeVertexIndices = [
+    0,  1,  2,      0,  2,  3,    // vorne
+    4,  5,  6,      4,  6,  7,    // hinten
+    8,  9,  10,     8,  10, 11,   // oben
+    12, 13, 14,     12, 14, 15,   // unten
+    16, 17, 18,     16, 18, 19,   // rechts
+    20, 21, 22,     20, 22, 23    // links
+  ]
+
+  // Sende nun das Element-Array zum GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

Das cubeVertexIndices Array definiert jede Fläche als ein paar von Dreiecken, alle Vertices des Dreiecks werden als ein Index im Vertex-Array des Würfels festgelegt. Daher ist der Würfel aus einer Sammlung von 12 Dreiecken beschrieben.

+ +

Den Würfel zeichnen

+ +

Als nächstes müssen wir etwas Code zur drawScene() Funktion hinzufügen, um über den Indexspeicher des Würfels zu zeichnen. Wir fügen neue bindBuffer() und drawElements() Aufrufe hinzu:

+ +
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+  setMatrixUniforms();
+  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Da jede Seite unseres Würfels aus zwei Dreiecken besteht, gibt es 6 Vertices pro Seite, oder 36 Vertices im Würfel, obwohl einige davon doppelt sind. Da unser Index-Array jedoch aus einfachen Integern besteht, stellt dies keinen unkoordinierbaren Betrag an Daten dar, welcher für jeden Frame der Animation durchgegangen werden muss.

+ +

Jetzt haben wir einen animierten Würfel, welcher herum springt, rotiert und über sechs unterschiedliche Seiten verfügt. Wenn Ihr Browser WebGL unterstützt, schauen Sie sich hier die Demo in Aktion an.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

diff --git a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html new file mode 100644 index 0000000000..bfeb362b8e --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html @@ -0,0 +1,89 @@ +--- +title: Animierte Texturen in WebGL +slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

+ +

In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.

+ +

Zugang zum Video

+ +

Zunächst müssen wir etwas HTML hinzufügen, um das video Element zu erstellen, welches wir verwenden, um die Video-Frames zu erhalten:

+ +
<video id="video" src="Firefox.ogv" autobuffer='true'">
+  Ihr Browser scheint das HTML5 <code>&lt;video&gt;</code> Element nicht zu unterstützen.
+</video>
+
+ +

Das erstellt einfach ein Element, um die Video-Datei "Firefox.ogv" abzuspielen. Wir benutzen CSS, um zu verhindern, dass das Video angezeigt wird:

+ +
video {
+  display: none;
+}
+
+ +

Dann schenken wir dem JavaScript Code wieder unsere Aufmerksamkeit und fügen eine neue Zeile zur start() Funktion hinzu, um einen Bezug zum Video-Element herzustellen:

+ +
videoElement = document.getElementById("video");
+
+ +

Und wir ersetzen den Code, der die Intervall-gesteuerten Aufrufe von drawScene() setzt, mit diesem Code:

+ +
videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+
+ +

Die Idee ist hier, dass wir die Animation nicht starten wollen, bevor das Video nicht ausreichend zwischengespeichert wurde, sodass es dann ohne Unterbrechung abgespielt werden kann. Wir fügen also einen Event-Listener hinzu, um auf das video Element zu warten bis es uns mitteilt, dass genug zwischengespeichert wurde und das komplette Video ohne Pause abgespielt werden kann. Wir fügen außerdem einen zweiten Event-Listener hinzu, sodass wir die Animation stoppen können, wenn das Video beendet ist und wir so nicht unnötig den Prozessor belasten.

+ +

Die startVideo() Funktion sieht so aus:

+ +
function startVideo() {
+  videoElement.play();
+  videoElement.addEventListener("timeupdate", updateTexture, true);
+  setInterval(drawScene, 15);
+}
+
+ +

Hier wird einfach das Video gestartet und ein Event-Handler bereitgestellt, der aufgerufen wird, wenn ein neuer Frame des Videos verfügbar ist. Dann werden die Intervall-gesteuerten Aufrufe der drawScene() Funktion eingerichtet, um den Würfel zu rendern.

+ +

Die videoDone() Funktion ruft einfach {{ domxref("window.clearInterval") }} auf, um die Intervallaufrufe zu beenden, die die Animation aktualisieren.

+ +

Die Video-Frames als Textur verwenden

+ +

Die nächste Änderung erhält die initTexture() Funktion, welche viel einfacher wird, weil kein Bild mehr geladen werden muss. Stattdessen muss nun das Textur-Mapping aktiviert werden und ein leeres Textur-Objekt zum späteren Gebrauch erstellt werden:

+ +
function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+}
+
+ +

So sieht die updateTexture() Funktion aus. Hier wird wirklich Arbeit verrichtet:

+ +
function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

Sie kennen diesen Code bereits. Es ist fast identisch zur handleTextureLoaded() Routine im vorherigen Beispiel, mit der Ausnahme, dass wir texImage2D() nicht mit einem Image Objekt sondern mit dem video Element aufrufen.

+ +

updateTexture() wird jedes Mal aufgerufen, wenn sich das timeupdate Event vom video Element meldet. Dieses Event wird gesendet, wenn sich die Zeit des aktuellen Frames ändert, sodass wir wissen, dass wir unsere Textur nur dann aktualisieren müssen, wenn neue Daten verfügbar sind.

+ +

Das war alles! Wenn Sie eine Browser mit Unterstützung von WebGL verwenden, können Sie sich das Beispiel in Aktion ansehen.

+ +

Siehe auch

+ + + +

{{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html new file mode 100644 index 0000000000..bd65b5bb40 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html @@ -0,0 +1,172 @@ +--- +title: Beleuchtung in WebGL +slug: Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

+ +

Als Erstes sollten wir verstehen, dass WebGL nicht wie OpenGL über eine eigene Unterstützung für die Beleuchtung verfügt. Das müssen wir selbst machen. Glücklicherweise ist es nicht sehr schwer und dieser Artikel versucht Ihnen die Grundlagen dazu näher zu bringen.

+ +

Beleuchtung und Schattierung simulieren

+ +

Obwohl wir nicht weiter ins Detail über die Theorie hinter simulierter Beleuchtung in 3D Grafiken gehen wollen, was außerdem weit über diesen Artikel hinaus gehen würde, ist es gut zu wissen wie es ungefähr funktioniert. Anstatt hier nun in aller Tiefe zu diskutieren, sollten Sie einen Blick auf den »Phong Shading« Artikel auf Wikipedia werfen, welcher einen guten Überblick über das meist genutzte Beleuchtungsmodell liefert.

+ +

Es gibt drei grundlegende Typen zur Beleuchtung:

+ +

Umgebungslicht ist das Licht, das die Szene umgibt. Es weist in keine Richtung und bestrahlt jede Oberfläche in gleicher Weise, egal in welche Richtung es zeigt.

+ +

Gerichtetes Licht ist das Licht, das von einer festgelegten Richtung ausgestrahlt wird. Dieses Licht ist so weit weg, sodass sich jeder Photon parallel zu jedem anderen Photon bewegt. Sonnenlicht ist zum Beispiel gerichtetes (direktionales) Licht.

+ +

Punktbeleuchtung ist das Licht, das von einem Punkt ausgestrahlt wird und von dort radial in alle Richtungen verläuft. So funktionieren zum Beispiel die Glühbirnen im Alltag.

+ +

Für unsere Zwecke vereinfachen wir das Beleuchtungsmodell, indem wir nur gerichtetes Licht und Umgebungslicht betrachten. Wir haben hier keine Highlights, die wir mit Punktbeleuchtung oder Glanzlicht in dieser Szene hervorheben wollen. Stattdessen werden wir Umgebungslicht mit einem einzelnen, gerichteten Licht verwenden, welches auf den rotierenden Würfel aus der vorherigen Demo zeigt.

+ +

Wenn Sie die Konzepte der Punktbeleuchtung und des Glanzlichtes hinter sich gelassen haben, gibt es dennoch zwei kleine Informationen, die Sie benötigen werden, wenn wir unser gerichtetes Licht implementieren:

+ +
    +
  1. Wir müssen die Oberflächennormale mit jedem Vertex verbinden. Das ist ein Vektor, der senkrecht zur Oberfläche des Vertex ist.
    2. +
  2. Wir müssen die Richtung in welche das Licht strahlt wissen. Diese wird durch den Richtungsvektor angegeben.
    3. +
+ +

Dann aktualisieren wir den Vertex-Shader, um die Farbe jedes Vertices, unter Berücksichtigung des Umgebungslichts und dem Effekt des gerichteten Lichts (sowie dessen Winkel mit dem es auf die Oberfläche trifft), einzustellen. Wir werden sehen, wie genau wir das machen, wenn wir einen Blick auf den Code für den Shader werfen.

+ +

Die Normalen für die Vertices erstellen

+ +

Als Erstes müssen wir einen Array für die Normalen für alle Vertices erstellen, die unseren Würfel umfassen. Da ein Würfel ein sehr einfaches Objekt ist, ist dies auch sehr einfach zu erstellen. Für komplexere Objekte wird das Berechnen der Normalen schon umfassender.

+ +
  cubeVerticesNormalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+  var vertexNormals = [
+    // vorne
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // hinten
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // oben
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // unten
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // rechts
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // links
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+
+ +

Das sollte Ihnen schon bekannt vorkommen: Wir erstellen einen neuen Buffer, verknüpfen den Array damit und senden dann unseren Vertex-Normalen-Array in den Buffer, indem wir bufferData() aufrufen.

+ +

Dann fügen wir Code zu drawScene() hinzu, um das Normalen-Array mit einem Shader-Attribut zu verknüpfen, sodass der Shader-Code darauf zugreifen kann:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ +

Schließlich müssen wir den Code aktualisieren, welcher die Einheitsmatrizen erstellt, um eine Normalenmatrix zu generieren und zum Shader auszuliefern. Diese wird verwendet, um die Normalen umzuwandeln, wenn die aktuelle Orientierung des Würfels in Beziehung zur Lichtquelle behandelt wird:

+ +
  var normalMatrix = mvMatrix.inverse();
+  normalMatrix = normalMatrix.transpose();
+  var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+  gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+
+ +

Die Shader aktualisieren

+ +

Jetzt sind alle Daten, die von den Shadern gebraucht werden, verfügbar. Wir müssen nun den Code in den Shadern selbst aktualisieren.

+ +

Der Vertex-Shader

+ +

Zunächst aktualisieren wir den Vertex-Shader, sodass dieser einen Schattenwert für jeden Vertex auf Basis des Umgebungslichts sowie des direktionalen Lichts berechnet. Werfen wir einen Blick auf den Code:

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexNormal;
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uNormalMatrix;
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+
+        // Beleuchtungseffekt anwenden
+
+        vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+        vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+        vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+        vLighting = ambientLight + (directionalLightColor * directional);
+      }
+    </script>
+
+ +

Sobald die Position des Vertex berechnet wurde und wir die Koordinaten des Texels (welcher passend zum Vertex ist) erhalten haben, können wir den Schatten für den Vertex berechnen.

+ +

Als Erstes wandeln wir die Normale auf Basis der aktuellen Position und Orientierung des Würfels um, indem wir die Normale des Vertexes mit der Normalenmatrix multiplizieren. Dann können wir den Betrag an direktionalem Licht, welcher auf den Vertex angewendet werden soll, berechnen, indem wir das Skalarprodukt der umgewandelten Normalen und des direktionalen Vektors (Richtung aus der das Licht kommt) bilden. Wenn dieser Wert kleiner als Null ist, setzen wir den Wert auf Null fest, da man nicht weniger als Null Licht haben kann.

+ +

Wenn der Betrag des direktionalen Lichts berechnet wurde, können wir den Beleuchtungswert generieren, indem wir das Umgebungslicht nehmen und das Produkt der Farbe des direktionalen Lichts und den Betrag an direktionalem Licht bereitstellen. Als Ergebnis haben wir nun einen RGB-Wert, welcher vom Fragment-Shader verwendet wird, um die Farbe jedes Pixels den wir rendern einzustellen.

+ +

Der Fragment-Shader

+ +

Der Fragment-Shader muss nun aktualisiert werden, um den berechneten Beleuchtungswert vom Vertex-Shader zu berücksichtigen:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+        gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+      }
+    </script>
+
+ +

Hier erhalten wir nun die Farbe des Texels, genau so wie wir es im vorherigen Beispiel getan haben. Bevor wir die Farbe der Fragmente aber festlegen, multiplizieren wir die Texel-Farbe mit dem Beleuchtungswert, um die Texel-Farbe so einzustellen, dass diese den Effekt der Lichtquelle berücksichtigt.

+ +

Und das war's! Wenn Sie einen Browser verwenden, der WebGL unterstützt, können Sie einen Blick auf die Live-Demo werfen.

+ +

Übungen für den Leser

+ +

Dies ist natürlich ein sehr einfaches Beispiel, welches eine Beleuchtung pro Vertex implementiert. Für fortgeschrittene Grafiken, möchten Sie sicher eine Beleuchtung pro Pixel implementieren, aber dies wird Sie in die Richtung leiten.

+ +

Sie können nun also versuchen mit der Richtung der Lichtquelle zu experimentieren, die Farbe der Leuchtquelle zu ändern und so weiter.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" "b/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" new file mode 100644 index 0000000000..5906f95761 --- /dev/null +++ "b/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" @@ -0,0 +1,73 @@ +--- +title: Einführung in WebGL +slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

+ +

Mit WebGL steht eine API zur Verfügung, die auf OpenGL ES 2.0 basiert, um 3D Rendering im HTML canvas Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.

+ +

Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: Learn WebGL for 2D and 3D graphics.

+ +

DIe hier verwendeten Codebeispiele finden sich auch im webgl-examples GitHub repository.

+ +

3D Rendering vorbereiten

+ +

Um WebGL benutzen zu können, wird als erstes ein canvas Element benötigt. Der folgende HTML-Code definiert eine canvas Zeichenfläche.

+ +
<body>
+  <canvas id="glCanvas" width="640" height="480"></canvas>
+</body>
+
+ +

Vorbereitung des WebGL-Kontexts

+ +

Die main() Funktion im JavaScript Code wird aufgerufen, nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.

+ +
main();
+
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // Initialisierung des GL Kontexts
+  const gl = canvas.getContext("webgl");
+
+  // Nur fortfahren, wenn WebGL verfügbar ist und funktioniert
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
+    return;
+  }
+
+  // Setze clear color auf schwarz, vollständig sichtbar
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Lösche den color buffer mit definierter clear color
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}
+ +

Als erstes verschaffen wir uns eine Referenz zum canvas Element und speichern sie in der canvas Variable.

+ +

Sobald wir den Bezug zum canvas haben, versuchen wir einen zugehörigen  WebGLRenderingContext zu erhalten, indem wir getContext aufrufen und dabei den String "webgl" mitgeben. Falls der Browser WebGL nicht unterstützt, wird getContext null zurückgeben, woraufhin wir den Nutzer benachrichtigen und das Script verlassen.

+ +

Wenn der Kontext erfolgreich initialisiert wurde, ist gl eine Variable für den Kontext. In diesem Fall setzen wir die clear color auf schwarz, und löschen den zugehörigen Kontext (der canvas wird mit der Hintergrundfarbe neu gezeichnet)

+ +

An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}

+ +

Vollständigen Code ansehen | Demo in neuer Seite öffnen

+ +

Siehe auch

+ +

 

+ + + +

 

+ +

{{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" "b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" new file mode 100644 index 0000000000..94068822d5 --- /dev/null +++ "b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" @@ -0,0 +1,97 @@ +--- +title: Farben mittels Shader in einen WebGL-Kontext hinzufügen +slug: >- + Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

+ +

Wir haben ein simples Quadrat im vorherigen Teil erstellt, im nächsten Schritt wollen wir ein bisschen Farbe ins Spiel bringen. Dafür sind Änderungen an den Shadern erforderlich.

+ +

Farben zu den Eckpunkten hinzufügen

+ +

In der Computergrafik werden Objekte mit einer Reihe von Punkten erstellt. Jeder Punkt hat eine Position und eine Farbe. Standardmäßig werden alle anderen Pixelfarben (und alle weiteren Attribute, darunter die Position) über eine lineare Interpolation berechnet, die automatisch glatte Verläufe erstellt. Vorher hat unser Vertex-Shader keine festgelegten Farben auf die Punkte (Vertices) angewendet und der Fragment-Shader legte die feste Farbe weiß für jeden Pixel fest, sodass das gesamte Quadrat komplett weiß gezeichnet wurde.

+ +

Nun wollen wir in jeder Ecke des Quadrats einen Verlauf in einer unterschiedlichen Farbe rendern: rot, blau, grün und weiß. Als erstes sollten wir daher diese Farben in den vier Eckpunkten einrichten. Um das zu machen, müssen wir zunächst einen Array der Vertex-Farben erstellen und diesen dann in einen WebGL Buffer speichern. Das erreichen wir durch die folgenden Zeilen in unserer initBuffers() Funktion:

+ +
var colors = [
+  1.0,  1.0,  1.0,  1.0,    // weiß
+  1.0,  0.0,  0.0,  1.0,    // rot
+  0.0,  1.0,  0.0,  1.0,    // grün
+  0.0,  0.0,  1.0,  1.0     // blau
+];
+
+squareVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+ +

Dieser Code definiert zuerst einen JavaScript Array, welcher die vier Farb-Vektoren mit jeweils vier Werten für die jeweilige Farbe enthält. Dann wird ein neuer WebGL Buffer angewiesen diese Farben zu speichern und der Array wird in WebGL Floats konvertiert und im Buffer gespeichert.

+ +

Um die Farben schließlich zu verwenden, muss der der Vertex-Shader aktualisiert werden, um die entsprechende Farbe vom Farb-Buffer zu erhalten:

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec4 aVertexColor;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vColor = aVertexColor;
+  }
+</script>
+
+ +

Der wichtigste Unterschied ist hier, dass wir für jeden Punkt (Vertex) die Farbe entsprechend des Farb-Arrays setzen.

+ +

Die Fragmente mit Farben versehen

+ +

Als Erinnerung, so sah unser Fragment-Shader vorher aus:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Um nun die interpolierte Farbe für jeden Pixel aufzugreifen, müssen wir dies einfach so ändern, dass wir den Wert der vColor Variable erhalten:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_FragColor = vColor;
+  }
+</script>
+
+ +

Das ist eine sehr einfache Änderung. Anstatt des festen Wertes vorher, erhält jedes Fragment jetzt einfach die interpolierte Farbe, basierend auf der Position relativ zu den Kontenpunkten (Vertices).

+ +

Mit den Farben zeichnen

+ +

Als nächstes ist es nötig, Code zur initShaders() Routine hinzuzufügen, um das Farbattribut für das Shader-Programm zu initialisieren:

+ +
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+
+ +

Dann wird drawScene() abgeändert, um schließlich die Farben zu verwenden, wenn das Quadrat gezeichnet wird:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+
+ +

Jetzt sollten Sie das Beispiel in einem WebGL kompatiblen Browser sehen und Ihre Ausgabe sollte so wie im Bild unten gezeichnet werden (das Quadrat ist innerhalb eines schwarzen Felds zu sehen):

+ +

screenshot.png

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" "b/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" new file mode 100644 index 0000000000..56c267f394 --- /dev/null +++ "b/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" @@ -0,0 +1,238 @@ +--- +title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext +slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

+ +

Sobald der WebGL-Kontext erfolgreich erstellt wurde, können wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein Stück Code zu schreiben, um ein Quadrat zu zeichnen.

+ +

Hinweis zur deutschen Übersetzung dieses Abschnitts

+ +

Die deutsche Übersetzung bezieht sich auf ältere Version des Beispielcodes als der englische Originaltext. Der im deutschen Text beschriebene Code hat einige Probleme:

+ + + +

Um das Beispiel selber nachzuprogrammieren ist es daher empfehlenswert, auf die englische Version des Tutorials zu wechseln. Vielleicht haben Sie ja auch Lust, diese Version ins Deutsche zu übersetzen?

+ +

Beleuchtung der Szene

+ +

Das Wichtigste, das wir verstehen müssen bevor wir anfangen können, ist, dass wir, uns bereits in einer dreidimensionalen Umgebung befinden, obwohl wir nur ein zweidimensionales Objekt in diesem Beispiel rendern wollen. Das heißt, wir müssen jetzt bereits Shader einsetzen, die unsere einfache Szene beleuchten und solche erstellen, die unser Objekt zeichnen. Diese Shader werden festlegen wie unser Quadrat später beleuchtet sein wird.

+ +

Initialisierung der Shader

+ +

Shader sind durch die OpenGL ES Shading Language (pdf) spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere initShaders() Routine, welche diese Aufgabe übernimmt:

+ +
function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Erzeuge Shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Wenn die das Aufrufen der Shader fehlschlägt,
+  // gib eine Fehlermeldung aus:
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Initialisierung des Shaderprogramms nicht möglich.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+
+ +

Es werden zwei Shader in dieser Routine geladen; der Erste, der fragmentShader, wird vom script Element mit der Id "shader-fs" geladen. Der Zweite, der vertexShader, wird vom script Element mit der Id "shader-vs" geladen. Wir werden im nächsten Abschnitt noch näher auf die getShader() Funktion eingehen. Diese Routine holt sich dann die Shader aus dem DOM.

+ +

In diesem Teil erstellen wir noch das Shaderprogramm, in dem wir die Funktion createProgram() aufrufen, die beiden Shader anhängen und das Shaderprogramm verlinken. Danach wird der Zustand des LINK_STATUS Parameters überprüft, um sicher zu gehen, dass das Programm erfolgreich verlinkt wurde. Wenn das der Fall ist, aktivieren wir das neue Shaderprogramm.

+ +

Shader aus dem DOM laden

+ +

Die getShader() Routine ruft ein Shaderprogramm mit dem festgelegtem Namen aus dem DOM auf, gibt das kompilierte Shaderprogramm zurück oder ist leer, wenn nichts geladen oder kompiliert worden konnte.

+ +
function getShader(gl, id) {
+  var shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  var theSource = "";
+  var currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == 3) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+ +

Wenn das Element mit der festgelegten Id gefunden wurde, wird der Text in die Variable theSource gespeichert.

+ +
  var shader;
+
+  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+    return null;  // Unbekannter Shadertyp
+  }
+ +

Jetzt wo der Code für die Shader gelesen wurde, können wir uns die MIME Typen der Shader angucken, um festzulegen, ob es ein Vertex-Shader (MIME Typ: "x-shader/x-vertex") oder ein Fragment-Shader (MIME Typ: "x-shader/x-fragment") ist. Danach werden dann die entsprechenden Shadertypen erstellt.

+ +
  gl.shaderSource(shader, theSource);
+
+  // Kompiliere das Shaderprogramm
+
+  gl.compileShader(shader);
+
+  // Überprüfe, ob die Kompilierung erfolgreich war
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert("Es ist ein Fehler beim Kompilieren der Shader aufgetaucht: " + gl.getShaderInfoLog(shader));
+    return null;
+  }
+
+  return shader;
+}
+
+ +

Schließlich wird der Shader kompiliert. Falls ein Fehler während der Kompilierung auftritt, zeigen wir die Fehlermeldung an und geben null zurück. Andernfalls wird der kompilierte Shader zurückgegeben.

+ +

Die Shader

+ +

Nun müssen wir die eigentlichen Shaderprogramme in unser HTML schreiben. Wie genau diese Shader arbeiten, übersteigt das Ziel dieses Tutorials, wir gehen daher nur auf das Wesentliche ein.

+ +

Fragment-Shader

+ +

Jeder Pixel in einem Vieleck wird Fragment in der GL-Fachsprache genannt. Die Aufgabe des Fragment-Shaders ist es, die Farbe für jeden Pixel bereitzustellen. In unserem Fall ordnen wir einfach jedem Pixel eine weiße Farbe zu.

+ +

gl_FragColor ist eine eingebaute GL Variable, die für die Farbe des Fragments verwendet wird.

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Vertex-Shader

+ +

Der Vertex-Shader definiert die Position und Form von jedem Punkt.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+</script>
+
+ +

Das Objekt erstellen

+ +

Bevor wir unser Quadrat rendern können, müssen wir einen Puffer erstellen, der unsere Punkte enthält. Das werden wir mittels einer Funktion machen, die wir initBuffers() nennen. Wenn wir zu mehr fortgeschrittenen WebGL-Konzepten kommen, wird diese Routine vergrößert, um mehr - und komplexere - 3D-Objekte zu erstellen.

+ +
var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+
+ +

Diese Routine ist, durch die einfache Art der Szene in diesem Beispiel, sehr einfach gehalten. Es geht los mit dem Aufruf der createBuffer() Methode, die einen Puffer erstellt in dem wir die Punkte speichern können. Der Puffer wird, durch Aufrufen der bindBuffer() Methode, mit dem Kontext verbunden.

+ +

Wenn das erledigt ist, erstellen wir einen JavaScript Array, der die Koordinaten für jeden Punkt des Quadrats enthält. Dieser wird dann in einen WebGL FloatArray umgewandelt und durch die bufferData() Methode werden die Punkte für das Objekt festgelegt.

+ +

Die Szene zeichnen

+ +

Jetzt sind die Shader aufgebaut und das Objekt ist erstellt. Wir können die Szene rendern lassen. Da wir in dieser Szene nichts animieren, ist unsere drawScene() Funktion sehr einfach. Es werden einige nützliche Routinen verwendet, die wir uns kurz anschauen.

+ +
function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+ +

Als Erstes wird der Kontext auf unsere Hintergrundfarbe gesetzt und die Kameraperspektive festgelegt. Wir definieren ein Blickfeld von 45°, mit einem Höhen-/Breitenverhältnis von 640 zu 480 (die Größe unseres Canvas). Außerdem legen wir fest, dass wir nur Objekte zwischen 0.1 und 100 Einheiten gerendert haben wollen.

+ +

Dann wird die Position des Quadrats, über das Laden der ursprünglichen Position und der Verschiebung um 6 Einheiten von der Kamera weg, ermittelt. Danach, verbinden wir den Puffer des Quadrats mit dem Kontext, konfigurieren es, und zeichnen das Objekt, in dem wir die drawArrays() Methode aufrufen.

+ +

Das Ergebnis kann hier ausprobiert werden, wenn Sie einen Browser verwenden, der WebGL unterstützt.

+ +

Matrix Operationen

+ +

Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es Sylvester, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.

+ +

Die glUtils.js Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.

+ +

Zusätzlich, definiert diese Demo ein paar hilfreiche Routinen, um an diese Bibliothek für spezielle Aufgaben anzukoppeln. Was genau gemacht wird, ist kein Teil dieses Artikels, aber es gibt einige gute Referenzen zu Matrizen, die online verfügbar sind. Siehe unter Siehe auch, um ein paar aufzulisten.

+ +
function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+
+ +

Siehe auch

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

diff --git a/files/de/web/api/webgl_api/tutorial/index.html b/files/de/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..34db3f57e6 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,40 @@ +--- +title: WebGL Tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

+
+ +

This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.

+ +

Before you start

+ +

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

In diesem Tutorial

+ +
+
Einführung in WebGL
+
Wie man einen WebGL-Kontext herstellt.
+
Hinzufügen von 2D Inhalten in einen WebGL-Kontext
+
Wie eine einfache, flache Form mittels WebGL erstellt wird.
+
Farben mittels Shader in einen WebGL-Kontext hinzufügen
+
Zeigt wie Farben mit Shadern auf die Form gebracht werden können.
+
Objekte mit WebGL animieren
+
Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.
+
3D-Objekte mit WebGL erstellen
+
Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).
+
Texturen in WebGL verwenden
+
Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.
+
Beleuchtung in WebGL
+
Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.
+
Animierte Texturen in WebGL
+
Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.
+
diff --git a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html new file mode 100644 index 0000000000..a9eafed6db --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html @@ -0,0 +1,118 @@ +--- +title: Objekte mit WebGL animieren +slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

+ +

Unser Code vom vorherigen Beispiel ist bereits so konfiguriert, dass die WebGL-Szene alle 15 Millisekunden neu gezeichnet wird. Bis jetzt wird zu jeder Zeit das gleiche Bild immer neu gezeichnet. Das wollen wir nun ändern, sodass sich unser Quadrat auf der Bildfläche bewegt.

+ +

In diesem Beispiel rotieren und verschieben wir unser Quadrat in alle drei Dimensionen, sodass es schon in einem 3D Raum existieren kann (obwohl wir bisher nur ein 2D-Objekt erstellt haben).

+ +

Das Quadrat rotieren lassen

+ +

Fangen wir damit an, das Quadrat im Raum zu rotieren. Als erstes brauchen wir dazu eine Variable in welche wir die Rotation des Quadrats verfolgen können:

+ +
var squareRotation = 0.0;
+
+ +

Jetzt müssen wir die drawScene() Funktion ändern, um die aktuelle Rotation auf das Quadrat anzuwenden, wenn dies gezeichnet werden soll. Nach der Umrechnung der Startposition für das Quadrat, wenden wir eine Rotation wie diese an:

+ +
mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+
+ +

Das speichert die aktuelle Model-View Matrix und rotiert die Matrix mit dem aktuellen Wert von squareRotation um die X und Z Achsen.

+ +

Nach dem Zeichen müssen wir die Originalmatrix wiederherstellen:

+ +
mvPopMatrix();
+
+ +

Wir speichern und stellen die Originalmatrix dann wieder her, um zu verhindern, dass die Rotation auf andere Objekte angewendet wird, die wir vielleicht später noch zeichnen wollen.

+ +

Um letztendlich etwas zu animieren, brauchen wir noch ein paar Zeilen Code, welcher den Wert von squareRotation über die Zeit verändert. Dafür erstellen wir eine neue Variable, die die Zeit aufzeichnet, welche wir zuletzt animiert haben (wir nennen diese lastSquareUpdateTime), dann fügen wir den folgenden Code an das Ende der drawScene() Funktion:

+ +
var currentTime = (new Date).getTime();
+if (lastSquareUpdateTime) {
+  var delta = currentTime - lastSquareUpdateTime;
+  squareRotation += (30 * delta) / 1000.0;
+}
+lastSquareUpdateTime = currentTime;
+
+ +

Dieser Code benutzt den Betrag der Zeit, die vergangen ist, seitdem wir zum letzten Mal den Wert von squareRotation geändert haben, um festzustellen wie weit das Quadrat rotiert werden soll.

+ +

Das Quadrat bewegen

+ +

Wir können das Quadrat auch verschieben indem wir eine unterschiedliche Position berechnen lassen, bevor wir es zeichnen. Dieses Beispiel zeigt wie eine grundlegende Animation gemacht werden kann. Allerdings möchten Sie in einer echten Anwendung wohl eher etwas weniger Irrsinniges machen.

+ +

Verfolgen wir die Abstände zu jeder Achse für unsere Verschiebung in drei neuen Variablen:

+ +
var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+
+ +

Und den Betrag, welcher unsere Postion auf jeder Achse verändern soll, in diesen Variablen:

+ +
var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+
+ +

Nun können wir einfach diesen Code zum vorherigen Code, der die Rotation aktualisiert, hinzufügen:

+ +
squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+if (Math.abs(squareYOffset) > 2.5) {
+  xIncValue = -xIncValue;
+  yIncValue = -yIncValue;
+  zIncValue = -zIncValue;
+}
+
+ +

Das bringt unser Quadrat dazu seine Größe zu verändern, sich willkürlich auf der Fläche zu verschieben, sich vom Betrachter weg und zum Betrachter hin zu bewegen und das alles während das Quadrat auch noch rotiert. Das sieht dann schon eher wie ein Bildschirmschoner aus.

+ +

Wenn Ihr Browser WebGL unterstützt, ist hier das Beispiel in Aktion.

+ +

Weitere Matrixoperationen

+ +

Dieses Beispiel verwendet einige zusätzliche Matrixoperationen, darunter zwei Routinen, die die Matrizen verschieben, wiederherstellen und in einem Stack aufbewahren und eine Routine, die die Matrix um eine gewissen Anzahl von Grad rotiert:

+ +
var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+
+ +

Diese Routinen wurden von einem Beispiel ausgeliehen, welches von Vlad Vukićević geschrieben wurde.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

diff --git a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html new file mode 100644 index 0000000000..eb59417694 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html @@ -0,0 +1,159 @@ +--- +title: Texturen in WebGL verwenden +slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

+ +

Jetzt wo unser Beispielprogramm über einen rotierenden 3D-Würfel verfügt, wollen wir darauf eine Textur legen, statt der bisher verwendeten, einfachen Farben.

+ +

Texturen laden

+ +

Als Erstes müssen wir ein paar Zeilen Code hinzufügen, um die Texturen zu laden. In unserem Fall werden wir eine einzige Textur verwenden, die auf alle sechs Seiten des rotierenden Würfels gelegt wird, aber die gleiche Technik kann verwendet werden, um jede beliebig viele Texturen auf ein Objekt zu legen.

+ +

Der Code, der die Textur lädt, sieht so aus:

+ +
function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

Die Routine initTextures() aktiviert zunächst die Unterstützung von Texturen, dann wird das GL Textur-Objekt cubeTexture durch Aufruf der GL createTexture() Funktion erstellt. Um die Textur von der Bilddatei zu laden, wird dann ein Image-Objekt erstellt und in die Grafikdatei geladen, die wir als unsere Textur verwenden wollen. Die handleTextureLoaded() Callback-Routine wird ausgeführt, wenn das Bild geladen wurde.

+ +

Um schließlich die Textur zu erstellen, legen wir fest, dass die neue Textur die aktuelle Textur ist, mit welcher wir arbeiten wollen und verbinden diese mit gl.TEXTURE_2D. Danach wird das geladene Bild mit texImage2D() die Bilddaten in die Textur schreiben.

+ +

Die nächsten zwei Zeilen legen Filter für die Textur fest, die steuern, wie das Bild gefiltert wird, wenn es skaliert wird. In diesem Fall verwenden wir lineare Filter, wenn das Bild hoch skaliert wird und Mip-Mapping wenn wir herunter skalieren. Dann wird die Mip-Map generiert, indem generateMipMap() aufgerufen wird. Schließlich teilen wir WebGL mit, dass wir mit der Arbeit an der Textur fertig sind, in dem wir null mit gl.TEXTURE_2D verknüpfen.

+ +

Textur auf die Flächen legen

+ +

Nun ist die Textur geladen und bereit eingesetzt zu werden. Bevor wir die Textur aber verwenden können, müssen wir die Texturkoordinaten auf die Vertices der Flächen des Würfels legen. Das ersetzt den vorherigen Code in initBuffers(), der die Farben für jede Fläche festgelegt hat.

+ +
  cubeVerticesTextureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+  var textureCoordinates = [
+    // vorne
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // hinten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // oben
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // unten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // rechts
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // links
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+                gl.STATIC_DRAW);
+
+ +

Zuerst erstellt dieser Code einen GL-Buffer in welchen wir die Texturkoordinaten für jede Fläche speichern werden, dann verknüpfen wir diesen Buffer als das Array in welchen wir schreiben werden.

+ +

Das textureCoordinates Array definiert die Texturkoordinaten entsprechend jedem Vertex von jeder Fläche. Beachten Sie, dass die Texturkoordinaten sich im Bereich von 0.0 bis 1.0 befinden. Beim Texturmapping werden die Dimensionen von Texturen immer auf einen Bereich von 0.0 bis 1.0 normiert, egal welche Größe die Textur wirklich hat.

+ +

Sobald wir das Texturmapping-Array erstellt haben, speichern wir das Array in den Buffer, sodass GL die Daten zur Verfügung hat.

+ +

Die Shader aktualisieren

+ +

Das Shader-Programm - und der Code, der die Shader initialisiert - muss aktualisiert werden, damit die Textur anstatt der Farben verwendet wird.

+ +

Werfen wir zunächst einen Blick auf die einfache Änderung, die in initShaders() benötigt wird:

+ +
  textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+  gl.enableVertexAttribArray(textureCoordAttribute);
+
+ +

Das ersetzt den Code, der die Vertex Farbattribute enthielt, mit dem, der nun die Texturkoordinaten für jeden Vertex enthält.

+ +

Der Vertex-Shader

+ +

Als Nächstes müssen wir den Vertex-Shader ersetzen, sodass statt der Farbdaten die Texturkoordinaten abgerufen werden.

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+      }
+    </script>
+
+ +

Die wichtigste Änderung ist hier, dass anstatt die Vertex-Farbe abzurufen, die Texturkoordinaten gesetzt werden. Das gibt den Ort der Textur entsprechend zum Vertex an.

+ +

Der Fragment-Shader

+ +

Der Fragment-Shader muss in ähnlicher Weise geändert werden:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      varying vec2 vTextureCoord;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+      }
+    </script>
+
+ +

Anstatt einen Farbwert auf die Fragment-Farbe zu legen, wird die Fragment-Farbe berechnet in dem der texel (der Pixel innerhalb der Textur) abgerufen wird, der am Besten auf die Fragement-Position laut dem Sampler passt.

+ +

Zeichnen des textuierten Würfels

+ +

Die Änderungen an der drawScene() Funktion sind einfach (mit der Ausnahme, dass ich nun zur besseren Anschaulichkeit die Verschiebungen entfernt habe und der Würfel nur noch rotiert wird).

+ +

Der Code, der die Farben auf die Textur legt ist weg und wurde ersetzt:

+ +
  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+ +

GL ermöglicht 32 Textur-Register; der Erste davon ist gl.TEXTURE0. Wir verknüpfen unsere geladene Textur zu diesem Register, dann wird der Shader-Sampler uSampler gesetzt (im Shader-Program festgelegt), um die Textur zu benutzen.

+ +

Jetzt sollte der rotierende Würfel gut anzuschauen zu sein. Wenn Ihr Browser WebGL unterstützt, können Sie das Live-Beispiel ausprobieren.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webglactiveinfo/index.html b/files/de/web/api/webglactiveinfo/index.html new file mode 100644 index 0000000000..ed46e4e058 --- /dev/null +++ b/files/de/web/api/webglactiveinfo/index.html @@ -0,0 +1,129 @@ +--- +title: WebGLActiveInfo +slug: Web/API/WebGLActiveInfo +translation_of: Web/API/WebGLActiveInfo +--- +
{{APIRef("WebGL")}}
+ +

Das WebGLActiveInfo-Interface ist Teil der WebGL API und repräsentiert die Informationen der Rückgabewerte von den {{domxref("WebGLRenderingContext.getActiveAttrib()")}} und {{domxref("WebGLRenderingContext.getActiveUniform()")}} Methoden.

+ +

Eigenschaften

+ +
+
{{domxref("WebGLActiveInfo.name")}}
+
Der schreibgeschützte Name von der abgefragten Variable
+
{{domxref("WebGLActiveInfo.size")}}
+
Die schreibgeschützte Größe der abgefragten Variable
+
{{domxref("WebGLActiveInfo.type")}}
+
Der schreibgeschützte Typ der abgefragten Variable
+
+ +

Beispiele

+ +

Ein WebGLActiveInfo-Objekt wird von den folgenden Funktionen zurück gegeben:

+ + + +
WebGLActiveInfo? getActiveAttrib(WebGLProgram? program, GLuint index);
+WebGLActiveInfo? getActiveUniform(WebGLProgram? program, GLuint index);
+WebGLActiveInfo? getTransformFeedbackVarying(WebGLProgram? program, GLuint index)
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.11", "WebGLActiveInfo")}}{{Spec2('WebGL')}}Erstmalige Definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Dieses Feature ist durch eine Voreinstellung deaktiviert. Zur Aktivierung setzt man in about:config den Wert gfx.offscreencanvas.enabled auf true.

+ +

See also

+ + diff --git a/files/de/web/api/webglprogram/index.html b/files/de/web/api/webglprogram/index.html new file mode 100644 index 0000000000..3d115b5947 --- /dev/null +++ b/files/de/web/api/webglprogram/index.html @@ -0,0 +1,166 @@ +--- +title: WebGLProgram +slug: Web/API/WebGLProgram +tags: + - WebGL + - WebGLProgram +translation_of: Web/API/WebGLProgram +--- +
{{APIRef("WebGL")}}
+ +

Das WebGLProgram ist ein Teil der WebGL API und ist eine Kombination aus zwei kompilierten {{domxref("WebGLShader")}}n, bestehend aus einem Vertex-Shader und einem Fragment-Shader (beide in GLSL geschrieben). Diese werden dann zu einem benutzbaren Programm zusammen gelinkt.

+ +
var program = gl.createProgram();
+
+// Bereits existierende Shader hinzufügen
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "WebGL-Programm konnte nicht kompiliert werden. \n\n" + info;
+}
+
+ +

Für weitere Informationen über das Erstellen von vertexShader und fragmentShader, lese dir {{domxref("WebGLShader")}} durch.

+ +

Beispiele

+ +

Das Program benutzen

+ +

Hier wird zu erst der GPU mit geteilt, dass sie das Programm benutzen soll. Danach werden die benötigten Daten und Konfigurationen vorgenommen und zuletzt wird etwas auf den Bildschirm gezeichnet.

+ +
// Das Programm benutzen
+gl.useProgram(program);
+
+// Bereits existierende Attribute binden
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Ein einzelnes Dreieck zeichnen
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+ +

Das Programm löschen

+ +

Falls es bei dem Linken des Programms zu fehlern kommt oder falls du ein bereits erstelltes Programm einfach nur löschen möchtest, dann kannst du einfach {{domxref("WebGLRenderingContext.deleteProgram()")}} ausführen. Dies löscht den Speicher des gelinkten Programms.

+ +
gl.deleteProgram(program);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebGL', "#5.6", "WebGLProgram")}}{{Spec2('WebGL')}}Erstmalige Definition
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

Weiterführendes

+ + diff --git a/files/de/web/api/webglrenderingcontext/canvas/index.html b/files/de/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..4f54fd191e --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,74 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +tags: + - Schreibgeschützt + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/canvas +--- +
{{APIRef("WebGL")}}
+ +

Die Eigenschaft WebGLRenderingContext.canvas ist eine schreibgeschütze Referenz auf das {{domxref("HTMLCanvasElement")}} oder das {{domxref("OffscreenCanvas")}} Objekt, welches mit dem Context verknüpft ist. Es kann auch den Wert {{jsxref("null")}} annehmen, wenn es keinem {{HTMLElement("canvas")}} Element oder {{domxref("OffscreenCanvas")}} Objekt zugeordnet ist.

+ +

Syntax

+ +
gl.canvas;
+ +

Rückgabewert

+ +

Entweder ein {{domxref("HTMLCanvasElement")}}, ein {{domxref("OffscreenCanvas")}} Objekt oder {{jsxref("null")}}.

+ +

Beispiele

+ +

Canvas Element

+ +

Gegeben ist ein {{HTMLElement("canvas")}} Element:

+ +
<canvas id="canvas"></canvas>
+
+ +

Du kannst die Eigenschaft canvas aus dem WebGLRenderingContext auslesen um eine Referenz darauf zu erhalten.

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+
+ +

Offscreen Canvas

+ +

Beispiel des experimentellen {{domxref("OffscreenCanvas")}} Objektes.

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+gl.canvas; // OffscreenCanvas
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}{{Spec2('WebGL')}}Ursprüngliche Definition.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.WebGLRenderingContext.canvas")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html new file mode 100644 index 0000000000..0774b87631 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html @@ -0,0 +1,115 @@ +--- +title: WebGLRenderingContext.getActiveAttrib() +slug: Web/API/WebGLRenderingContext/getActiveAttrib +translation_of: Web/API/WebGLRenderingContext/getActiveAttrib +--- +
{{APIRef("WebGL")}}
+ +

Die WebGLRenderingContext.getActiveAttrib() Methode der WebGL API gibt ein {{domxref("WebGLActiveInfo")}} Objekt zurück, welches die Größe, den Typ und den Namen eines Vertex-Attributes an der gegebenen Position in einem {{domxref("WebGLProgram")}} enthält.

+ +

Syntax

+ +
WebGLActiveInfo gl.getActiveAttrib(program,index);
+
+ +

Parameter

+ +
+
program
+
Ein {{domxref("WebGLProgram")}}, welches das Vertex-Attribut enthält
+
index
+
Ein {{domxref("GLuint")}}, welcher den Index des Vertex-Attributes angibt
+
+ +

Rückgabewert

+ +

Ein {{domxref("WebGLActiveInfo")}} Objekt.

+ +

Beispiele

+ +
gl.getActiveAttrib(program, i);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebGL', "#5.14.10", "getActiveAttrib")}}{{Spec2('WebGL')}}Erstmalige Definition
{{SpecName('OpenGL ES 2.0', "glGetActiveAttrib.xml", "glGetActiveAttrib")}}{{Spec2('OpenGL ES 2.0')}}Man page der OpenGL API
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}12{{CompatGeckoDesktop("2.0")}}11{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile("2.0")}}1.0{{CompatUnknown}}128.0
+
+ +

Weiterführendes

+ + diff --git a/files/de/web/api/webglrenderingcontext/getattriblocation/index.html b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..7088f72b90 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +
{{APIRef("WebGL")}}
+ +

Die Methode WebGLRenderingContext.getAttribLocation() aus der WebGL API gibt die Position einer At­tri­but Variable innerhalb eines gegebenen {{domxref("WebGLProgram")}} zurück.

+ +

Syntax

+ +
GLint gl.getAttribLocation(program, name);
+
+ +

Parameter

+ +
+
program
+
Ein {{domxref("WebGLProgram")}} das die At­tri­but Variable enthält.
+
name
+
Ein {{domxref("DOMString")}} der den Namen des Attributes angibt, dessen Position gesucht wird.
+
+ +

Rückgabewert

+ +

Wenn gefunden, wird die Position der Variable als {{domxref("GLint")}}, andernfalls -1 zurückgegeben.

+ +

Beispiele

+ +
gl.getAttribLocation(program, 'vColor');
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}{{Spec2('WebGL')}}Ursprüngliche Definition.
{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}Hauptseite der OpenGL API.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.WebGLRenderingContext.getAttribLocation")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/webglrenderingcontext/index.html b/files/de/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..77182a3177 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/index.html @@ -0,0 +1,441 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - NeedsTranslation + - TopicStub + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +
{{APIRef("WebGL")}}
+ +

The WebGLRenderingContext interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.

+ +

To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <canvas> element, supplying "webgl" as the argument:

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

Once you have the WebGL rendering context for a canvas, you can render within it.

+ +

The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.

+ +

Constants

+ +

See the WebGL constants page.

+ +

The WebGL context

+ +

The following properties and methods provide general information and functionality to deal with the WebGL context:

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
Returns a WebGLContextAttributes object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
Returns true if the context is lost, otherwise returns false.
+
+ +

Viewing and clipping

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
Defines the scissor box.
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
Sets the viewport.
+
+ +

State information

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
Selects the active texture unit.
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
Sets the source and destination blending factors.
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
Sets both the RGB blend equation and alpha blend equation to a single equation.
+
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+
Sets the RGB blend equation and alpha blend equation separately.
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
Defines which function is used for blending pixel arithmetic.
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
Specifies the color values used when clearing color buffers.
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
Specifies the depth value used when clearing the depth buffer.
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
Specifies the stencil value used when clearing the stencil buffer.
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
Specifies whether or not front- and/or back-facing polygons can be culled.
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
Specifies a function that compares incoming pixel depth to the current depth buffer value.
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
Sets whether writing into the depth buffer is enabled or disabled.
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
+
{{domxref("WebGLRenderingContext.disable()")}}
+
Disables specific WebGL capabilities for this context.
+
{{domxref("WebGLRenderingContext.enable()")}}
+
Enables specific WebGL capabilities for this context.
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
Specifies whether polygons are front- or back-facing by setting a winding orientation.
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
Returns a value for the passed parameter name.
+
{{domxref("WebGLRenderingContext.getError()")}}
+
Returns error information.
+
{{domxref("WebGLRenderingContext.hint()")}}
+
Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
Tests whether a specific WebGL capability is enabled or not for this context.
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
Sets the line width of rasterized lines.
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
Specifies the pixel storage modes
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
Specifies the scale factors and units to calculate depth values.
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
Specifies multi-sample coverage parameters for anti-aliasing effects.
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
Sets the both front and back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
Sets the front and/or back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
Sets both the front and back-facing stencil test actions.
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
Sets the front and/or back-facing stencil test actions.
+
+ +

Buffers

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
Binds a WebGLBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
Updates buffer data.
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
Updates buffer data starting at a passed offset.
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
Creates a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
Deletes a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
Returns information about the buffer.
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
Returns a Boolean indicating if the passed buffer is valid.
+
+ +

Framebuffers

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
Binds a WebGLFrameBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
Returns the status of the framebuffer.
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
Creates a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
Deletes a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
Attaches a WebGLRenderingBuffer object to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
Attaches a textures image to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
Returns information about the framebuffer.
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
Returns a Boolean indicating if the passed WebGLFrameBuffer object is valid.
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
Reads a block of pixels from the WebGLFrameBuffer.
+
+ +

Renderbuffers

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
Binds a WebGLRenderBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
Creates a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
Deletes a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
Returns information about the renderbuffer.
+
{{domxref("WebGLRenderingContext.isRenderbuffer()")}}
+
Returns a Boolean indicating if the passed WebGLRenderingBuffer is valid.
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
Creates a renderbuffer data store.
+
+ +

Textures

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
Binds a WebGLTexture object to a given target.
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
Specifies a 2D texture image in a compressed format.
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
Specifies a 2D texture sub-image in a compressed format.
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
Copies a 2D texture image.
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
Copies a 2D texture sub-image.
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
Creates a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
Deletes a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
Generates a set of mipmaps for a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
Returns information about the texture.
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
Returns a Boolean indicating if the passed WebGLTexture is valid.
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
Specifies a 2D texture image.
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
Updates a sub-rectangle of the current WebGLTexture.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+
Sets texture parameters.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+
Sets texture parameters.
+
+ +

Programs and shaders

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
Attaches a WebGLShader to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
Binds a generic vertex index to a named attribute variable.
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
Compiles a WebGLShader.
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
Creates a WebGLProgram.
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
Creates a WebGLShader.
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
Deletes a WebGLProgram.
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
Deletes a WebGLShader.
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
Detaches a WebGLShader.
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
Returns a list of WebGLShader objects attached to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
Returns information about the program.
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
Returns the information log for a WebGLProgram object.
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
Returns information about the shader.
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
Returns a WebGLShaderPrecisionFormat object describing the precision for the numeric format of the shader.
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
Returns the information log for a WebGLShader object.
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
Returns the source code of a WebGLShader as a string.
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
Returns a Boolean indicating if the passed WebGLProgram is valid.
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
Returns a Boolean indicating if the passed WebGLShader is valid.
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
Links the passed WebGLProgram object.
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
Sets the source code in a WebGLShader.
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
Uses the specified WebGLProgram as part the current rendering state.
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
Validates a WebGLProgram.
+
+ +

Uniforms and attributes

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
Disables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
Enables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
Returns information about an active attribute variable.
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
Returns information about an active uniform variable.
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
Returns the location of an attribute variable.
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
Returns the value of a uniform variable at a given location.
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
Returns the location of a uniform variable.
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
Returns information about a vertex attribute at a given position.
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
Returns the address of a given vertex attribute.
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
Specifies a value for a uniform variable.
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
Specifies a matrix value for a uniform variable.
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
Specifies a value for a generic vertex attribute.
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
Specifies the data formats and locations of vertex attributes in a vertex attributes array.
+
+ +

Drawing buffers

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
Clears specified buffers to preset values.
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
Renders primitives from array data.
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
Renders primitives from element array data.
+
{{domxref("WebGLRenderingContext.finish()")}}
+
Blocks execution until all previously called commands are finished.
+
{{domxref("WebGLRenderingContext.flush()")}}
+
Empties different buffer commands, causing all commands to be executed as quickly as possible.
+
+ +

Working with extensions

+ +

These methods manage WebGL extensions:

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
Returns an extension object.
+
+ +

Examples

+ +

WebGL context feature detection

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

Effect of canvas size on rendering with WebGL

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}20{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}1.0{{CompatUnknown}}128.0
Available in workers{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

See also

+ + diff --git a/files/de/web/api/websocket/binarytype/index.html b/files/de/web/api/websocket/binarytype/index.html new file mode 100644 index 0000000000..da69c1ec8c --- /dev/null +++ b/files/de/web/api/websocket/binarytype/index.html @@ -0,0 +1,56 @@ +--- +title: WebSocket.binaryType +slug: Web/API/WebSocket/binaryType +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/binaryType +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.binaryType gibt den Typ von Binärdaten zurück, der übertragen wird.

+ +

Syntax

+ +
var binaryType = aWebSocket.binaryType;
+ +

Wert

+ +

Ein {{DOMXref("DOMString")}}:

+ +
+
"blob"
+
Wenn {{domxref("Blob")}} Objekte benutzt werden.
+
"arraybuffer"
+
Wenn {{jsxref("ArrayBuffer")}} Objekte benutzt werden. + +
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.binaryType")}}

diff --git a/files/de/web/api/websocket/close/index.html b/files/de/web/api/websocket/close/index.html new file mode 100644 index 0000000000..9aec5890d0 --- /dev/null +++ b/files/de/web/api/websocket/close/index.html @@ -0,0 +1,64 @@ +--- +title: WebSocket.close() +slug: Web/API/WebSocket/close +tags: + - API + - Funktion + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/close +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Funktion WebSocket.close() beendet eine {{domxref("WebSocket")}} Verbindung oder den Versuch eines Verbindungsaufbaus. Wenn diese schon geschlossen ist, passiert nichts weiter.

+ +

Syntax

+ +
WebSocket.close();
+ +

Parameter

+ +
+
code {{optional_inline}}
+
Ein numerisch Wert, der den Status angibt, warum die Verbindung geschlossen wird. Wird kein Wert spezifiziert, . Zur Referenz kann diese Liste mit Codes des {{domxref("CloseEvent")}}s für gültige Werte genommen werden.
+
reason {{optional_inline}}
+
Ein lesbarer Text, welcher erklärt, warum die Verbindung geschlossen wird. Dieser muss UTF-8 kodiert und darf nicht länger als 123 Bytes sein.
+
+ +

Fehler

+ +
+
INVALID_ACCESS_ERR
+
Ein ungültiger code wurde angegeben.
+
SYNTAX_ERR
+
Der reason Text ist zu lang oder enthält ungültige Zeichen.
+
+ +
+

Note: In Gecko unterstützte diese Funktion bis zu Version 8.0 {{geckoRelease("8.0")}} keine Parameter.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
HTML Living Standard
+ The definition of 'WebSocket.close()' in that specification.		Living StandardInitial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.close")}}

diff --git a/files/de/web/api/websocket/extensions/index.html b/files/de/web/api/websocket/extensions/index.html new file mode 100644 index 0000000000..bbc5d722c4 --- /dev/null +++ b/files/de/web/api/websocket/extensions/index.html @@ -0,0 +1,49 @@ +--- +title: WebSocket.extensions +slug: Web/API/WebSocket/extensions +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/extensions +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.extensions gibt die Erweiterungen des Servers zurück. Sie ist nur lesbar.

+ +

Syntax

+ +
var extensions = aWebSocket.extensions;
+ +

Wert

+ +

Ein {{domxref("DOMString")}}.

+ +

Momentan ist dies entweder ein leerer String oder eine Liste an Erweiterungen, welche zwischen dem Server und dem Client ausgehandelt wurden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.extensions")}}

diff --git a/files/de/web/api/websocket/index.html b/files/de/web/api/websocket/index.html new file mode 100644 index 0000000000..641c788179 --- /dev/null +++ b/files/de/web/api/websocket/index.html @@ -0,0 +1,314 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +

{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}

+ +

Das WebSocket-Objekt bietet die API für das Erstellen und Verwalten einer WebSocket-Verbindung zu einem Server, ebenso dient es auch dem Senden und dem Empfangen von Daten auf der Verbindung.

+ +

Der WebSocket-Konstruktor akzeptiert einen benötigten und einen optionalen Parameter:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +
+
url
+
Die URL mit der sich das WebSocket verbinden soll; dies sollte die URL sein, auf welcher der WebSocket Server antworten wird.
+
protocols {{ optional_inline() }}
+
Entweder ein einzelnes Protokol als String oder ein Array aus Protokol-Strings. Diese Strings werden genutzt um Sub-Protokolle zu indizieren, sodass ein einzelner Server mehrere WebSocket Sub-Protokolle implementieren kann (Beispielsweiße kann ein Server abhängig vom protocol verschiedene Interaktionen mit dem Client handeln). Falls du kein Protokoll angibst, wird ein leerer String verwendet.
+
+ +

Der Konstruktur kann folgende Exceptions werfen:

+ +
+
SECURITY_ERR
+
Der Port auf dem man die Verbindung aufbauen will, ist blockiert worden.
+
+ +
+
+ +

Methoden Übersicht

+ + + + + + + + + + +
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
+ +

Attribute

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTypBeschreibung
binaryType{{ DOMXref("DOMString") }}Ein String indiziert den Typ der Binärdaten, die von der Verbindung übertragen werden. Dies sollte entweder "blob" sein, falls DOM-Objekte {{ domxref("Blob") }} genutzt werden oder "arraybuffer" falls ArrayBuffer-Objekte genutzt werden.
bufferedAmountunsigned longDie Anzahl der Bytes der Daten, welche bereits durch Aufrufe von {{ manch("send") }} gebuffert wurden, allerdings noch nicht über das Netzwerk versand wurden. Dieses Feld setzt sich nicht auf Null zurück, wenn die Verbindung beendet wurde; falls du weiterhin {{ manch("send") }} aufrufst, wird dieses Feld weiterhin ansteigen. Read only.
extensions{{ DOMXref("DOMString") }}Die Erweiterungen, die von dem Server gewählt wurden. Aktuell ist dies nur ein leerer String oder eine Liste von Erweiterungen, die von der Verbindung verhandelt wurden.
onclose{{ domxref("EventListener") }}Ein Event-Listener welcher aufgerufen wird, wenn der readyState der WebSocket-Verbindung auf CLOSED wechselt. Den Listener erreicht ein CloseEvent welches "close" heißt.
onerror{{ domxref("EventListener") }}Ein Event-Listener welcher bei Fehlern aufgerufen wird. Dies ist ein einfaches Event welches "error" genannt wird.
onmessage{{ domxref("EventListener") }}Ein Event-Listener welcher aufgerufen wird, wenn eine Nachricht vom Server empfangen wird. Den Listener erreicht ein MessageEvent welches "message" heißt.
onopen{{ domxref("EventListener") }}Ein Event-Listener welcher aufgerufen wird, wenn der readyState der WebSocket-Verbindung auf OPEN wechselt; dies indiziert, dass die Verbindung bereit ist, dass man Daten versenden und empfangen kann. Dieses Event ist eine einfaches Event, es heißt "open".
protocol{{ DOMXref("DOMString") }}Ein String welcher dne Namen des Sub-Protokolls nennt, welches vom Server ausgewählt wurde; dieses Protokoll wird eines sein, welches in den Strings des protocols-Parameter beim Erstellen des WebSocket-Objekt angegeben wurde.
readyStateunsigned shortDer aktuelle Status der Verbindung; dies ist einer der {{ anch("Ready state Konstanten") }}. Read only.
url{{ DOMXref("DOMString") }}Die URL welche beim Konstruktor angegeben wurde. Dies ist immer die absolute URL. Read only.
+ +

Konstanten

+ +

Ready state Konstanten

+ +

Diese Konstanten werden vom readyState Attribut genutzt, um den Status der WebSocket-Verbindung zu beschreiben.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KonstanteInhaltBeschreibung
CONNECTING0Die Verbindung ist noch nicht hergestellt.
OPEN1Die Verbindung ist hergestellt und bereit darüber zu kommunizieren.
CLOSING2Die Verbindung ist im Prozess des Schließens.
CLOSED3Die Verbindung ist geschlossen oder konnte nicht hergestellt werden.
+ +

Methoden

+ +

close()

+ +

Schließt die WebSocket-Verbindung oder den Verbindungsversuch, falls dieser gerade existiert. Falls die Verbindung bereits CLOSED ist, macht diese Methode überhaupt nichts.

+ +
void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+
+ +
Parameter
+ +
+
code {{ optional_inline() }}
+
Eine Nummer welche den Status-Code setzt, warum die Verbindung geschlossen wird. Falls dieser Parameter nicht gesetzt wird, wird er auf 1005 (welcher bei einer normalen Verbindung "Keinen Status erhalten" bedeutet) gesetzt.
+
reason {{ optional_inline() }}
+
Ein vom Menschen lesbarer String, welcher erklärt, warum die Verbindung geschlossen wurde. Dieser Text darf nicht länger als 123 Bytes UTF-8-Text sein. Dabei heißt dies nicht unbedingt, dass es auch 123 Zeichen sind.
+
+ +
Exceptions thrown
+ +
+
INVALID_ACCESS_ERR
+
Ein ungültiger code wurde gesetzt.
+
SYNTAX_ERR
+
Der reason-String ist zu lang oder enthält ungültige Zeichen.
+
+ +
Notizen
+ +

In Gecko vor Version Gecko 8.0 unterstützte diese Methode überhaupt keine Parameter. {{ geckoRelease("8.0") }}.

+ +

send()

+ +

Überträgt Daten zu dem Server über die WebSocket-Verbindung.

+ +
void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+
+ +
Parameter
+ +
+
data
+
Ein String der zum Server geschickt wird.
+
+ +
Exceptions thrown
+ +
+
INVALID_STATE_ERR
+
Die Verbindung hat aktuell nicht den Status OPEN.
+
SYNTAX_ERR
+
data enthält ungültige Zeichen.
+
+ +
Erläuterung
+ +
+

Notiz: Geckos Implementierung von der send() Methode unterscheidet sich ein wenig von der Spezifikation in {{Gecko("6.0")}}; Gecko gibt einen boolean zurück, welcher darüber auskunft gibt, ob die Verbindung immer noch hergestellt ist oder nicht (und, durch Erweiterung, dass die Daten erfolgreich gesammelt oder übertragen wurden); dies wurde in {{Gecko("8.0")}} korrigiert.

+ +

In {{Gecko("11.0")}} ist die Unterstützung für  ArrayBuffer implementiert aber nicht die für {{ domxref("Blob") }} Datentypen.

+
+ +

Weiterführendes

+ + + +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
Sub-protocol support{{ CompatUnknown() }}{{ CompatGeckoDesktop("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("7.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Sub-protocol support{{ CompatUnknown() }}{{ CompatGeckoMobile("7.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Gecko Notizen

+ +

In Gecko 6.0 ist der Konstruktur mit einem Prefix ausgestattet; du must MozWebSocket() benutzen:

+ +
var mySocket = new MozWebSocket("http://www.example.com/socketserver");
+
+ +

Das extensions-Attribut wurde bis Gecko 8.0 nicht unterstützt.

+ +
Notiz: Vor {{Gecko("11.0")}} ausgehende Nachrichten welche mit der {{ manch("send") }} Methode versendet wurden, waren auf 16 MB begrenzt. Jetzt können sie bis zu 2 GB wachsen.
+ +

{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}

diff --git a/files/de/web/api/websocket/onclose/index.html b/files/de/web/api/websocket/onclose/index.html new file mode 100644 index 0000000000..9e112fb499 --- /dev/null +++ b/files/de/web/api/websocket/onclose/index.html @@ -0,0 +1,45 @@ +--- +title: WebSocket.onclose +slug: Web/API/WebSocket/onclose +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/onclose +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.onclose ist ein {{domxref("EventHandler")}}, der aufgerufen wird, wenn die Eigenschaft {{domxref("WebSocket.readyState","WebSocket.readyState")}} zu {{domxref("WebSocket.readyState","CLOSED")}} geändert bzw. die Verbindung geschlossen wird.

+ +

Als Parameter übergeben wird ein {{domxref("CloseEvent")}}.

+ +

Syntax

+ +
aWebSocket.onclose = function(event) {
+  console.log("WebSocket is closed now.");
+};
+ +

Wert

+ +

Ein {{domxref("EventListener")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}{{Spec2('HTML WHATWG')}}Initial definition
diff --git a/files/de/web/api/websocket/protocol/index.html b/files/de/web/api/websocket/protocol/index.html new file mode 100644 index 0000000000..ca76edd3a2 --- /dev/null +++ b/files/de/web/api/websocket/protocol/index.html @@ -0,0 +1,51 @@ +--- +title: WebSocket.protocol +slug: Web/API/WebSocket/protocol +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/protocol +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.protocol gibt den Namen des Unterprotokolls zurück, welches der Server ausgewählt hat. Sie ist nur lesbar.

+ +

Syntax

+ +
var protocol = aWebSocket.protocol;
+ +

Wert

+ +

A DOMString.

+ +

Entweder ist der String leer, oder enthält den Namen eines der Protokolle, welche im {{domxref("WebSocket")}} Konstruktor mit dem Parameter protocols übergeben wurden.

+ +

Siehe hier.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.protocol")}}

diff --git a/files/de/web/api/websocket/readystate/index.html b/files/de/web/api/websocket/readystate/index.html new file mode 100644 index 0000000000..9abc994d65 --- /dev/null +++ b/files/de/web/api/websocket/readystate/index.html @@ -0,0 +1,77 @@ +--- +title: WebSocket.readyState +slug: Web/API/WebSocket/readyState +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/readyState +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.readyState gibt den momentanen Status einer {{domxref("WebSocket")}} Verbindung zurück. Sie ist nur lesbar.

+ +

Syntax

+ +
var readyState = aWebSocket.readyState;
+ +

Werte

+ +

Einer der folgenden Werte kann vorhanden sein:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertStatusBeschreibung
0CONNECTINGDer Socket wurde erstellt, jedoch besteht noch keine Verbindung.
1OPENEine Verbindung wurde hergestellt und kann zur Kommunikation genutzt werden.
2CLOSINGDie Verbindung wird beendet.
3CLOSEDDie Verbindung wurde geschlossen oder konnte nicht geöffnet werden.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.readyState")}}

diff --git a/files/de/web/api/websocket/url/index.html b/files/de/web/api/websocket/url/index.html new file mode 100644 index 0000000000..56e0852dea --- /dev/null +++ b/files/de/web/api/websocket/url/index.html @@ -0,0 +1,47 @@ +--- +title: WebSocket.url +slug: Web/API/WebSocket/url +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/url +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.url gibt die absolute URL eines {{domxref("WebSocket")}} zurück, wie sie im Konstruktor angegeben wurde. Sie ist nur lesbar.

+ +

Syntax

+ +
var url = aWebSocket.url;
+ +

Wert

+ +

Ein DOMString.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.url")}}

diff --git a/files/de/web/api/webxr_device_api/index.html b/files/de/web/api/webxr_device_api/index.html new file mode 100644 index 0000000000..69e10d7d3b --- /dev/null +++ b/files/de/web/api/webxr_device_api/index.html @@ -0,0 +1,298 @@ +--- +title: WebXR-Geräte-API +slug: Web/API/WebXR_Device_API +translation_of: Web/API/WebXR_Device_API +--- +

{{APIRef("WebXR Device API")}}{{Draft}}

+ +

WebXR ist eine Gruppe von Standards, die zusammen verwendet werden, um das Rendern von 3D-Szenen auf Hardware zu unterstützen, die für die Darstellung virtueller Welten(Virtuelle Realitätoder VR )entwickelt wurde, oder um der realen Welt grafische Bilder hinzuzufügen (Augmented Realityoder AR). Die WebXR-Geräte-API implementiert den Kern des WebXR-Feature-Sets, verwaltet die Auswahl von Ausgabegeräten, rendert die 3D-Szene mit der entsprechenden Bildrate auf das ausgewählte Gerät und verwaltet Bewegungsvektoren, die mit Eingabecontrollern erstellt wurden.

+ +

WebXR-kompatible Geräte umfassen vollständig immersive 3D-Headsets mit Bewegungs- und Orientierungsverfolgung, Brillen, die Grafiken über der realen Szene überlagern, die durch die Rahmen gehen, und Handheld-Handys, die die Realität erweitern, indem sie die Welt mit einer Kamera erfassen und diese Szene mit computergenerierten Bildern ergänzen.

+ +

Um dies zu erreichen, bietet die WebXR-Geräte-API die folgenden Schlüsselfunktionen:

+ + + +

Auf der grundlegendsten Ebene wird eine Szene in 3D dargestellt, indem die Perspektive berechnet wird, die auf die Szene angewendet werden soll, um sie aus der Sicht jedes benutzerischen Augen zu rendern, wobei der typische Abstand zwischen den Augen berücksichtigt wird, und dann die Szene zweimal, einmal für jedes Auge, gerendert wird. Die resultierenden Bilder (oder Bilder, wenn die Szene zweimal auf einem einzigen Frame gerendert wird, die Hälfte pro Auge) werden dann dem Benutzer angezeigt.

+ +

Da WebGL zum Rendern der 3D-Welt in die WebXR-Sitzung verwendet wird, sollten Sie zunächst mit der allgemeinen Verwendung von WebGL und mit den Grundlagen der 3D-Grafik im Allgemeinen vertraut sein. Sie verwenden höchstwahrscheinlich nicht direkt die WebGL-API, sondern eines der Frameworks oder Bibliotheken, die auf WebGL erstellt werden, um die Verwendung zu erleichtern. Zu den beliebtesten von ihnen ist three.js.

+ +

Ein besonderer Vorteil der Verwendung einer Bibliothek anstelle der direkten Verwendung der WebGL-API besteht darin, dass Bibliotheken dazu neigen, virtuelle Kamerafunktionen zu implementieren. OpenGL (und damit WebGL durch Erweiterung) bietet nicht direkt eine Kameraansicht, mit einer Bibliothek, die eine in Ihrem Namen simuliert kann Ihre Arbeit viel, viel einfacher machen, vor allem beim Erstellen von Code, die freie Bewegung durch Ihre virtuelle Welt ermöglicht.

+ +

Wichtige Gesundheits- und Sicherheitshinweise

+ +

Da der gesamte Akt der Schaffung einer virtuellen 3D-Welt im Wesentlichen ein Trick ist, der unser Verständnis davon nutzt, wie Augen Licht sammeln und wie das Gehirn die gesammelten Daten interpretiert, ist es wichtig zu bedenken, dass Software-Designer und Entwickler als solche die Verantwortung haben, noch vorsichtiger als üblich zu sein, um sicherzustellen, dass die Ergebnisse korrekt sind.

+ +

Defekte, Fehlstellungen oder Verzerrungen können die Augen und das Gehirn verwirren, was zu allem von schmerzenden Augen oder Kopfschmerzen bis hin zu schwindelerregendem Schwindel, Schwindel oder potenziell schwerer Übelkeit führt. Es ist auch wichtig, wachsam zu sein für alles, was Sie anzeigen können, die das Potenzial haben können, Anfälle auszulösen, angesichts der allumfassenden Natur der VR-Brille; Der Benutzer ist möglicherweise nicht in der Lage, schnell von den Bildern wegzuschauen, die Sie präsentieren, wenn es Zuflucht verursacht.

+ +

Wenn Sie Inhalte haben, die für Benutzer von Gefahr sein können, sollten Sie eine Warnmeldung bereitstellen. Besser sicher sein als entschuldigung!

+ +

WebXR Device API-Konzepte und -Nutzung

+ +

WebXR: AR and VR

+ +
+
Example WebXR hardware setup
+Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"
+ +

While the older WebVR API was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.

+ +

A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.

+ +

The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.

+ +

WebXR application lifecycle

+ +

Most applications using WebXR will follow a similar overall design pattern:

+ +
    +
  1. Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide. +
      +
    1. Make sure the WebXR API is available; if {{domxref("navigator.xr")}} is undefined, you can assume the user's browser and/or device doesn't support WebXR. If it's not supported, disable any user interface used to activate XR features and abort any attempts to enter XR mode.
      2. +
    2. Call {{DOMxRef("XR.isSessionSupported","navigator.xr.isSessionSupported()")}}, specifying the WebXR experience mode you want to provide: , , or , in order to determine whether or not the type of session you wish to provide is available.inlineimmersive-vrimmersive-ar
      3. +
    3. If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.
      4. +
    +
    2. +
  2. When the user requests the activation of WebXR functionality by engaging with the user interface enabled above, request an {{DOMxRef("XRSession")}} using the desired mode. This is done by calling {{DOMxRef("XR.requestSession","navigator.xr.requestSession()")}}, again specifying the string indicating the mode you want to enable: , , or .inlineimmersive-vrimmersive-ar
    3. +
  3. If the promise returned by  resolves, use the new {{domxref("XRSession")}} to run the frame loop for the entire duration of the WebXR experience.requestSession() +
      +
    1. Call the {{domxref("XRSession")}} method {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} to schedule the first frame render for the XR device.
      2. +
    2. Each  callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.requestAnimationFrame()
      3. +
    3. Keep calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} from within the callback to schedule each successive frame to be rendered.
      4. +
    +
    4. +
  4. When the time comes, end the XR session; otherwise, continue the loop until the user chooses to exit XR mode. +
      +
    1. To end the XR session yourself, call {{DOMxRef("XRSession.end", "XRSession.end()")}}.
      2. +
    2. Include a handler for the {{domxref("XRSession")}} event {{domxref("XRSession.end_event", "end")}} event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.
      3. +
    +
    5. +
+ +

Permissions and security

+ +

The WebXR Device API is subject to a number of permission and security controls. While not onerous, they are worth being aware of. These mostly revolve around the fully-immersive  session mode, but there are things to be aware of when setting up an AR session, as well.immersive-vr

+ +

Immersive presentation of VR

+ +

First, any requests to activate the  mode are rejected if the domain issuing the request does not have permission to enable an immersive session. This permission comes from the  feature policy.immersive-vrxr-spatial-tracking

+ +

Once that check is passed, the request to enter mode is allowed if all of the following are true:immersive-vr

+ + + +

If all of that is true, the promise returned by  is resolved, and the new {{domxref("XRSession")}} object is passed into the fulfillment handler. Otherwise, an appropriate exception is thrown, such as  if the document doesn't have permission to enter immersive mode.requestSession()SecurityError

+ +

Inline presentation

+ +

When you request an {{domxref("XRSession")}} with the mode set to , and any features are required or requested, the browser will only allow the session to be created if the call to {{domxref("XR.requestSession", "requestSession()")}} was made by code which is executing expressly due to user intent.inline

+ +

Specifically:

+ + + +
+

Note: Additional requirements may be put into effect due to the specific features requested by the options object when calling .requestSession()

+
+ +

User intent

+ +

User intent is the concept of whether or not an action being performed by code is being performed because of something the user intends to do or not. There are two kinds of user intent: implicit and explicit.

+ +

Explicit user intent (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action.

+ +

Implicit user intent (implicit user consent) is assumed if either of the following scenarios is the case:

+ + + +

WebXR availability

+ +

As a new and still in development API, WebXR support is limited to specific devices and browsers; and even on those, it may not be enabled by default. There may be options available to allow you to experiment with WebXR even if you don't have a compatible system, however.

+ +

WebXR polyfill

+ +

The team designing the WebXR specification has published a WebXR polyfill which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older WebVR API, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.

+ +

The polyfill is maintained alongside the specification, and is kept up to date with the specification. Additionally, it is updated to maintain compatibility with browsers as their support for WebXR and other technologies related to it and to the implementation of the polyfill change over time.

+ +

Be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer JavaScript features your target browsers include.

+ +

WebXR API Emulator extension

+ +

The Mozilla WebXR team has created a WebXR API Emulator browser extension, compatible with both Firefox and Chrome, which emulates the WebXR API, simulating a variety of compatible devices such as the HTC Vive, the Oculus Go and Oculus Quest, Samsung Gear, and Google Cardboard. With the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.

+ +
Emulator usage
+ +

While somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer WebXR code on a desktop computer, where WebXR isn't normally available. It also lets you perform some basic testing before taking your code to a real device. Be aware, however, that the emulator does not yet completely emulate all of the WebXR API, so you may run into problems you're not expecting. Again, carefully read the readme file and make sure you're aware of the limitations before you begin.

+ +
+

Important: You should always test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices.

+
+ +
Getting the extension
+ +

Download the WebXR API Emulator for your supported browser below:

+ + + +

The source code for the extension is also available on GitHub.

+ +
Emulator issues and notes
+ +

While this isn't the place for a full article about the extension, there are some specific things worth mentioning.

+ +

Version 0.4.0 of the extension was announced on March 26, 2020. It introduced support for augmented reality (AR) through the WebXR AR Module, which has is approaching a stable state. Documentation for AR is forthcoming shortly here on MDN.

+ +

Other improvements include updating the emulator to rename the  interface to {{domxref("XRSystem")}}, introduce support for squeeze (grip) input sources, and add support for the {{domxref("XRInputSource")}} property {{domxref("XRInputSource.profiles", "profiles")}}.XR

+ +

Accessing the WebXR API

+ +

To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property.

+ +
+
{{domxref("navigator.xr")}} {{ReadOnlyInline}}
+
This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XR")}} object through which the WebXR API is exposed. If this property is missing or , WebXR is not available.null
+
+ +

WebXR interfaces

+ +
+
{{DOMxRef("XR")}}
+
The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XR")}}, which is the mechanism by which your code accesses the WebXR API. Using the  interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.XR
+
{{DOMxRef("XRFrame")}}
+
While presenting an XR session, the state of all tracked objects which make up the session are represented by an . To get an , call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the  once available. Events which communicate tracking states will also use  to contain that information.XRFrameXRFrameXRFrameXRFrame
+
{{DOMxRef("XRRenderState")}}
+
Provides a set of configurable properties which change how the imagery output by an  is composited.XRSession
+
{{DOMxRef("XRSession")}}
+
Provides the interface for interacting with XR hardware. Once an  is obtained from {{domxref("XR.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.XRSession
+
{{DOMxRef("XRSpace")}}
+
XRSpace is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular  at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.XRSpace
+
{{DOMxRef("XRReferenceSpace")}}
+
A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The  coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.XRReferenceSpace
+
{{DOMxRef("XRBoundedReferenceSpace")}}
+
XRBoundedReferenceSpace extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike , the origin must be located on the floor (that is, y = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.XRReferenceSpace
+
{{DOMxRef("XRView")}}
+
Represents a single view into the XR scene for a particular frame. Each  corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.XRView
+
{{DOMxRef("XRViewport")}}
+
Describes a viewport. A viewport is a rectangular portion of a graphic surface.
+
{{DOMxRef("XRRigidTransform")}}
+
A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.
+
{{DOMxRef("XRPose")}}
+
Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.
+
{{DOMxRef("XRViewerPose")}}
+
Based on {{domxref("XRPose")}},  specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.XRViewerPose
+
{{DOMxRef("XRInputSource")}}
+
Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as  instances.XRInputSource
+
{{DOMxRef("XRWebGLLayer")}}
+
A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.
+
+ +

Event interfaces

+ +

The following interfaces are used to represent the events used by the WebXR API.

+ +
+
{{domxref("XRInputSourceEvent")}}
+
Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.
+
{{domxref("XRInputSourcesChangeEvent")}}
+
Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.
+
{{domxref("XRReferenceSpaceEvent")}}
+
Sent when the state of an {{domxref("XRReferenceSpace")}} changes.
+
{{domxref("XRSessionEvent")}}
+
Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient
+
+ +

Extensions to the WebGL API

+ +

The WebGL API is extended by the WebXR specification to augment the WebGL context to allow it to be used to render views for display by a WebXR device.

+ +
+
{{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}
+
Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to , you must call  prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.truemakeXRCompatible()
+
+ +

Guides and tutorials

+ +

The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.

+ +
+
Fundamentals of WebXR
+
Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.
+
Matrix math for the web
+
A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.
+
Setting up and shutting down a WebXR session
+
Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.
+
Permissions and security for WebXR
+
The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.
+
Geometry and reference spaces in WebXR
+
In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.
+
Spatial tracking in WebXR
+
This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.
+
Rendering and the WebXR frame loop
+
Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.
+
Viewpoints and viewers: Simulating cameras in WebXR
+
WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.
+
Movement, orientation, and motion: A WebXR example
+
In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.
+
Using bounded reference spaces
+
In this article, we examine how to use a  reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it,  can be a useful tool in your repertoire.bounded-floorbounded-floor
+
WebXR performance guide
+
Recommendations and tips to help you optimize the performance of your WebXR application.
+
Inputs and input sources
+
A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.
+
Using WebXR input profiles
+
A guide to interpreting the {{Glossary("JSON")}} data provided by the WebXR Input Profiles Registry, which can be used to determine what options and controls are available on the user's available input devices.
+
Supporting advanced controllers and gamepads in WebXR applications
+
WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebXR")}}{{Spec2("WebXR")}}Initial definition.
+ +

Browser compatibility

+ +

{{Compat("api.Navigator.xr")}}

+ +

See also

+ + diff --git a/files/de/web/api/window/alert/index.html b/files/de/web/api/window/alert/index.html new file mode 100644 index 0000000000..841600419d --- /dev/null +++ b/files/de/web/api/window/alert/index.html @@ -0,0 +1,72 @@ +--- +title: Window.alert +slug: Web/API/Window/alert +tags: + - API + - DOM + - Method + - Reference + - Window +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

Die Window.alert() Methode zeigt einen Alert-Dialog mit optional spezifiziertem Inhalt und einem OK-Button an.

+ +

Syntax

+ +
window.alert(nachricht);
+ + + +

Beispiel

+ +
window.alert("Hello world!");
+
+ +

erzeugt:

+ +

Image:AlertHelloWorld.png

+ +

Mehr JS:

+ +
alert()
+ +

Anmerkungen

+ +

Der Alert-Dialog sollte für Nachrichten benutzt werden, die keine Reaktion des Nutzers benötigen, außer seiner/ihrer Bestätigung.

+ +

Dialog-Boxen sind modale Fenster - der Rest der Oberfläche wird erst geladen, sobald die Box geschlossen wird. Deswegen sollten Funktionen, die Dialog-Boxen (oder modale Fenster) erzeugen, nicht zu oft benutzt werden.

+ +

Mozilla Chrome-Nutzer (z. B. Firefox-Erweiterungen) sollten stattdessen Methoden des {{interface("nsIPromptService")}} verwenden.

+ +

Ab Chrome {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} geblockt, solange sein Sandbox-Attribut nicht den Wert allow-modal enthält.

+ +

{{gecko_minversion_inline("23.0")}} Das Argument ist nun optional, wie von der Spezifikation gefordert.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}{{Spec2('HTML5 Web application')}}Anfängliche Definition
+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/applicationcache/index.html b/files/de/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..c8d47fc6ee --- /dev/null +++ b/files/de/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +

{{APIRef}}

+ +

Zusammenfassung

+ +

Liefert eine Referenz auf das ApplicationCache Objekt für das aktuelle Fenster.

+ +

Syntax

+ +
cache = window.applicationCache
+
+ +

Parameter

+ + + +

Spezification

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/window/cancelanimationframe/index.html b/files/de/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..7d38ab5be4 --- /dev/null +++ b/files/de/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,72 @@ +--- +title: Window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +tags: + - API + - Animation + - DOM + - Experimentell + - Méthode +translation_of: Web/API/Window/cancelAnimationFrame +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

Zusammenfassung

+ +

Stopt eine vorher durch {{domxref("window.requestAnimationFrame()")}} geplante Animation.

+ +

Syntax

+ +
window.cancelAnimationFrame(requestID);
+
+ +

Parameter

+ +
+
requestID
+
Der ID Wert der beim Aufruf von {{domxref("window.requestAnimationFrame()")}} vorher zurückgegeben wurde.
+
+ +

Beispiel

+ +
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Nur unterstützt in FF. Andere Browsers können zB Date.now() benutzen.
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+window.cancelAnimationFrame(myReq);
+
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.cancelAnimationFrame")}}

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/window/close/index.html b/files/de/web/api/window/close/index.html new file mode 100644 index 0000000000..84c1630838 --- /dev/null +++ b/files/de/web/api/window/close/index.html @@ -0,0 +1,78 @@ +--- +title: Window.close() +slug: Web/API/Window/close +tags: + - API + - DOM + - Gecko + - Method + - Reference + - Window +translation_of: Web/API/Window/close +--- +
{{APIRef}}
+ +

Die Window.close() Methode schließt das aktuelle Fenster oder das Fenster von dem sie aufgerufen wurde.

+ +

Diese Methode kann nur von Fenstern aufgerufen werden, die ein Skript mit der {{domxref("Window.open()")}} Methode verwenden. Wenn das Fenster nicht durch ein Skript geöffnet wurde, erscheint ein so oder ähnlich lautender Fehler in der Konsole Skripte können keine Fenster schließen, die nicht von ihnen geöffnet wurden.

+ +

Zu beachten ist auch, dass close() keinen Effekt auf {{domxref("Window")}} Objekte hat, die per HTMLIFrame​Element​.content​Window zurückgegeben werden.

+ +

Syntax

+ +
window.close();
+ +

Beispiele

+ +

Schließt ein Fenster, geöffnet durch window.open()

+ +

Dieses Beispiel zeigt eine Funktion die ein Fenster öffnet eine zweite Funktion die es schließt. Das demonstriert wie Window.close() verwendet wird um ein Fenster zu schließen, das per {{domxref("window.open()")}} geöffnet wurde.

+ +
//Global var to store a reference to the opened window
+var openedWindow;
+
+function openWindow() {
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+  openedWindow.close();
+}
+
+ +

Das aktuelle Fenster schließen

+ +

Wenn Sie in der Vergangenheit die close() Methode des window Objekts direkt aufgerufen haben, anstatt close() für eine window Instanz aufzurufen, hat der Browser das vorderste Fenster geschlossen, unabhängig davon, ob Ihr Skript dieses Fenster erstellt hat oder nicht. Dies ist nicht länger der Fall; Aus Sicherheitsgründen dürfen Skripte keine Fenster mehr schließen, die sie nicht geöffnet haben. (Firefox 46.0.1: Skripte können keine Fenster schließen, die sie nicht geöffnet hatten)

+ +
function closeCurrentWindow() {
+  window.close();
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}{{Spec2('HTML5 W3C')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.close")}}

diff --git a/files/de/web/api/window/confirm/index.html b/files/de/web/api/window/confirm/index.html new file mode 100644 index 0000000000..23df4db917 --- /dev/null +++ b/files/de/web/api/window/confirm/index.html @@ -0,0 +1,73 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsMobileBrowserCompatibility + - Reference + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Die Window.confirm() Funktion zeigt ein modales Dialogfenster mit einem optionalen Text und zwei Buttons an, OK und Abbrechen.

+ +

Syntax

+ +
eingabe = window.confirm(nachricht);
+ + + +

Beispiel

+ +
if (window.confirm("Willst du die Seite wirklich verlassen?")) {
+    window.open("exit.html", "Auf Wiedersehen!");
+}
+
+ +

Erzeugt (englisch):

+ +

firefox confirm
+  

+ +

Anmerkungen

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.alert Dialogfenster sind modal - sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden. Und unabhängig davon gibt es gute Gründe dafür, Dialogfenster zum Bestätigen einer Aktion zu vermeiden.

+ +

Mozilla Chrome-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.

+ +

Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} Der Parameter ist optional und wird laut Spezifikation nicht benötigit.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}{{Spec2('HTML WHATWG')}} 
+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/console/index.html b/files/de/web/api/window/console/index.html new file mode 100644 index 0000000000..2fa7d75001 --- /dev/null +++ b/files/de/web/api/window/console/index.html @@ -0,0 +1,56 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Eigenschaft + - Referenz + - Schreibgeschützt + - Window + - console +translation_of: Web/API/Window/console +--- +

{{ APIRef }}

+ +

Die Window.console Eigenschaft gibt eine Referenz des {{domxref("Console")}} Objects zurück, welches Methoden für das Loggen von Informationen in der Browser Konsole bietet. Diese Methoden sollten nur für das Debugging genutzt werden und nicht für das Darstellen von Informationen an Endnutzer.

+ +

Syntax

+ +
var consoleObj = window.console;
+
+ +

Beispiele

+ +

Zur Konsole loggen

+ +

Das erste Beispiel loggt text zur Konsole.

+ +
console.log("Während dem Laden ist ein Fehler aufgetreten.");
+
+ +

Das nächste Beispiel loggt ein Objekt in der Konsole. Die Felder des Objekts können dabei ausgeklappt werden:

+ +
console.dir(einObjekt);
+ +

Schau dir {{SectionOnPage("/de-DE/docs/Web/API/Console", "Nutzung")}} für weitere Beispiele an.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Console API')}}{{Spec2('Console API')}}Anfängliche Definition.
+ +
+

Aktuell gibt es viele Unterschiede in der Implementation zwischen den verschiedenen Browsern. Dennoch wird aktuell daran gearbeitet, die Implementationen zusammen zu bringen und konsistenter zu machen.

+
diff --git a/files/de/web/api/window/dump/index.html b/files/de/web/api/window/dump/index.html new file mode 100644 index 0000000000..4126c3a4db --- /dev/null +++ b/files/de/web/api/window/dump/index.html @@ -0,0 +1,42 @@ +--- +title: Window.dump() +slug: Web/API/Window/dump +tags: + - DOM +translation_of: Web/API/Window/dump +--- +
{{ApiRef}}
+ +

Übersicht

+ +

Schreibt eine Nachricht auf die (systemeigene) Konsole.

+ +

Syntax

+ +
window.dump(message);
+
+dump(message);
+
+ + + +

Bemerkungen

+ +

dump wird normalerweise verwendet um JavaScript zu debuggen. Privilegierter Code kann auch Components.utils.reportError und nsIConsoleService verwenden, um Nachrichten in die Fehler-Konsole zu schreiben.

+ +

In Gecko ist dump standardmäßig deaktiviert – beim Aufruf passiert also nichts und es wird auch kein Fehler erzeugt. Um die dump Ausgabe zu sehen, muss die Einstellung browser.dom.window.dump.enabled auf true gesetzt werden. Diese Einstellung kann in about:config oder in der user.js Datei vorgenommen werden. Anmerkung: Diese Einstellung ist in about:config normalerweise nicht enthalten, sie muss erst erzeugt werden (Rechtsklick in den Fensterbereich -> Neu -> Boolean).

+ +

In Windows benötigt man eine Konsole, um überhaupt etwas zu sehen. Wenn noch keine vorhanden ist, kann durch einen Neustart der Anwendung mit dem Parameter  -console eine Konsole erzeugt werden. Auf anderen Betriebssystemen ist es ausreichend die Anwendung aus einem Terminal aufzurufen.

+ +

Um die Konsolenausgabe in eine Datei umzuleiten, muss Firefox ohne den Parameter -console gestartet und folgende Syntax zum Umleiten von stderr und stdout in eine Datei verwendet werden, zB.:

+ +
firefox > console.txt 2>&1
+
+ +

dump steht auch in JavaScript geschriebenen XPCOM Komponenten zur verfügbar, obwohl window nicht das globale Objekt in Komponenten ist. Allerdings wird diese Verwendung von dump nicht durch die oben genannte Einstellung beeinflusst -- die Ausgabe findet immer statt. Deshalb ist es anzuraten, diese Einstellung selbst zu prüfen oder eine eigene Debug-Einstellung zu erzeugen. Damit sichergestellt ist, dass nicht unnötig viele Debug-Daten in die Konsole des Benutzers geschrieben werden, wenn dieser überhaupt nicht an diesen interessiert ist. Achtung, die Ausgabe von dump von XPCOM Komponenten wird zu stderr geleitet, während ein Aufruf von dump an andere Stelle auf stdout ausgibt.

+ +

Spezifikation

+ +

{{DOM0}}

diff --git a/files/de/web/api/window/history/index.html b/files/de/web/api/window/history/index.html new file mode 100644 index 0000000000..05a369435f --- /dev/null +++ b/files/de/web/api/window/history/index.html @@ -0,0 +1,56 @@ +--- +title: Window.history +slug: Web/API/Window/history +tags: + - API + - HTML DOM + - History API + - Window +translation_of: Web/API/Window/history +--- +

{{ APIRef }}

+ +

Die nur lesend zugreifbare Eigenschaft Window.history gibt eine Referenz auf das {{domxref("History")}} Objekt zurück, welches eine Schnittstelle zur Manipulation der Browser Sitzungs-Historie bereitstellt (Seiten, die im aktuellen Tab oder dem aktuellen Frame besucht wurden).

+ +

Unter Manipulating the browser history finden sie weitere Details und Beispiele. Der Artikel geht besonders auf die Sicherheits-Features der Methoden pushState() und replaceState() ein, die Sie vor Benutzung der Funktionen kennen sollten.

+ +

Syntax

+ +
var historyObj = window.history;
+
+ +

Beispiel

+ +
history.back();     // entspricht dem Klicken des "Zurück"-Kopfes
+history.go(-1);     // entspricht history.back();
+
+ +

Anmerkungen

+ +

Für Seiten auf der obersten Ebene kann in der Sitzungs-Historie eine Liste von Seiten über das History Objekt angesehen werden, zugreifbar über die Drop-Downs im Browser neben den Vor- und Zurück-Schaltflächen.

+ +

Aus Sicherheitsgründen erlaubt das History Objekt keinen Zugriff für nicht-privilegierten Code auf die URLs anderer Seiten in der Sitzungs-Historie, erlaubt aber die Navigation durch die Historie.

+ +

Die Sitzungs-Historie kann nicht gelöscht oder das Vor-und Zurück-Navigieren verhindert werden. Die nächstbeste Lösung ist die location.replace() Methode, die den aktuellen Eintrag in der Sitzungs-Historie durch die übergebene URL ersetzt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML5 W3C')}} 
diff --git a/files/de/web/api/window/index.html b/files/de/web/api/window/index.html new file mode 100644 index 0000000000..26f27d9af0 --- /dev/null +++ b/files/de/web/api/window/index.html @@ -0,0 +1,384 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

Das window Objekt repräsentiert ein Fenster (Window), das ein DOM Dokument enthält. Das document Attribut zeigt auf das DOM document, das im Fenster geladen ist. Für ein gegebenes Dokument kann man über das {{Domxref("document.defaultView")}} Attribut das Fenster abrufen.

+ +

Dieser Abschnitt bietet eine kurze Referenz für alle Methoden, Attribute und Events, die über das window Objekt zur Verfügung stehen. Das window Objekt implementiert die Window Schnitstelle, die wiederrum von der AbstractView Schnittstelle erbt. Einige zusätzliche globale Funktionen, Namespace Objekte, Schnittstellen und Konstruktoren, die nicht typischerweise mit dem Window in Verbindung gebracht werden, aber durch dieses verfügbar sind, werden in der JavaScript Reference und DOM Reference aufgelistet.

+ +

In einem "getabten" Browser wie Firefox enthält jeder Tab sein eigenes Window-Objekt (und im Falle von Extensions ist das Browser-Fenster selbst ein eigenständiges Fenster – siehe auch "Working with windows in chrome code". Das heisst also, dass das Window-Objekt nicht zwischen Tabs desselben Fensters geteilt wird. Einige Methoden, zum Beispiel {{Domxref("window.resizeTo")}} und {{Domxref("window.resizeBy")}} beziehen sich auf das "ganze" Fenster, und nicht auf den Tab, dem das Window-Objekt gehört. Grundsätzlich lässt sich sagen, das alles, was man nicht sinnvollerweise einem Tab zuordnen kann, sich stattdessen auf das Window bezieht.

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
Window.Components {{Non-standard_inline}}
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
+
{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}
+
Returns a reference to the console object providing access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("window.innerWidth")}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}
+
 
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Provides a hosting area for performance related attributes.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaulComputedStyle()")}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("element.removeEventListener","Window.removeEventListener()")}}
+
Removes an event listener from the window.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}}
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("Window.setResizable")}}
+
{{todo("NeedsContents")}}
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Displays a modal dialog.
+
{{domxref("Window.sizeToContent()")}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
An event handler property for abort events on the window.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
An event handler property for blur events on the window.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
An event handler property for click events on the window.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
An event handler property for handling the window close event.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
An event handler property for right-click events on the window.
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
An event handler property for any device orientation changes
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
An event handler property for {{event("error")}} events raised on the window.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
An event handler property for {{event("focus")}} events on the window.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
An event handler property for {{event("keydown")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
An event handler property for {{event("keypress")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
An event handler property for {{event("keyup")}} events on the window.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
An event handler property for window loading.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
An event handler property for mousedown events on the window.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
An event handler property for mousemove events on the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
An event handler property for mouseout events on the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
An event handler property for mouseover events on the window.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
An event handler property for mouseup events on the window.
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
An event handler property for pageshow events on the window.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
An event handler property for pagehide events on the window.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
An event handler property for reset events on the window.
+
{{domxref("GlobalEventHandlers.onresize")}}
+
An event handler property for window resizing.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
An event handler property for window scrolling.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
An event handler property for window selection.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
An event handler property for submits on window forms.
+
{{domxref("Window.onunload")}}
+
An event handler property for unload events on the window.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/de/web/api/window/length/index.html b/files/de/web/api/window/length/index.html new file mode 100644 index 0000000000..202c83237d --- /dev/null +++ b/files/de/web/api/window/length/index.html @@ -0,0 +1,51 @@ +--- +title: Window.length +slug: Web/API/Window/length +translation_of: Web/API/Window/length +--- +
{{ ApiRef() }}
+ +

Liefert die Anzahl an Frames ({{HTMLElement("frame")}} oder {{HTMLElement("iframe")}} elements) im aktuellen Fenster.

+ +

Syntax

+ +
framesCount = window.length;
+
+ + + +

Beispiel

+ +
if (window.length) {
+  // this is a document with subframes
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}{{Spec2('HTML5 W3C')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.length")}}

diff --git a/files/de/web/api/window/localstorage/index.html b/files/de/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..5395a7985f --- /dev/null +++ b/files/de/web/api/window/localstorage/index.html @@ -0,0 +1,81 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Storage + - Web Storage + - Web Storage API + - Window + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

Die localStorage-Eigenschaft erlaubt den Zugriff auf ein lokales {{domxref("Storage")}}-Objekt. localStorage ist mit einer Ausnahme identisch zu sessionStorage: Im Unterschied zu letzterem besitzen in localStorage gespeicherte Daten kein Verfallsdatum, während sie im sessionStorage mit Ablauf der session, in der Regel beim Schließen des Browsers, gelöscht werden.

+ +

localStorage und sessionStorage sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com nicht zur Verfügung.

+ +

Syntax

+ +
myStorage = localStorage;
+ +

Wert

+ +

Ein {{domxref("Storage")}}-Objekt.

+ +

Beispiel

+ +

Der folgende Ausschnitt greift auf das lokale {{domxref("Storage")}}-Objekt der aktuellen Domain zu und fügt ihm mit {{domxref("Storage.setItem()")}} einen Eintrag hinzu.

+ +
localStorage.setItem('myCat', 'Tom');
+ +

Die Syntax für das Auslesen eines Eintrages aus dem localStore lautet:

+ +
var cat = localStorage.getItem('myCat');
+ +

Die Syntax um einen Eintrag zu entfernen lautet:

+ +
localStorage.removeItem('myCat');
+ +

Die Syntax um alle Einträge zu löschen lautet:

+ +
localStorage.clear();
+ +
+

Hinweis: Ausführliche Beispiele sind im Artikel Using the Web Storage API nachzulesen.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.localStorage")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/name/index.html b/files/de/web/api/window/name/index.html new file mode 100644 index 0000000000..f6d3ec5b97 --- /dev/null +++ b/files/de/web/api/window/name/index.html @@ -0,0 +1,57 @@ +--- +title: Window.name +slug: Web/API/Window/name +tags: + - API +translation_of: Web/API/Window/name +--- +
{{APIRef}}
+ +

Holt oder setzt den Namen des Fensters.

+ +

Syntax

+ +
string = window.name;
+window.name = string;
+
+ +

Beispiel

+ +
window.name = "lab_view";
+
+ +

Hinweise

+ +

Der Name von Fenstern wird hauptsächlich als Ziel von Hyperlinks und Formularen verwendet. Fenster benötigen grundsätzlich keinen Namen.

+ +

window.name wurde auch in Frameworks verwendet um Domain-übergreifend zu kommunizieren (z.B. mit SessionVars oder Dojo's dojox.io.windowName) als sicherere Alternative JSONP. Moderne Webanwendungen sollten sich jedoch nicht auf window.name verlassen, sondern die postMessage API verwenden.

+ +

window.name konvertiert alle Werte zu ihre String-Repräsentation durch die Verwendung ihrer toString Methode.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML5 W3C')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.name")}}

diff --git a/files/de/web/api/window/navigator/index.html b/files/de/web/api/window/navigator/index.html new file mode 100644 index 0000000000..5e9289f088 --- /dev/null +++ b/files/de/web/api/window/navigator/index.html @@ -0,0 +1,98 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - HTML DOM + - Property + - Read-only + - Reference + - Window +translation_of: Web/API/Window/navigator +--- +
{{APIRef}}
+ +

Die Schreibgeschützte Window.navigator Eigenschaft liefert eine Referenz des {{domxref("Navigator")}} Objekts, das Informationen über die Anwendung die das Skript ausführt liefern kann.

+ +

Syntax

+ +
navigatorObject = window.navigator
+ +

Beispiele

+ +

Beispiel #1: Browsererkennung und Ausgabe eines Texts.

+ +
var sBrowser, sUsrAg = navigator.userAgent;
+
+// The order matters here, and this may report false positives for unlisted browsers.
+
+if (sUsrAg.indexOf("Firefox") > -1) {
+  sBrowser = "Mozilla Firefox";
+  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
+  sBrowser = "Opera";
+  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
+} else if (sUsrAg.indexOf("Trident") > -1) {
+  sBrowser = "Microsoft Internet Explorer";
+  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+} else if (sUsrAg.indexOf("Edge") > -1) {
+  sBrowser = "Microsoft Edge";
+  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+} else if (sUsrAg.indexOf("Chrome") > -1) {
+  sBrowser = "Google Chrome or Chromium";
+  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+} else if (sUsrAg.indexOf("Safari") > -1) {
+  sBrowser = "Apple Safari";
+  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+} else {
+  sBrowser = "unknown";
+}
+
+alert("Sie verwenden: " + sBrowser);
+ +

Beispiel #2: Browsererkennung und Rückgabe eines Index.

+ +
function getBrowserId () {
+  var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+      sUsrAg = navigator.userAgent,
+      nIdx = aKeys.length - 1;
+
+  for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+  return nIdx;
+}
+
+console.log(getBrowserId());
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}{{Spec2('HTML WHATWG')}}
+  
+ +


+ Browserkompatibilität

+ + + + + +

{{Compat("api.Window.navigator")}}

diff --git a/files/de/web/api/window/ondevicemotion/index.html b/files/de/web/api/window/ondevicemotion/index.html new file mode 100644 index 0000000000..0e39638929 --- /dev/null +++ b/files/de/web/api/window/ondevicemotion/index.html @@ -0,0 +1,56 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/ondevicemotion +tags: + - API + - Ausrichtung + - Beschleunigungssensor + - Bewegung + - Eigenschaft + - Firefox OS + - Geräteausrichtung +translation_of: Web/API/Window/ondevicemotion +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

Ein Eventhandler für das {{ event("devicemotion")}} Event, welches an das Fenster gesendet wird.

+ +

Syntax

+ +
window.ondevicemotion = funcRef;
+
+ +

Die Funktion funcRef ist eine Referenz für eine Funktion. Diese Funktion erhält ein {{ domxref("DeviceMotionEvent") }} Objekt, welches die aufgetretene Bewegung beschreibt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

Browserkompatibilität

+ +

{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/opendialog/index.html b/files/de/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..2dbd0587c5 --- /dev/null +++ b/files/de/web/api/window/opendialog/index.html @@ -0,0 +1,90 @@ +--- +title: Window.openDialog() +slug: Web/API/Window/openDialog +translation_of: Web/API/Window/openDialog +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

window.openDialog ist eine Erweiterung von window.open. Es ist fast das gleiche, ausser das optional nach windowFeatures zusätzliche Parameter angegeben werden können, und windowFeatures selber wird ein bisschen anders behandelt.

+ +

Die optionalen Parameter, wenn vorhanden, werden zu einem JavaScript Array gebündelt und zum neu geöffneten Fenster hinzugefügt als eine Eigenschaft namens window.arguments. Sie können jederzeit im JavaScript des Fensters verwendet werden, auch während der ausführung eines load handler. Diese Parameter können dafür benutzt werden, um in beide Richtungen Daten mit dem Dialogfenster auszutauschen.

+ +

Beachten sie, das nach dem Aufruf von openDialog() sofort weitergefahren wird. Wenn Sie wollen, dass der Aufruf blockiert bis der Benutzer den Dialog schliesst, geben sie modal als windowFeatures Parameter an. Beachten sie, dass der Benutzer das opener window nicht bedienen kann, bis er den Dialog schliesst.

+ +

Syntax

+ +
newWindow = openDialog(url, name, features, arg1, arg2, ...)
+
+ +
+
newWindow 
+
Das geöffnete Fenster
+
url 
+
Die URL, die im neu geöffneten Fenster geladen wird.
+
name 
+
Der Name des Fensters (optional). Siehe window.open für detailierte Informationen.
+
features 
+
Siehe window.open.
+
arg1, arg2, ... 
+
Die Argumente, die dem neuen Fenster gegeben werden (optional).
+
+ +

Beispiel

+ +
var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+
+ +

Zu beachten

+ +

Neue Features

+ +

all - Aktiviert (oder deaktiviert ("all=no")) anfangs alles chrome (ausser die behaviour flags chrome, dialog und modal). Diese können überschrieben werden (z.B. "menubar=no,all" schaltet alles chrome ein ausser die Menüleiste.) Dieses Feature wird explizirt ignoriert von window.open. Für window.openDialog ist es nützlich wegen unterschiedlichem Standardverhalten.

+ +

Standardverhalten

+ +

Die window Features chrome und dialog  sind immer eingeschaltet, ausser sie werden explizit ausgeschaltet ("chrome=no"). openDialog behandelt einen nicht vorhandenen features Parameter gleich wie window.open, (ein leerer String schaltet alle Features aus) ausser chrome und dialog, welche standartmässig eingeschaltet sind. Wenn der features Parameter ein leerer String ist, oder nur behaviour features (chrome, dependent, dialog und modal) enthält, werden die chrome features nach der "OS' choice" ausgewählt. Das heisst, der window creation code erhält keine spezifischen Anweisungen, kann dafür das chrome auswählen, das am besten zu einem Dialog auf diesem operating system passt.

+ +

Zusätzliche Parameter zum Dialog hinzufügen

+ +

Um dem Fenster zusätzliche Parameter hinzuzufügen, können Sie diese einfach nach dem windowFeatures parameter einfügen:

+ +
openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+
+ +

Die zusätzlichen Parameter werden dann in eine Eigenschaft gepackt namens arguments mit dem Typ Array, und diese Eigenschaft wird dem neu erzeugten Fenster hinzugefügt.

+ +

Benützen Sie dieses Schema, um im Code des Dialogs auf diese zusätzlichen Parameter zuzugreifen:

+ +
var food  = window.arguments[0];
+var price = window.arguments[1];
+
+ +

Beachten Sie, dass Sie überall im Code des Dialogs auf diese Eigenschaft zugreiffen können. (Anderes Beispiel).

+ +

Werte vom Dialog zurückerhalten

+ +

Weil window.close() alle Eigenschaften des Dialogfensters löscht (d.h. die Variablen vom JavaScript des Dialogs), ist es nicht möglich, mit globalen Variablen (oder anderen Konstrukten) nach dem Schliessen Werte zurückzugeben.

+ +

Um Werte zum Aufrufer zurückzugeben, müssen Sie ein Objekt mit den zusätzlichen Parametern übergeben. Sie können im Code des Dialogs auf dieses Objekt zugreiffen und Eigenschaften setzen, welche die Werte enthalten, die Sie zurückgeben wollen oder die Sie auch nach window.close() behalten wollen.

+ +
var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
+
+ +

Wenn Sie im Dialog die Eigenschaften von retVals im Code des Dialogs setzen wie unten beschrieben, können Sie über retVals auf sie zugreiffen nach dem der Aufruf von openDialog() zurückkommt.

+ +

Im JavaScript des Dialogs können Sie wie folgt auf die Eigenschaften zugreiffen:

+ +
var retVals = window.arguments[2];
+retVals.address  = enteredAddress;
+retVals.delivery = "immediate";
+
+ +

Siehe auch hier. (anderes Beispiel).
+ Siehe auch window.importDialog (mobile).

+ +

Spezifikation

+ +

{{ DOM0() }}

diff --git a/files/de/web/api/window/opener/index.html b/files/de/web/api/window/opener/index.html new file mode 100644 index 0000000000..32301159ce --- /dev/null +++ b/files/de/web/api/window/opener/index.html @@ -0,0 +1,28 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Zusammenfassung

+ +

Gibt einen Hinweis auf das Fenster, welches das aktuelle Fenster öffnete.

+ +

Schreibweise

+ +
objRef = window.opener;
+
+ +

Beispiel

+ +
if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+
+ +

Bemerkungen

+ +

Öffnet man ein Fenster aus einem anderen Fenster heraus (mittels {{domxref("Window.open")}} oder target='_blank'), wird im neuen Fenster ein Bezug auf das ursprüngliche Fenster mit window.opener aufrecht erhalten. Wurde das aktuelle Fenster nicht aus einem anderen Fenster geöffnet, wird NULL ausgegeben.

+ +

Der Browser in Windows Smartphones unterstützt window.opener nicht (getestet mit Microsoft Edge 25.10586.36.0). Auch im Internet Explorer gibt es keine Unterstützung, wenn die Aktivität von einer anderen Sicherheitszone ausgeht.

diff --git a/files/de/web/api/window/performance/index.html b/files/de/web/api/window/performance/index.html new file mode 100644 index 0000000000..7805b7b019 --- /dev/null +++ b/files/de/web/api/window/performance/index.html @@ -0,0 +1,96 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +tags: + - Performanz + - Timing +translation_of: Web/API/Window/performance +--- +
{{APIRef("High Resolution Time")}}
+ +

Die Eigenschaft performance der {{domxref("Window")}} Schnittstelle  gibt ein {{domxref("Performance")}} Objekt zurück, welches benutzt werden kann, um Performanz-Informationen über das aktuelle Dokument zu sammeln. Sie dient als Bereitstellungspunkt für die Performance Timeline API, die High Resolution Time API, die Navigation Timing API, die User Timing API, und die Resource Timing API.

+ +

Syntax

+ +
performanceData = window.performance;
+ +

Wert

+ +

Ein {{domxref("Performance")}}-Objekt bietet Zugriff auf Performanz- und Timing-Informationen, die von den APIs, welche es offen legt, bereit gestellt werden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName('Highres Time', '#the-performance-interface', 'window.performance')}}{{Spec2('Highres Time')}}Definiert die now() Methode.
+ +

Browserkompabilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundsätzliche Unterstützung6.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("7.0")}}9.015.08
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}9.015.09{{CompatVersionUnknown}}
+
+ +

 

diff --git a/files/de/web/api/window/print/index.html b/files/de/web/api/window/print/index.html new file mode 100644 index 0000000000..3043194293 --- /dev/null +++ b/files/de/web/api/window/print/index.html @@ -0,0 +1,50 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +

{{ ApiRef() }}

+ +

Öffnet den Dialog zum Drucken des aktuellen Dokuments.

+ +

In den meisten Browsern wird die Methode nicht ausgeführt, sofern bereits ein Druck-Dialog geöffnet ist.

+ +

Syntax

+ +
window.print()
+
+ +

Anmerkungen

+ +

Seit Chrome Version {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} Elements blockiert, solange kein sandbox Attribut mit dem Wert allow-modal gesetzt ist.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentare
{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}{{Spec2('HTML5 Web application')}}Erste Definition.
+ +

Browserkompatibilität

+ +

{{Compat("api.Window.print")}}

+ +

Siehe auch

+ + + +

{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}

diff --git a/files/de/web/api/window/prompt/index.html b/files/de/web/api/window/prompt/index.html new file mode 100644 index 0000000000..5fe0290c4e --- /dev/null +++ b/files/de/web/api/window/prompt/index.html @@ -0,0 +1,79 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

Window.prompt() zeigt ein Dialogfenster mit einem Text-Eingabefeld an, mit einer optionalen Nachricht an den Benutzer.

+ +

Syntax

+ +
eingabe = window.prompt(nachricht, default);
+
+ + + +

Beispiel

+ +
var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// es gibt viele Möglichkeiten, um die prompt-Funktion zu nutzen
+var sign = window.prompt(); //  Öffnet das leere Eingabefenster 
+var sign = prompt();       //   Öffnet das leere Eingabefenster
+var sign = window.prompt('Are you feeling lucky'); // Öffnet das Eingabefenster mit dem Text "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // Öffnet das Eingabefenster mit dem Text "Are you feeling lucky" und dem Standardwert "sure"
+ +

Wenn der Benutzer den OK-Button drückt, wird der Text im Eingabefeld zurückgegeben. Falls das Feld leer ist, wenn der Benutzer den OK-Button drückt, wird ein leerer String zurückgegeben. Wird der Abbrechen-Button gedrückt, gibt die Funktion null zurück.

+ +

Die obige Eingabeaufforderung wird wie folgt angezeigt (in Chrome auf OS X):

+ +

prompt() dialog in Chrome on OS X

+ +

Anmerkungen

+ +

Ein prompt-Dialogfenster einen einzeiligen Text, einen Abbrechen-Button und einen OK-Button und gibt den (möglicherweise leeren) Text zurück, der ins Textfeld eingegeben wurde.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alert Dialogfenster sind modal - sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden.

+ +

Beachte, dass ein String zurückgegeben wird. Das heißt, die Eingabe muss manchmal gecasted werden. Beispiel: Falls eine Zahl eingegeben werden soll, sollte der String zu einer Zahl gecasted werden. var aNumber = Number(window.prompt("Gib eine Zahl ein", ""));

+ +

Mozilla Chrome-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.

+ +

Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert allow-modal.

+ +

In Safari wird auch dann ein leerer String zurückgegeben, wenn Abbrechen gedrückt wurde. Es macht also keinen Unterschied, ob OK oder Abbrechen gedrückt wird, wenn das Eingabefeld leer ist.

+ +

Diese Funktion hat keinen Effekt in der Modern UI/Metro-Version von Internet Explorer für Windows 8. Es zeigt kein Dialogfenster an und gibt immer undefined zurück. Es ist unklar, ob dieses Verhalten Absicht oder ein Bug ist. Desktopversionen von Internet Explorer implementieren die Funktion aber.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}{{Spec2('HTML5 Web application')}}Anfängliche Definition.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/screenx/index.html b/files/de/web/api/window/screenx/index.html new file mode 100644 index 0000000000..61221ffd18 --- /dev/null +++ b/files/de/web/api/window/screenx/index.html @@ -0,0 +1,98 @@ +--- +title: Window.screenX +slug: Web/API/Window/screenX +translation_of: Web/API/Window/screenX +--- +
{{APIRef}}
+ +
Die schreibgeschützte Eigenschaft Window.screenX liefert den Abstand in CSS-Pixeln zwischen dem linken Bildschirmrand und dem linken Rand des Browsers.
+ +
 
+ +

Syntax

+ +
lLoc = window.screenX
+
+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}Initiale Definition.
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Vor Firefox 28 nutzte Gecko "device pixel" anstatt CSS-Pixel; anders gesagt nahm es für den Wert von screenPixelsPerCSSPixel für jedes Gerät "1" an.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/scroll/index.html b/files/de/web/api/window/scroll/index.html new file mode 100644 index 0000000000..95f7da74fc --- /dev/null +++ b/files/de/web/api/window/scroll/index.html @@ -0,0 +1,56 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +translation_of: Web/API/Window/scroll +--- +
{{APIRef}}
+ +

Zusammenfassung

+ +

Scrollt das Fenster zu einer bestimmten Stelle im Dokument.

+ +

Syntax

+ +
window.scroll(x-koord,y-koord)
+
+ +

Parameters

+ + + +

Beispiel

+ +
<!-- lege den 100. vertikalen Pixel an der oberen Fensterrand -->
+
+<button onClick="scroll(0, 100);">Klicken, um 100 Pixel nach unten zu scrollen</button>
+
+ +

Notizen

+ +

window.scrollTo ist praktisch dasselbe wie diese Methode. Zum wiederholten Blättern um einen bestimmten Abstand, wird window.scrollBy benutzt. Siehe auch window.scrollByLines, window.scrollByPages.

+ +

Spezifikation

+ +
+
+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-window-scrollto', 'window.scrollTo()') }}{{ Spec2('CSSOM View') }}Erste Definition.
+
+
diff --git a/files/de/web/api/window/scrollto/index.html b/files/de/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..c33f70df89 --- /dev/null +++ b/files/de/web/api/window/scrollto/index.html @@ -0,0 +1,75 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/Window/scrollTo +--- +
{{ APIRef }}
+ +

Window.scrollTo() scrollt zu einer spezifischen Koordinate im Dokument.

+ +

Syntax

+ +
window.scrollTo(x-Koordinate, y-Koordinate)
+window.scrollTo(options)
+
+ +

Parameter

+ + + +

- or -

+ + + +

Beispiele

+ +
window.scrollTo(0, 1000);
+
+ +

Mit Benutzung von options:

+ +
window.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Anmerkungen

+ +

{{domxref("Window.scroll()")}} ist im Endeffekt die gleiche Methode. Schau dir {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}}, und {{domxref("Window.scrollByPages()")}} für relatives scrollen an.

+ +

Um Elemente zu scrollen, schau dir {{domxref("Element.scrollTop")}} und {{domxref("Element.scrollLeft")}} an.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}{{ Spec2('CSSOM View') }}Anfängliche Definition.
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Window.scrollTo")}}

diff --git a/files/de/web/api/window/sessionstorage/index.html b/files/de/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..b5adca4a81 --- /dev/null +++ b/files/de/web/api/window/sessionstorage/index.html @@ -0,0 +1,90 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Property + - Storage +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

Die sessionStorage-Eigenschaft erlaubt den Zugriff auf ein nur während der aktuellen Sitzung verfügbares Storage-Objekt. sessionStorage ist mit einer Ausnahme identisch zu {{domxref("Window.localStorage")}}: In localStorage gespeicherte Daten besitzen kein Verfallsdatum, während sie im sessionStorage mit Ablauf der Sitzung gelöscht werden. Eine Sitzung endet erst mit dem Schließen des Browsers, sie übersteht das Neuladen und Wiederherstellen einer Webseite. Das Öffnen einer Webseite in einem neuen Tab oder Browserfenster erzeugt jedoch eine neue Sitzung; ein Unterschied zur Funktionsweise von Session-Cookies.

+ +

localStorage und sessionStorage sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com nicht zur Verfügung.

+ +

Syntax

+ +
// Daten im sessionStorage speichern
+sessionStorage.setItem('key', 'value');
+
+// Gespeicherte Daten aus dem sessionStorage abfragen
+var data = sessionStorage.getItem('key');
+
+// Gespeicherte Daten aus dem sessionStorage entfernen
+sessionStorage.removeItem('key');
+
+// Alle gespeicherten Daten aus dem sessionStorage entfernen
+sessionStorage.clear();
+ +

Wert

+ +

Ein {{domxref("Storage")}}-Objekt.

+ +

Beispiel

+ +

Im folgenden Beispiel wird auf das sessionStorage-Objekt der aktuellen Domain zugegriffen und mit {{domxref("Storage.setItem()")}} Daten hinzugefügt:

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

Das folgende Beispiel speichert automatisch den Inhalt eines Textfeldes. Bei einem versehentlichen Neuladen der Seite wird der Inhalt wiederhergestellt, sodass keine Eingaben verloren gehen.

+ +
// Das Textfeld holen, das überwacht werden soll
+var field = document.getElementById("field");
+
+// Prüfen, ob ein gespeicherter Wert vorliegt
+// (das ist nur dann der Fall, wenn die Seite versehentlich aktualisiert wurde)
+if (sessionStorage.getItem("autosave")) {
+  // Den Inhalt des Testfeldes aus dem sessionStorage wiederherstellen
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Änderungen des Inhalts des Textfeldes überwachen
+field.addEventListener("change", function() {
+  // Speichern des Inhalts des Textfeldes im sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});
+ +
+

Anmerkung: Ein vollständiges Beispiel kann unter Using the Web Storage API nachgelesen werden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.sessionStorage")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/stop/index.html b/files/de/web/api/window/stop/index.html new file mode 100644 index 0000000000..8968e89177 --- /dev/null +++ b/files/de/web/api/window/stop/index.html @@ -0,0 +1,38 @@ +--- +title: Window.stop() +slug: Web/API/Window/stop +tags: + - API + - DOM + - DOM_0 + - Method + - stopwindowloading +translation_of: Web/API/Window/stop +--- +
{{APIRef}}
+ +

Zusammenfassung

+ +

Diese Methode stoppt das Laden des Fensters.

+ +

Syntax

+ +
window.stop()
+
+ +

Beispiel

+ +
window.stop();
+
+ +

Notizen

+ +

Die stop() Methode ist genau equivalent zum Klicken des Stop-Buttons im Browser. Aufgrund der Reihenfolge in der Scripte geladen werden, kann die stop() Methode nicht das Dokument, in dem es enthalten ist, vom Laden stoppen, aber es stoppt das Laden von großen Bildern, neuen Fenstern, und anderen Objekten, die verzögert geladen werden.

+ +

Spezifikation

+ +

DOM Level 0. Kein Teil der Spezifikation.

+ +

Compatibility

+ +

Die stop() Methode wird nicht vom Internet Explorer unterstützt.

diff --git a/files/de/web/api/windowbase64/btoa/index.html b/files/de/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..9d980c340a --- /dev/null +++ b/files/de/web/api/windowbase64/btoa/index.html @@ -0,0 +1,145 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +
{{APIRef("HTML DOM")}}
+ +

Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.

+ +

Hinweis: diese Funktion ist nicht für Raw-Unicode-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).

+ +

Syntax

+ +
var encodedData = window.btoa(stringToEncode);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
+var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
+
+ +

Hinweise

+ +

Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels {{domxref("WindowBase64.atob","window.atob()")}} wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.

+ +

btoa() steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn window in solchen Komponenten nicht das globale Objekt ist.

+ +

Unicode-Zeichenketten

+ +

In den meisten Browsern verursacht ein Aufruf von window.btoa() mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").

+ +

Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von Johan Sundström):

+ +
function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+
+ +

Eine günstigere, zuverlässigere und effizientere Lösung ist, DOMString zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für typed arrays eignet. Eine Anleitung bietet dieser Abschnitt.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] btoa() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

See also

+ + diff --git a/files/de/web/api/windowbase64/index.html b/files/de/web/api/windowbase64/index.html new file mode 100644 index 0000000000..40051820b4 --- /dev/null +++ b/files/de/web/api/windowbase64/index.html @@ -0,0 +1,120 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/de/web/api/windoweventhandlers/index.html b/files/de/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..cdd4a8258b --- /dev/null +++ b/files/de/web/api/windoweventhandlers/index.html @@ -0,0 +1,189 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowEventHandlers describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.

+ +

WindowEventHandlers is a not an interface and no object of this type can be created.

+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/windoweventhandlers/onafterprint/index.html b/files/de/web/api/windoweventhandlers/onafterprint/index.html new file mode 100644 index 0000000000..088f6c91aa --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onafterprint/index.html @@ -0,0 +1,93 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/WindowEventHandlers/onafterprint +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +
{{ApiRef}}
+ +
Die Eigenschaft WindowEventHandlers.onafterprint definiert und gibt den {{event("onafterprint")}} {{domxref("EventHandler")}} für das aktuelle Window aus.
+ +

Syntax

+ +
window.onafterprint = event handling code
+
+ +

Beschreibung

+ +

Manche Browser (inklusive Firefox 6 und neuer, Internet Explorer) senden beforeprint und afterprint Events um zu bestimmen, ob ein Druckvorgang stattgefunden hat. Diese Funktion kann genutzt werden um das User-Interface während des Druckvorgangs anzupassen (z.B das Ausblenden von User-Interface Elementen während des Druckvorgangs).

+ +

Das afterprint Event wird ausgelöst nachdem der Nutzer gedruckt hat oder den den Druck abgebrochen hat.

+ +

Spezifikation

+ +

Nicht Teil einer Spezifikation.

+ +

Browserkompatbilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}6.0{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + + +
 
diff --git a/files/de/web/api/windoweventhandlers/onhashchange/index.html b/files/de/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..3bb0fb12a9 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,162 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - Eigenschaft + - Event + - HTML-DOM + - Referenz + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Das hashchange Event wird ausgelöst wenn sich der window.hash verändert (siehe {{domxref("Window.location", "location.hash")}}).

+ +

Syntax

+ +
window.onhashchange = funcRef;
+
+ +

oder

+ +
<body onhashchange="funcRef();">
+
+ +

oder

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

Parameter

+ +
+
funcRef
+
Ein Verweis auf eine Funktion.
+
+ +

Beispiel

+ +
if ("onhashchange" in window) {
+    alert("Der Browser unterstützt das hashchange-Event!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#irgendeinCoolesFeature") {
+        featureFunction();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

Das hashchange Event

+ +

Das ausgelöste hashchange Event hat folgende Eigenschaften:

+ + + + + + + + + + + + + + + + + + + +
EigenschaftTypBeschreibung
newURL {{gecko_minversion_inline("6.0")}}DOMStringDie neue URL zu der das Fenster nun navigiert.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringDie vorherige URL, von der aus das Fenster navigierte.
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Browser-Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5.0{{CompatGeckoDesktop("1.9.2")}} +

8.0

+ +

oldURL/newURL Eigenschaften werden nicht unterstützt.

+ 		10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.2{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ + diff --git a/files/de/web/api/windoweventhandlers/onpopstate/index.html b/files/de/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..5154919751 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,57 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +
{{APIRef}} {{gecko_minversion_header("2")}}
+ +

Zusammenfassung

+ +

Hier geht es um die Ereignisbehandlungsroutine, üblicherweise event handler genannt, für das popstate Ereignis (event) des window Objekts.

+ +

Ein popstate Ereignis wird an window übermittelt, wann immer der aktive history Eintrag zwischen zwei Einträgen für dasselbe Dokument wechselt. Falls der zu aktivierende history Eintrag erzeugt wurde durch den Aufruf von history.pushState() oder beeinflusst wurde durch Aufruf von history.replaceState(), dann enthält die state Eigenschaft des popstate Ereignisses eine Kopie des state Objekts des history Eintrags. 

+ +

Es gilt zu beachten, dass der bloße Aufruf von history.pushState() oder history.replaceState() kein popstate Ereignis auslöst. Das popstate Ereignis wird allein durch Anklicken des Zurück-Buttons (oder den Aufruf von history.back() per Javascript) ausgelöst. Auch wird das Ereignis nur ausgelöst, wenn sich der Anwender zwischen zwei history Einträgen für dasselbe Dokument bewegt.

+ +

Browser behandeln den popstate Zustand nach initialem Laden einer Seite (onload) auf verschiedene Weise. Chrome (vor Version 34) und Safari senden immer ein popstate Ereignis, Firefox hingegen nicht.

+ +

Syntax

+ +
window.onpopstate = funcRef;
+
+ + + +

Das popstate Ereignis

+ +

Zum Beispiel würde eine Seite mit der URL http://example.com/example.html beim Durchlaufen dieses Codes die folgenden Meldungen in der Konsole ausgeben:

+ +
window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Obwohl mit dem ursprünglichen history Eintrag (für die URL http://example.com/example.html) kein state Objekt verknüpft ist, wird dennoch ein popstate Ereignis ausgelöst, sobald dieser Eintrag durch den zweiten Aufruf von history.back() aktiv wird.

+ +

Spezifikation

+ + + +

Weiterführende Informationen

+ + diff --git a/files/de/web/api/windowtimers/index.html b/files/de/web/api/windowtimers/index.html new file mode 100644 index 0000000000..396aca3d4d --- /dev/null +++ b/files/de/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/de/web/api/windowtimers/settimeout/index.html b/files/de/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..9f13870d78 --- /dev/null +++ b/files/de/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,329 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

Die Funktion setTimeout() der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.

+ +

Syntax

+ +
var timeoutID = window.setTimeout(funktion, zeitspanne, [parameter1, parameter2, ...]);
+var timeoutID = window.setTimeout(code, zeitspanne);
+
+ +

 

+ +

Parameter

+ +

 

+ +
+
funktion
+
Die {{jsxref("function", "Funktion")}}, die nach zeitspanne Millisekunden ausgeführt werden soll.
+
code
+
code in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach zeitspanne Millisekunden ausgeführt werden soll.  code sollte aus den gleichen Gründen, die auch eval() zum Sicherheitsrisiko machen, nicht verwendet werden.
+
zeitspanne {{optional_inline}}
+
zeitspanne ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der funktion bzw. code ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.
+
parameter1, ..., parameterN {{optional_inline}}
+
Diese Parameter werden an die funktion oder den code übergeben.
+
+ +
Anmerkung: Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.
+ +

Rückgabewert

+ +

setTimeout() gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.

+ +

Jede ID wird von setTimeout() und setInterval() nur einmalig je Objekt (window oder Worker) verwendet.

+ +

Beispiel

+ +

HTML

+ +
<p>Beispiel</p>
+<button onclick="delayedAlert();">Zeige nach zwei Sekunden einen Alarm.</button>
+<p></p>
+<button onclick="clearAlert();">Alarm vorzeitig abbrechen.</button>
+ +

JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert('Das hat gedauert!');
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample('Example')}}

+ +

Siehe auch clearTimeout()

+ +

Polyfill

+ +

Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:

+ +
/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+ +

Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:

+ +
setTimeout(function() {
+    funktion("eins", "zwei", "drei");
+}, 1000);
+
+ +

Ebenfalls kann die Funktion bind() genutzt werden:

+ +

 

+ +
setTimeout(function(arg1, arg2, arg3){}.bind(undefined, "eins", "zwei", "drei"), 1000);
+ +

 

+ +

Das "this"-Problem

+ +

In der an setTimeout() übergebenen Funktion wird this bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der JavaScript-Referenz beschrieben.

+ +

Erklärung

+ +

Von setTimeout() ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem setTimeout() aufgerufen wurde. this wird deshalb in der aufgerufenen Funktion window oder global entsprechen, nicht dem this des Bereichs, in dem  setTimeout() aufgerufen wurde. Beispiel:

+ +
myArray = ["null", "eins", "drei"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // Ausgabe: "null,eins,zwei"
+myArray.myMethod(1); // Ausgabe: "eins"
+setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
+setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
+// Versuchen wir, 'this' zu übergeben
+setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler
+ +

Es gibt hier keine Möglichkeit, this an die aufzurufende Funktion durchzureichen.

+ +

Eine Lösungsmöglichkeit

+ +

Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen setTimeout() und setInterval() durch zwei eigene zu ersetzen, die sich Function.prototype.call bedienen:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Hinweis: Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.
+ +

Anmerkungen

+ +

Eine Wartezeit kann mit window.clearTimeout() abgebrochen werden.

+ +

Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist window.setInterval() die bessere Wahl.

+ +

Passing string literals

+ +

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

+ +
// Correct
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrect
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

+ +

Gründe für längere als gegebene Wartezeiten

+ +

Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.

+ +

Wartezeiten betragen 4ms oder mehr

+ +

Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:

+ +
function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);
+ +
setInterval(f, 0);
+ +

Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.

+ +

Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie hier beschrieben.

+ +

 

+ +
+

Hinweis: Die Mindestwartezeit, DOM_MIN_TIMEOUT_VALUE, beträgt 4 ms (Firefox-Einstellung dom.min_timeout_value), die Verschachtelungstiefe DOM_CLAMP_TIMEOUT_NESTING_LEVEL beträgt 5.

+
+ +
+

Hinweis: Der Wert 4 ms wurde mit HTML5 festgelegt und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.

+
+ +

 

+ +

 

+ +

Wartezeiten in inaktiven Tabs  größer als 1s

+ +

Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.

+ +

Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen dom.min_background_timeout_value geändert werden.
+ Chrome setzt diese Beschränkung seit Version 11 um (crbug.com/66078).

+ +

Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.

+ +
+

Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.
+ Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.

+
+ +

Lastbedingte Verzögerungen

+ +

Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der setTimeout() aufgerufen hat, noch aktiv ist:

+ +
function bla() {
+  console.log('bla wurde aufgerufen');
+}
+setTimeout(bla, 0);
+console.log('hinter setTimeout');
+ +

Ergebnis:

+ +
hinter setTimeout
+bla wurde aufgerufen
+ +

Obwohl setTimeout die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.

+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
EigenschaftChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
EigenschaftAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Spezifikation

+ +

Gehört zu DOM-Level 0, wie spezifiziert in HTML5.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/worker/index.html b/files/de/web/api/worker/index.html new file mode 100644 index 0000000000..258fc77862 --- /dev/null +++ b/files/de/web/api/worker/index.html @@ -0,0 +1,191 @@ +--- +title: Worker +slug: Web/API/Worker +translation_of: Web/API/Worker +--- +

{{APIRef("Web Workers API")}}

+ +

Das Worker Interface der Web Workers API beschreibt eine im Hintergrund ausgeführte Programmlogik, die leicht erstellt werden kann und Nachrichten mit dem Ersteller austauschen. Einen Worker erzeugen erfolgt einfach über den Aufruf des Worker() Konstruktors unter Angabe eines Scripts, welches in dem Worker Thread ausgeführt werden soll.

+ +

Worker selbst können zudem weitere (sog. "verschachtelte") Worker erzeugen, solange diese in demselben origin wie die übergeordnete Seite liegen (Achtung: verschachtelte Worker sind aktuell nicht in Blink implementiert).  Zusätzlich können Worker das XMLHttpRequest nutzen, um auf Netzwerk I/O zuzugreifen, unter der Voraussetzung, dass die Attribute responseXML und channel des XMLHttpRequest immer den Wert null zurück liefern.

+ +

Nicht alle Interfaces und Funktionen sind verfügbar für das mit dem Worker assoziierte Script.

+ +

Zur Verwendung eines Workers mit Zugriff auf js-ctypes in Browser-Erweiterungen (Extension) für den Firefox bitte das {{ domxref("ChromeWorker") }} Objekt nutzen.

+ +

Constructors

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Erzeugt einen neuen Web Worker, der das über seine URL referenzierte Script ausführt. Worker können auch über Blobs erzeugt werden.
+
+ +

Properties

+ +

Erbt die Eigenschaften seines parents, {{domxref("EventTarget")}}, und implementiert die Eigenschaften von {{domxref("AbstractWorker")}}.

+ +

Event handlers

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("ErrorEvent")}} des Typs error den Worker erreicht. Dies ist geerbt von {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("MessageEvent")}} des Typs message den Worker erreicht — d.h. der Worker erhält eine Nachricht von seinem übergeordneten document via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Diese Nachricht wird innerhalb des Events in der {{domxref("MessageEvent.data", "data")}} Eigenschaft gespeichert.
+
{{domxref("Worker.onmessageerror")}}
+
Der {{domxref("EventHandler")}}, dessen Code aufgerufen werden soll, wenn es zu einem {{event("messageerror")}} Event kommt.
+
+ +
+
+ +

Methods

+ +

Erbt die Methoden seines parents, {{domxref("EventTarget")}}, und implementiert die Methoden von {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Sendet eine Nachricht an den Worker. Diese kann dabei aus einem beliebigen JavaScript Objekt bestehen.
+
{{domxref("Worker.terminate()")}}
+
Beendet den Worker unmittelbar. Hierüber besteht dabei nicht die Möglichkeit, dem Worker die Gelegenheit für ein geordnetes Beenden von laufenden Operationen zu geben. Vielmehr wird der Worker sofort beendet. ServiceWorker Instanzen unterstützen diese Methode nicht.
+
+ +

Example

+ +

Das nachfolgende Beispiel zeigt wie ein {{domxref("Worker")}} mittels des {{domxref("Worker.Worker", "Worker()")}} Konstruktors erzeugt und verwendet wird:

+ +
var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

Ein vollständiges Beispiel findet sich hier: Basic dedicated worker example (run dedicated worker).

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

Die Unterstützung der einzelnen Worker ist abhängig vom Typ und variiert. Wie ein Worker konkret unterstützt wird, kann der Seite zu dem Worker Typ entnommen werden.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}3.510.010.64
Constructor name option{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmessageerror60{{CompatUnknown}}{{CompatGeckoDesktop(57)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.4{{CompatVersionUnknown}}3.510.011.55.1{{CompatUnknown}}
Constructor name option{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmessageerror60{{CompatUnknown}}{{CompatGeckoMobile(57)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Cross-origin worker error behaviour

+ +

In früheren Browserversionen kam es zu einem SecurityError bei dem Versuch ein Script für einen cross-origin worker zu laden. In neueren Browsern wird, aufgrund einer Änderung der Spezifikation, stattdessen ein {{event("error")}} Event erzeugt. Mehr über den Umgang mit solchen Fehlern ist hier zu finden: Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed.

+ +

See also

+ + diff --git a/files/de/web/api/xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..913acfb17a --- /dev/null +++ b/files/de/web/api/xmlhttprequest/index.html @@ -0,0 +1,710 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequest ist ein JavaScript Objekt, das von Microsoft entwickelt und von Mozilla, Apple, und Google übernommen wurde. Es wird derzeit im W3C standardisiert. Es bietet einen einfachen Weg, Daten von einem URL zu erhalten. Trotz seines Namens kann man mit XMLHttpRequest jede Art von Daten laden, nicht nur XML, und es unterstützt auch andere Protokolle als HTTP (inklusive file und ftp).

+ +

Eine Instanz von XMLHttpRequest erzeugt man ganz einfach so:

+ +
var myRequest = new XMLHttpRequest();
+
+ +

Für Näheres zur Verwendung von XMLHttpRequest, siehe Using XMLHttpRequest.

+ +

Übersicht: Methoden

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XMLHttpRequest(JSObject objParameters);
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
+ void send(ArrayBuffer data);
+ void send(Blob data);
+ void send(Document data);
+ void send(DOMString? data);
+ void send(FormData data);
void setRequestHeader(DOMString header, DOMString value);
Nicht-Standard Methoden
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void sendAsBinary(in DOMString body);
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTypBeschreibung
+

onreadystatechange

+ 		Function? +

Ein JavaScript function Objekt, das bei jedem Wechsel des readyState Attributs aufgerufen wird. Das Callback wird aus dem Thread der Benutzerschnittstelle aufgerufen.

+ +
Warnung: Dies sollte nicht mit synchronen Anfragen und darf nicht aus nativem Code heraus verwendet werden.
+
readyStateunsigned short +

Der Status der Anfrage:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertStatusBeschreibung
0UNSENTopen()wurde noch nicht aufgerufen.
1OPENEDsend()wurde noch nicht aufgerufen.
2HEADERS_RECEIVEDsend() wurde aufgerufen, und Headers sowie Status sind verfügbar.
3LOADINGDownload ist im Gange; responseText enthält bereits unvollständige Daten.
4DONEDer Vorgang ist abgeschlossen.
+
responsevariiert +

Der Entitätskörper der Antwort (response entity body) gemäss responseType, als ein ArrayBuffer, Blob, {{domxref("Document")}}, JavaScript Objekt (für "json"), oder string. Dies ist null falls die Anfrage nicht abgeschlossen ist oder erfolglos war.

+
responseText {{ReadOnlyInline}}DOMStringDie Antwort auf die Anfrage als Text, oder null falls die Anfrage nicht abgeschlossen ist oder erfolglos war.
responseTypeXMLHttpRequestResponseType +

Kann gesetzt werden, um den Datentyp der Antwort zu ändern.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertDatentyp der response Eigenschaft
"" (leerer String)String (Das ist der Default)
"arraybuffer"ArrayBuffer
"blob"{{domxref("Blob")}}
"document"{{domxref("Document")}}
"json"JavaScript Objekt, geparsed aus einem JSON String, der vom Server zurückgegeben wird.
"text"String
"moz-blob"Wird von Firefox verwendet, um den Bezug partieller {{domxref("Blob")}} Daten von progress Events zu erlauben. Dadurch kann ein progress Event Handler bereits mit der Verarbeitung von Daten beginnen, während ihr Empfang noch läuft.
"moz-chunked-text" +

Ähnlich wie "text", aber streamt die Daten. Das bedeutet, dass der Wert in response nur während des "progress" Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten "progress" Event eingetroffen sind.

+ +

Wenn auf response während eines "progress" Events zugegriffen wird, enthält es einen String mit den Daten. Andernfalls gibt es null zurück.

+ +

Dieser Modus funktioniert derzeit nur in Firefox.

+
"moz-chunked-arraybuffer" +

Ähnlich wie "arraybuffer", aber streamt die Daten. Das bedeutet, dass der Wert in response nur während des "progress" Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten "progress" Event eingetroffen sind.

+ +

Wenn auf response während eines "progress" Events zugegriffen wird, enthält es einen ArrayBuffer mit den Daten. Andernfalls gibt es null zurück.

+ +

Dieser Modus funktioniert derzeit nur in Firefox.

+
+ +
Anmerkung: Ab Gecko 11.0  sowie WebKit build 528 kann man in diesen Browsern das responseType Attribut nicht mehr für synchrone Anfragen benutzen. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.
+
responseXML {{ReadOnlyInline}}Document? +

Die Antwort auf die Anfrage als DOM Document Objekt, oder null falls die Anfrage erfolglos war, noch nicht gesendet wurde, oder nicht als XML oder HTML geparst werden kann. Die Antwort wird geparst, als wäre sie ein text/xml Stream. Wenn der responseType auf "document" gesetzt wurde und die Anfrage asynchron gemacht wurde, wird die Antwort geparst, als wäre sie ein text/html Stream.

+ +
Anmerkung: Falls der Server nicht den text/xml Inhaltstyp-Header auf die Antwort anwendet, kann man overrideMimeType() verwenden, um XMLHttpRequest zu zwingen, sie dennoch als XML zu parsen.
+
status {{ReadOnlyInline}}unsigned shortDer Status der Antwort auf die Anfrage. Das ist der HTTP Ergebnis-Code (status ist z.B. 200 für eine erfolgreiche Anfrage).
statusText {{ReadOnlyInline}}DOMStringDer Antwort-String, der vom HTTP Server zurückgesendet wurde. Im Gegensatz zu status beinhaltet dies den ganzen Text der Antwortnachricht (z.B. "200 OK").
timeoutunsigned long +

Die Anzahl Millisekunden, die eine Anfrage dauern darf, bevor sie automatisch abgebrochen wird. Ein Wert von 0 (das ist die Voreinstellung) bedeutet, dass es kein timeout gibt.

+ +
Anmerkung: Für synchrone Anfragen mit einem besitzenden Fenster darf man kein timeout verwenden.
+
uploadXMLHttpRequestUploadDas Hochladen kann mitverfolgt werden, indem man einen Event Listener zu upload hinzufügt.
withCredentialsboolean +

Zeigt an, ob Site-übergreifende Access-Control Anfragen mit Credentials wie Cookies oder Autorisierungs-Headers durchgeführt werden sollen oder nicht. Die Voreinstellung ist false.

+ +
Anmerkung: Anfragen an die ursprüngliche Site sind davon niemals betroffen.
+ +
Anmerkung: Ab Gecko 11.0 kann man das withCredentials Attribut nicht mehr für synchrone Anfragen verwenden. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus.
+
+ +

Nicht-Standard Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTypDescription
channel {{ReadOnlyInline}}{{Interface("nsIChannel")}}Der Kanal, der vom Objekt zur Durchführung der Anfrage verwendet wurde. Das ist null falls der Kanal noch nicht erzeugt worden ist. Im Falle von mehrteiligen Anfragen ist das der anfängliche Kanal, nicht derjenige der anderen Teile der mehrteiligen Anfrage.
+ Zugriff nur mit erhöhten Rechten.
mozAnon {{ReadOnlyInline}}boolean +

Falls true wird die Anfrage ohne Cookie und Authentisierungs-Headers gesendet.

+
mozSystem {{ReadOnlyInline}}boolean +

Falls true wird die Regel, die nur Anfragen zum gleichen Ursprung erlaubt, für diese Anfrage nicht durchgesetzt.

+
mozBackgroundRequestboolean +

Zeigt an, ob das Objekt eine Service-Anfrage im Hintergrund darstellt. Falls true wird keine Lastgruppe mit der Anfrage verknüpft, und die Anzeige von Sicherheits-Dialogen wird verhindert. Zugriff nur mit erhöhten Rechten.

+ +

In Fällen, wo normalerweise ein Sicherheits-Dialog angezeigt würde (wie Autorisierungs- oder Zertifikatsfehler-Benachrichtigungen), schlägt die Anfrage stattdessen einfach fehl.

+ +
Anmerkung: Diese Eigenschaft muss vor dem Aufrufen von open() gesetzt werden..
+
mozResponseArrayBuffer  {{obsolete_inline("6")}} {{ReadOnlyInline}}ArrayBufferDie Antwort auf die Anfrage, als typisiertes JavaScript Array. Dies ist NULL falls die Anfrage erfolglos war oder noch nicht gesendet wurde.
multipart {{obsolete_inline("22")}}boolean +

Dieses nur in Gecko verfügbare Feature wurde in Firefox/Gecko 22 entfernt. Bitte verwende stattdessen Server-Sent Events, Web Sockets oder responseText aus progress Events.

+ +

Zeigt an, ob als Antwort ein Stream von möglicherweise mehreren XML Dokumenten erwartet wird. Wird dies auf true gesetzt, muss der Inhaltstyp des ersten Teils der Antwort multipart/x-mixed-replace sein, sonst tritt ein Fehler auf. Alle Anfragen müssen asynchron sein.

+ +

Dies ermöglicht die Unterstützung von Server Push; für jedes XML Dokument, das in die Antwort auf diese Anfrage geschrieben wird, wird ein neues XML DOM Dokument erzeugt, und zwischen den Dokumenten wird der onload Handler aufgerufen.

+ +
Anmerkung: Wenn dies gesetzt ist, werden onload und andere Event Handler nicht zurückgesetzt, nachdem das erste XML Dokument geladen ist, und der onload Handler wird nach Erhalt jedes Teils der Antwort aufgerufen.
+
+ +

Konstruktor

+ +

XMLHttpRequest()

+ +

Der Konstruktor initiiert ein XMLHttpRequest Objekt. Er muss vor allen anderen Methoden aufgerufen werden.

+ +

Gecko/Firefox 16 fügt einen nicht-standard Parameter zum Konstruktor hinzu, der den anonymen Modus einschalten kann (siehe Bug 692677). Das mozAnon flag auf true zu setzen, hat einen ähnlichen Effekt wie der AnonXMLHttpRequest() Konstruktor, der in der XMLHttpRequest Spezifikation beschrieben ist, aber noch in keinem Browser implementiert wurde (Stand September 2012).

+ +
XMLHttpRequest (
+  JSObject objParameters
+);
+ +
Parameter (nicht-standard)
+ +
+
objParameters
+
Es gibt zwei Flags, die gesetzt werden können: +
+
mozAnon
+
Boolean: Wenn dieses Flag auf true gesetzt ist, wird der Browser weder den Ursprung der Anfrage noch Anmeldedaten übermitteln, wenn er Daten anfordert. Das heisst vor allem auch, dass keine Cookies gesendet werden, sofern sie nicht ausdrücklich mit setRequestHeader hinzugefügt wurden.
+
mozSystem
+
Boolean: Dieses Flag auf true zu setzen, ermöglicht das Herstellen von Cross-Site Verbindungen, ohne dass der Server dem mittels CORS zustimmen muss. Erfodert das Setzen von mozAnon: true. D.h. das kann nicht mit dem Senden von Cookies oder anderen Anmeldeinformationen kombiniert werden. Dies funktioniert nur in privilegierten (reviewed) Apps; es klappt nicht auf beliebigen Webseiten, die in Firefox geladen werden.
+
+
+
+ +

Methoden

+ +

abort()

+ +

Bricht die Anfrage ab, falls sie bereits gesendet wurde.

+ +

getAllResponseHeaders()

+ +
DOMString getAllResponseHeaders();
+ +

Liefert alle Antwort-Header als String, oder null falls keine Antwort empfangen wurde.

+ +

Anmerkung: Für mehrteilige Anfragen gibt dies die Header des aktuellen Teils der Anfrage zurück, nicht die des ursprünglichen Kanals.

+ +

getResponseHeader()

+ +
DOMString? getResponseHeader(DOMString header);
+ +

Liefert den String mit dem Text des angegebenen Headers, oder null falls die Antwort noch nicht empfangen wurde oder der Header in der Antwort nicht existiert.

+ +

open()

+ +

Initialisiert eine Anfrage. Diese Methode ist nur zur Verwendung in JavaScript Code; um eine Anfrage aus nativem Code zu initialisieren, ist stattdessen openRequest() zu benutzen.

+ +
Anmerkung: Der Aufruf dieser Methode für eine bereits aktive Anfrage (eine, für die open()oder openRequest() schon ausgeführt wurde) ist gleichwertig mit  dem Aufruf von abort().
+ +
void open(
+   DOMString method,
+   DOMString url,
+   optional boolean async,
+   optional DOMString user,
+   optional DOMString password
+);
+
+ +
Parameter
+ +
+
method
+
Die zu benutzende HTTP Methode,  wie "GET", "POST", "PUT", "DELETE", etc. Wird für nicht-HTTP(S) URLs ignoriert.
+
url
+
Der URL, an den die Anfrage geschickt werden soll.
+
async
+
Ein optionaler boole'scher Parameter mit Defaultwert true, der angibt, ob die Operation asynchron ausgeführt werden soll. Wenn dieser Wert false ist, kehrt die send()Methode nicht zurück, bis die Antwort vollständig empfangen worden ist. Ist er true, kehrt sie sofort zurück, und die Benachrichtigung über die vollendete Transaktion erfolgt mittels Events. Dies muss true sein falls das multipart Attribut true ist, sonst wird ein Fehler ausgelöst.
+
user
+
Der optionale Benutzername zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.
+
password
+
Das optionale Passwort zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.
+
+ +

overrideMimeType()

+ +

Übergeht den vom Server zurückgegebenen MIME Typ. Dies kann beispielsweise benutzt werden, um zu erzwingen, dass ein Stream als text/xml behandelt und geparst wird, selbst wenn ihn der Server nicht als das meldet. Diese Methode muss vor send() aufgerufen werden.

+ +
void overrideMimeType(DOMString mimetype);
+ +

send()

+ +

Sendet die Anfrage. Falls die Anfage asynchron ist (was der Default ist), kehrt diese Methode zurück, sobald die Anfrage gesendet ist. Ist die Anfrage synchron, kehrt diese Methode nicht zurück, bis die Antwort angekommen (oder ein Timeout aufgetreten) ist.

+ +
Anmerkung: Jegliche zu setzende Event Handler / Listener müssen vor dem Aufruf von send() gesetzt werden.
+ +
void send();
+void send(ArrayBuffer data);
+void send(Blob data);
+void send(Document data);
+void send(DOMString? data);
+void send(FormData data);
+ +
Anmerkungen
+ +

Falls data ein Document ist, so wird dieses vor dem Senden serialisiert. Beim Senden eines Document senden Firefox Versionen vor Version 3 die Anfrage immer encodiert als UTF-8; Firefox 3 sendet das Document richtigerweise mit dem angegebenen body.xmlEncoding, oder UTF-8 falls keines angegeben wurde.

+ +

Falls es ein nsIInputStream ist, muss er kompatibel sein mit der setUploadStream()Methode des nsIUploadChannel. In diesem Fall wird die Länge des Inhalts in einem Content-Length Header zur Anfrage hinzugefügt, dessen Wert mit der available()Methode des nsIInputStream ermittelt wird. Jegliche Header, die am Anfang des Streams enthalten sind, werden als Teil des Nachrichtenkörpers behandelt. Der MIME Typ des Streams sollte vor dem Aufruf von send() angegeben werden, indem der Content-Type Header mit der  setRequestHeader() Methode gesetzt wird.

+ +

Der beste Weg, um binäre Inhalte zu senden (wie beim Hochladen einer Datei), ist die Verwendung von ArrayBuffern oder Blobs in Verbindung mit der send() Methode. Wenn jedoch stringifizierbare Rohdaten gesendet werden sollen, ist die sendAsBinary() Methode zu verwenden.

+ +

setRequestHeader()

+ +

Setzt den Wert eines HTTP Anfrage-Headers. Aufrufe von setRequestHeader() müssen nach open(), aber vor send() erfolgen.

+ +
void setRequestHeader(
+   DOMString header,
+   DOMString value
+);
+
+ +
Parameter
+ +
+
header
+
Der Name des zu setzenden Headers.
+
value
+
Der Wert des zu setzenden Headers.
+
+ +

Nicht-Standard Methoden

+ +

init()

+ +

Initialisiert das Objekt für die Verwendung aus C++ Code.

+ +
Warnung: Diese Methode darf nicht aus JavaScript heraus aufgerufen werden.
+ +
[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+
+ +
Parameter
+ +
+
principal
+
Das Prinzipal, das für die Anfrage benutzt werden soll; darf nicht null sein.
+
scriptContext
+
Der Skript-Kontext, der für die Anfrage benutzt werden soll; darf nicht null sein.
+
ownerWindow
+
Das Fenster, das zu der Anfrage gehört; darf null sein.
+
+ +

openRequest()

+ +

Initialisiert eine Anfrage. Diese Methode ist zur Verwendung in nativem Code; um eine Anfrage in JavaScript Code zu initialisieren, ist stattdessen open() zu verwenden. Siehe Dokumentation für open().

+ +

sendAsBinary()

+ +

Eine Variante der send() Methode, die binäre Daten schickt.

+ +
void sendAsBinary(
+   in DOMString body
+);
+
+ +

Diese Methode, zusammen mit der readAsBinaryString Methode der FileReader API, ermöglichen das Lesen und den Upload jeglicher Dateitypen und das Stringifizieren der Rohdaten.

+ +
Parameter
+ +
+
body
+
Der Körper der Anfrage als DOMstring. Diese Daten werden durch Beschneiden (Entfernen des höherwertigen Bytes jedes Zeichens) in Einzel-Byte-Zeichen umgewandelt.
+
+ +
sendAsBinary() polyfill
+ +

Da sendAsBinary() ein experimentelles Feature ist, kommt hier ein Polyfill für Browser, die sendAsBinary() nicht unterstützen, dafür aber typisierte Arrays.

+ +
/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* sende als ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...oder als ArrayBuffer (altmodisch)...: this.send(ui8Data.buffer); */
+  };
+}
+ +
Anmerkung: Dieses Polyfill kann mit zwei Datentypen als Argument für send() gebaut werden: einem ArrayBuffer (ui8Data.buffer – kommentierter Code) oder einer ArrayBufferView (ui8Data, das ist ein typisiertes Array von 8-bit Ganzzahlen ohne Vorzeichen – unkommentierter Code). Wenn man jedoch in Google Chrome versucht, einen ArrayBuffer zu senden, erscheint die folgende Warnmeldung: ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.
+ +

Anmerkungen

+ + + +

Events

+ +

onreadystatechange als eine Eigenschaft der XMLHttpRequest Instanz wird von allen Browsern unterstützt.

+ +

Seither wurden einige zusätzliche Event Handler in verschiedenen Browsern implementiert (onload, onerror, onprogress, etc.). Diese werden in Firefox unterstützt. Für Genaueres, siehe {{interface("nsIXMLHttpRequestEventTarget")}} und Using XMLHttpRequest.

+ +

Neuere Browser, inklusive Firefox, unterstützen das 'Horchen' nach XMLHttpRequest Ereignissen mittels der Standard addEventListener APIs zusätzlich zum Setzen von on* Eigenschaften auf eine Handler Funktion.

+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundsätzliche Unterstützung (XHR1)11.05 (via ActiveXObject)
+ 7 (XMLHttpRequest)		{{CompatVersionUnknown}}1.2
send(ArrayBuffer)99{{compatUnknown}}11.60{{compatUnknown}}
send(Blob)73.6{{compatUnknown}}12{{compatUnknown}}
send(FormData)64{{compatUnknown}}12{{compatUnknown}}
sendAsBinary(DOMString){{compatNo}} – benutze polyfill1.9{{compatUnknown}}{{compatUnknown}}{{compatUnknown}}
response1061011.60{{compatUnknown}}
responseType = 'arraybuffer'1061011.60{{compatUnknown}}
responseType = 'blob'1961012{{compatUnknown}}
responseType = 'document'181110{{CompatNo}}{{CompatNo}}
responseType = 'json'{{CompatNo}}10{{CompatNo}}12{{CompatNo}}
Progress Events73.51012{{compatUnknown}}
withCredentials33.510124
timeout{{CompatNo}}12.08{{compatUnknown}}{{CompatNo}}
responseType = 'moz-blob'{{CompatNo}}12.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome für AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundsätzliche Unterstützung{{CompatUnknown}}0.16{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Gecko Anmerkungen

+ +

Gecko 11.0 {{geckoRelease("11.0")}} entfernte die Unterstützung für die Verwendung der responseType und withCredentials Attribute bei der Durchführung synchroner Anfragen. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.

+ +

Gecko 12.0 {{geckoRelease("12.0")}} und spätere unterstützen die Verwendung von XMLHttpRequest zum Lesen von data: URLs.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..f15901a388 --- /dev/null +++ b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,789 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +
{{APIRef ("XMLHttpRequest")}}
+ +

In diesem Handbuch wird erläutert, wie Sie mit {{domxref ("XMLHttpRequest")}} HTTP- Anforderungen ausgeben , um Daten zwischen der Website und einem Server auszutauschen . Beispiele für häufig vorkommende und unklarere Anwendungsfälle XMLHttpRequestsind enthalten.

+ +

Um eine HTTP-Anfrage zu senden, erstellen Sie ein XMLHttpRequestObjekt, öffnen Sie eine URL und senden Sie die Anfrage. Nach Abschluss der Transaktion enthält das Objekt nützliche Informationen wie den Antworttext und den HTTP-Status des Ergebnisses.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Arten von Anfragen

+ +
+

Eine Anforderung über XMLHttpRequestkann die Daten auf zwei Arten asynchron oder synchron abrufen. Die Art der Anforderung wird durch das optionale asyncArgument (das dritte Argument) bestimmt, das für die Methode {{domxref ("XMLHttpRequest.open ()")}} festgelegt wird. Wenn dieses Argument angegeben ist trueoder nicht, XMLHttpRequestwird das asynchron verarbeitet, andernfalls wird der Prozess synchron behandelt. Eine ausführliche Diskussion und Demonstration dieser beiden Arten von Anforderungen finden Sie auf der Seite für synchrone und asynchrone Anforderungen . Verwenden Sie keine synchronen Anforderungen außerhalb von Web Workers.

+
+ +
Hinweis: Ab Gecko 30.0 {{geckoRelease ("30.0")}} sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet.
+ +
Hinweis: Die Konstruktorfunktion XMLHttpRequestist nicht nur auf XML-Dokumente beschränkt. Es beginnt mit "XML", da das Hauptformat, das ursprünglich für den asynchronen Datenaustausch verwendet wurde, bei der Erstellung XML war
+ +

Umgang mit Antworten

+ +

Es gibt verschiedene Arten von Antwortattributen, die durch die Living Standard-Spezifikation für den Konstruktor {{domxref ("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest ()")}} definiert sind. Diese teilen dem Kunden die XMLHttpRequestwichtigen Informationen über den Status der Antwort mit. In den folgenden Abschnitten werden einige Fälle beschrieben, in denen der Umgang mit Nicht-Text-Antworttypen möglicherweise manipuliert und analysiert wird.

+ +

Analysieren und Bearbeiten der responseXML-Eigenschaft

+ +

If you use XMLHttpRequest to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:

+ +
    +
  1. Using XPath to address (or point to) parts of it.
    2. +
  2. Manually Parsing and serializing XML to strings or objects.
    3. +
  3. Using {{domxref("XMLSerializer")}} to serialize DOM trees to strings or to files.
    4. +
  4. {{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.
    5. +
+ +
+

Note: XMLHttpRequest can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about HTML in XMLHttpRequest to learn how to do this.

+
+ +

Processing a responseText property containing an HTML document

+ +

If you use XMLHttpRequest to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:

+ +
    +
  1. Use the XMLHttpRequest.responseXML property as covered in the article HTML in XMLHttpRequest.
    2. +
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. +
  3. {{jsxref("RegExp")}} can be used if you always know the content of the HTML responseText beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.
    4. +
+ +

Handling binary data

+ +

Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the XMLHttpRequest object and is a workable solution.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.

+ +

For example, consider this snippet, which uses the responseType of "arraybuffer" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();
+ +

For more examples check out the Sending and Receiving Binary Data page

+ +

Monitoring progress

+ +

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

+ +

Support for DOM {{event("progress")}} event monitoring of XMLHttpRequest transfers follows the specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:

+ +
+
{{event("progress")}}
+
The amount of data that has been retrieved has changed.
+
{{event("load")}}
+
The transfer is complete; all data is now in the response
+
+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total * 100;
+    // ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  console.log("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  console.log("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  console.log("The transfer has been canceled by the user.");
+}
+ +

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

+ +
Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.
+ +

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. However, if the lengthComputable field is false, the total length is not known and will be zero.

+ +

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+ +
Note: Progress events are not available for the file: protocol.
+ +
+

Note: Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.

+
+ +
+

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

+
+ +

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

+ +
req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+
+ +

Note there is no way to be certain, from the information received by the loadend event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.

+ +

Submitting forms and uploading files

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
+ Using only AJAX is more complex, but typically more flexible and powerful.

+ +

Using nothing but XMLHttpRequest

+ +

Submitting forms without the FormData API does not require other APIs for most use cases. The only case where you need an additional API is if you want to upload one or more files, where you use the {{domxref("FileReader")}} API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider the submission of a form containing only two fields, named foo and baz. If you are using the POST method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:

+ + + +

However, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
+          oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
+            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* How should I treat a text/plain form encoding?
+       What characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ?
+        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" +
+                oField.name + "\"; filename=\"" + oFile.name +
+                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or
+             method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length;
+              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

To test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content:

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

The syntax to activate this script is simply:

+ +
AJAXSubmit(myForm);
+ +
Note: This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered an experimental technique. If you do not need to upload binary files, this framework works fine in most browsers.
+ +
Note: The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Using FormData objects

+ +

The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the Using FormData Objects page. For didactic purposes here is a translation of the previous example transformed to use the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" charset="UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script>
+"use strict";
+
+function ajaxSuccess () {
+  console.log(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
+          oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length;
+            sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+</body>
+</html>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the {{domxref("FileReader")}} API also: files are automatically loaded and uploaded.
+ +

Get last modified date

+ +
function getHeaderTime () {
+  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create two functions:

+ +
function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

And to test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know if the current page has changed, please read the article about {{domxref("document.lastModified")}}.

+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the Cross-Origin Resource Sharing (CORS) standard. As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work. Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you conclude with an XMLHttpRequest receiving status=0 and statusText=null, this means the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently open(). This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.

+ +

Workers

+ +

Setting overrideMimeType does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
+ +

Browser compatibility

+ + + +

{{Compat ("api.XMLHttpRequest")}}

+ +

Siehe auch

+ +
    +
  1. MDN AJAX Einführung
    2. +
  2. HTML in XMLHttpRequest
    3. +
  3. HTTP-Zugriffskontrolle
    4. +
  4. So überprüfen Sie den Sicherheitsstatus einer XMLHTTPRequest über SSL
    5. +
  5. XMLHttpRequest - REST und die Rich User Experience
    6. +
  6. Microsoft-Dokumentation
    7. +
  7. "Verwenden des XMLHttpRequest-Objekts" (jibbering.com)
    8. +
  8. Das XMLHttpRequestObjekt: WHATWG-Spezifikation
    9. +
diff --git a/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..3aa0530a35 --- /dev/null +++ b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,232 @@ +--- +title: Übersicht zu barrierefreien Web-Applikationen und Komponenten +slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Guide + - Handbuch + - Komponente + - Web apps +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

Das Web entwickelt sich weiter: Statische seitenbasierte Websites werden zunehmend durch dynamische, desktopartige Web-Applikationen ersetzt, die mit JavaScript und AJAX arbeiten. Designer erstellen allein durch die Kombination von JavaScript, HTML und CSS beeindruckende neue Benutzeroberflächen und Steuerungsmechanismen. Dieser Wandel hat das Potential, durch responsives Design die Benutzerfreundlichkeit enorm zu verbessern, doch besteht für viele Benutzer die Gefahr wegen Zugänglichkeitsbarrieren ausgeschlossen zu werden. JavaScript hat keinen sehr guten Ruf, was die Barrierefreiheit anbelangt, da JavaScript-Techniken oft Probleme in Kombination mit Unterstützungstechnologie wie z.B. Screenreadern verursachen. Es gibt jedoch andere Möglichkeiten, dynamische Oberflächen zu erstellen, damit diese auch für Menschen mit Behinderungen ohne Einschränkungen benutzbar sind.

+ +

Das Problem

+ +

Die meisten JavaScript-Toolkits stellen eine Bibliothek für clientseitige Komponenten bereit, welche den Benutzeroberflächen von bekannten Desktopumgebungen nachempfunden sind. Slider, Menüleisten, Dateisystem-Bäume usw. lassen sich mit einer Kombination von JavaScript, CSS und HTML erstellen. In der HTML4-Spezifikation werden keine Tags festgelegt, welche diese Komponenten semantisch beschreiben und Entwickler greifen daher üblicherweise auf Tags wie <div> und <span> zurück. Die so entwickelten Oberflächen sehen Desktop-Applikation sehr ähnlich, enthalten jedoch in der Regel nicht genügend semantische Informationen, um die korrekte Funktion unterstützender Technologie zu gewährleisten. So können dynamische Inhalte einer Webseite von Benutzern, die z.B. eine Website (aus welchen Gründen auch immer) nicht sehen können, nicht vollständlig erfasst werden. Börsenticker, Updates von Twitter-Feeds, Fortschrittsanzeigen und ähnliche Komponenten manipulieren das DOM auf eine Weise, die von Unterstützungstechnologie nicht erkannt werden kann. An dieser Stelle kommt ARIA zum Einsatz.

+ +

Beispiel 1: Markup für eine Tabs-Komponente mit ARIA-Labeln. Im Markup sind keine Informationen enthalten, welche die Form und Funktion der Komponente beschreiben.

+ +
<!-- Dies ist eine Komponente für Tabs. Wie könnten Sie das wissen, würden sie nur das Markup betrachten? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Chapter 1 content goes here</div>
+  <div id="ch2Panel">Chapter 2 content goes here</div>
+  <div id="quizPanel">Quiz content goes here</div>
+</div>
+ +

Beispiel 2: Die Tabs-Komponente könnte z.B. wie folgt aussehen. Bei der visuellen Betrachtung lässt sich dies erkennen, es gibt jedoch keine maschinenlesbare Beschreibungen für Unterstützungstechnologie.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

WAI-ARIA, die Spezifikation für Accessible Rich Internet Applications der Web Accessibility Initiative des W3C beschreibt, wie fehlende semantischen Informationen hinzugefügt werden können, die für das Erfassen der Inhalte bei der Benutzung von Unterstützungstechnologie, wie z.B. Screen Readern, benötigt werden. ARIA ermöglicht Entwicklern, ihre Komponenten genauer zu beschreiben, indem dem Markup spezielle Attribute hinzugefügt werden. ARIA wurde entwickelt, um die Lücke zwischen Standard-HTML-Tags und desktopartigen Komponenten von dynamischen Web-Applikationen zu schließen und legt Rollen- und Zustansbeschreibungen für verbreitete UI-Komponenten fest.

+ +

Die ARIA-Spezifikation beschreibt drei verschiedene Arten von Attributen: Rollen, Zustände und Eigenschaften. Rollen werden Komponenten zugewiesen, die bei HTML4 nicht vorhanden sind, wie z.B. Slider, Menüleisten, Tabs und Dialoge. Eigenschaften beschreiben Charakteristiken dieser Komponenten, wie z.B. ob sie per Drag & Drop ziehbar sind, ein benötigtes Element besitzen oder ein Popup mit ihnen verbunden ist. Zustände beschreiben den aktuellen Interaktionsstatus eines Elements - so wird der Unterstützungstechnologie mitgeteilt, ob das Element gerade beschäftigt, deaktiviert, selektiert oder versteckt ist.

+ +

ARIA-Attribute sind dafür geschaffen, automatisch vom Browser interpretiert und für die nativen Barrierefreiheit-APIs des jeweiligen Betriebssystems übersetzt zu werden. Wenn ARIA vorhanden ist, kann die Unterstützungstechnologie JavaScript-Komponenten erkennen und mit diesen interagieren, auf dieselbe Weise wie bei Desktop-Software. Hierdurch kann eine konsistentere Benutzerführung ermöglicht werden, als noch bei älteren Generationen von Web-Applkationen, da Benutzer von Unterstützungstechnologie auch bei webbasierten Applikationen auf ihre Kenntnisse über Desktop-Software zurückgreifen können.

+ +

Beispiel 3: Markup für die Tabs-Komponente mit hinzugefügten ARIA-Attributen.

+ +
<!-- Durch die zugeteilte Rolle sind die Tabs erkennbar! -->
+<!-- role-Attribute wurden der Liste und den einzelnen Elementen hinzugefügt. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Beachten Sie die Attribute 'role' und 'aria-labelledby', welche die Tab-Panels beschreiben. -->
+  <div id="ch1Panel" role=”tabpanel” aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role=”tabpanel” aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role=”tabpanel” aria-labelledby="quizTab">Quiz content goes here</div>
+</div>
+
+ +

ARIA wird von allen aktuellen Versionen der bekannten Browser unterstützt, einschließlich Firefox, Safari, Opera, Chrome und Internet Explorer. Viele Unterstützungstechnologien, wie z.B. die Open-Source-Screenreader NVDA und Orca, unterstützen ARIA ebenfalls. Auch JavaScript-Biblitheken wie jQuery UI, YUI, Google Closure und Dojo Dijit setzen ARIA-Markup ein.

+ +

Darstellungänderungen

+ +

Dynamische Änderungen der Darstellung sind zum Beispiel die Veränderung der Elementeigenschaften mit CSS (wie z.B. ein roter Rand um ein Feld, das fehlerhafte Daten enthält oder eine Farbänderung bei einer aktivierten Checkbox) oder das Anzeigen und Verstecken von Inhalten.

+ +

Zustandsänderungen

+ +

ARIA stellt Attribute zur Deklaration des aktuellen Zustands von Komponenten bereit. Die Beispiele in dieser Einführung werden die folgenden Attribute verwendet (es gibt allerdings noch einige mehr):

+ + + +

(Eine komplette Liste aller Zustände finden Sie in der Liste zu ARIA-Zuständen und Eigenschaften)

+ +

Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).

+ +

Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.

+ +

Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.

+ +

Beispiel 1a. HTML für ein selektierbares Menü (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
+  <li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true">Sans-serif</li>
+  <li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false">Serif</li>
+  ...
+
+ +

Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.

+ +

Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+
+ +

Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.

+ +

Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 && sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+
+ +

Änderung der Sichtbarkeit

+ +

Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft aria-hidden verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (display:none) eingesetzt werden, um das Element zu verstecken.

+ +

Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip bei dem das Attribut aria-hidden eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.

+ +

Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von aria-hidden auf true gesetzt.

+ +

Beispiel 2a. HTML für ein Tooltip (übernommen von http://www.oaa-accessibility.org/example/39/).

+ +
<div class="text">
+    <label id="tp1-label" for="first">First Name:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Your first name is a optional</div>
+</div>
+
+ +

Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute aria-hidden geändert.

+ +

Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von
+ http://www.oaa-accessibility.org/example/39/).

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+
+ +

Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft aria-hidden. Wieder wird per Skript nur die Attribute aria-hidden in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.

+ +

Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/39/).

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Role changes

+ +
+
In Bearbeitung
+
+ +

Mit ARIA können Entwicklern solchen Elementen, bei denen wichtige semantische Informationen fehlen, eine Rolle zuweisen. Wenn z.B. eine ungeordnete Liste für die Erstellung eines Menüs benutzt wird, sollte dem ul-Elemente die Rolle menubar zugeteilt werden und jedem untergeordneten li-Listenelement die Rolle menuitem.

+ +

Die Rolle eines Elements sollte nicht verändert werden. Stattdessen sollte das bestehende Element entfernt und ein neues Element mit neuer Rolle hinzugefügt werden.

+ +

Wenn man z.B. eine Texteditor-Komponente mit einem Ansichtsmodus und einem Editiermodus erstellen möchte, dann kommt ein Entwickler vielleicht auf die Idee für das Textfeld ein schreibgeschütztes input-Element einzusetzen, diesem für den Ansichtsmodus die Rolle button zuzuweisen und beim Wechsel in den Editiermodus die Rolle und den Schreibschutz zu entfernen (da input-Elemente eigene Rollen zugewiesen werden können).

+ +

Diese Vorgehensweise ist keine gute Idee. Stattdessen sollte für den Ansichtsmodus ein anderes Element, wie z.B. ein div- oder span-Element mit der Rolle button verwendet werden und für den Editiermodus ein input-Textelement.

+ +

Asynchrone Inhaltsänderungen

+ +
In Bearbeitung. Siehe auch Live Regions
+ +

Tastaturnavigation

+ +

Von Entwicklern wird oft wenig darauf geachtet, ob Oberflächenkomponenten auch mit der Tastatur bedienbar sind. Damit die Kompnenten für möglichst viele Benutzer zugänglich sind, sollte für alle Funktionen der Komponenten einer Web-Applikation überprüft werden, ob sie auch ausschließlich mit Tastatur und ohne Maus bedient werden können. Für die praktische Umsetzung sollten die üblichen Konventionen für Desktop-Komponenten befolgt werden, also die Benutzung von Tab-, Enter-, Leertaste und Pfeiltasten ermöglicht werden.

+ +

Traditionell ist die Tastaturnavigation im Web auf die Tab-Taste begrenzt. Der Nutzer drückt Tab um jeden Link, Button oder Formular auf der Seite nacheinander zu fukussieren, Shift-Tab um zum letzten Element zu springen. Das ist eine eindimensionale Form der Navigation—vor und zurück, ein Element pro Schritt. Auf sehr umfangreichen Seiten muss ein Nutzer der Tastaturnavigation oft dutzende Male die Tab-Taste drücken, um zu dem gewünschten Bereich zu kommen. Die Implementierung von Navigationskonventionen von Desktop-Programmen im Web hat das Potential die Navigation für viele Nutzer zu beschleunigen.

+ +

Hier eine Zusammenfassung wie Tastaturnavigation in einer ARIA-unterstützten Web-Applikation funktionieren sollte:

+ + + +

In dem Beispiel der Tab-Komponente oben sollte der Nutzer also in der Lage sein mit den Tab- und Shift-Tab Tasten in und aus dem Komponenten-Container (<ol> in unserem Beispiel) zu navigieren. Sobald der Fokus innerhalb des Containers liegt, sollten die Pfeiltasten dem Nutzer erlauben zwischen den einzelnen Tabs (die <li> Elemente) zu navigieren. Ab hier variieren die Konventionen je nach Plattform. Unter Windows wird der nächste Tab automatisch aktivieren, wenn der Nutzer die Pfeiltasten drückt. Unter macOS, kann der Nutzer entweder die Enter- oder die Leertaste drücken, um den nächsten Tab zu aktivieren. Ein umfangreiches Tutorial zur Erstellung von Tastaturnavigation in JavaScript Komponenten beschreibt wie man diese Funktionsweise mit JavaScript implementieren kann.

+ +

Für mehr Details zu Koventionen bei desktopartiger Tastaturnavigation gibt es einen umfangreichen DHTML style guide. Dieser stellt einen Überblick darüber bereit, wie Tastaturnavigation in jeder von ARIA unterstützten Komponente funktionieren sollte. Die W3C bietet ebenfalls ein hilfreiches ARIA Best Practices Dokument, das Konventionen für Tastaturnavigation und Shortcuts für eine Vielzahl von Komponenten beinhaltet.

+ + + + diff --git a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html new file mode 100644 index 0000000000..4e1f22e0b5 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html @@ -0,0 +1,89 @@ +--- +title: ARIA Live-Regionen +slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +

Einführung

+

In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.

+

Einfache Live-Regionen

+

 

+

Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.

+
    +
  1. aria-live: Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.
    2. +
  2. +

    aria-controls: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".

    +
    + Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
    +
    3. +
+

In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.

+

Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.

+

Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen

+

Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.

+

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

+

<div role="region" id="bird-info" aria-live="polite">

+

Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.

+

Bevorzugung von spezialisierten Live-Region-Rollen

+

Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RolleBeschreibungHinweise zur Kompatibilität
logChat, Fehler, Spiel oder andere LogsZur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
statusEine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
alertEine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind  insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird.  (TBD: check to see if this is necessary or causes double speaking issues.)
progressbarEine Kombination aus einer Komponente und einer Live-Region.  Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here). 
marqueeFür scrollenden Text, wie z.B. ein Börsenticker. 
timerJede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr. 
+

Fortgeschrittene Live-Regionen

+

(TBD: what is supported where?)

+
    +
  1. aria-atomic: Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.
    2. +
  2. aria-relevant: Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".
    3. +
  3. aria-labelledby: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.
    4. +
  4. aria-describedby: Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.
    5. +
+

Fortgeschrittenes Einsatzszenario: Roster

+

Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.

+
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
+	<!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt -->
+</ul>
+
+

Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:

+ +

TBD: Realistic use case for aria-atomic="true"

diff --git a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html new file mode 100644 index 0000000000..85059df7a2 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html @@ -0,0 +1,168 @@ +--- +title: ARIA Techniken +slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

 

+ +

 Rollen

+ +

 

+ +

Widget Rollen

+ +
+ +
+ +

Zusammengesetzte Rollen

+ +

Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.

+ + +
+ +
+ +

Dokumentstruktur Rollen

+ +
+ +
+ +

Grenzrollen

+ +
+ +
+ +

Zustände und Eigenschaften

+ +

 

+ +

Widget Eigenschaften

+ +
+ +
+ +

Live Region Attribute

+ +
+ +
+ +

Drag & drop Attribute

+ +
+ +
+ +

Beziehungs Attribute

+ +
+ +
diff --git a/files/de/web/barrierefreiheit/aria/index.html b/files/de/web/barrierefreiheit/aria/index.html new file mode 100644 index 0000000000..c282ef8f95 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/index.html @@ -0,0 +1,137 @@ +--- +title: ARIA +slug: Web/Barrierefreiheit/ARIA +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.

+ +

ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut role definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.

+ +

ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.

+ +

Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der Diskussionsseite hinzu.

+ + + + + + + + + + + + + +
+

Einführung in ARIA

+ +
+
Einführung in ARIA
+
Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische Einführung von Gez Lemon von 2008.
+
Web-Applikationen und ARIA-FAQ
+
Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.
+
Videos von Screen-Readern mit ARIA
+
Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.
+
Benutzung von ARIA mit HTML
+
Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.
+
+ +

Einfache Verbesserungen mit ARIA

+ +
+
Enhancing Page Navigation with ARIA Landmarks
+
Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).
+
Verbesserung der Zugänglichkeit von Formularen
+
ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.
+
Live-Regions (work-in-progress)
+
Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.
+
Using ARIA Live Regions to Announce Content Changes
+
Eine kurze Übersicht über Live-Regionen von den Machern  der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).
+
+ +

ARIA für JavaScript-Widgets

+ +
+
Tastaturgesteuerte JavaScript-Komponenten
+
Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der Artikel von Yahoo! zum Focus Management liefert ebenfalls eine gute Beschreibung.
+
Style-Guide für die Tastaturnavigation
+
Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.
+
+ +

Weitere Informationen zu ARIA

+ +
+
Widget-Techniken, Tutorials und Beispiele
+
Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.
+
ARIA-erweiterte JavaScript UI-Libraries
+
Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein!  Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.
+
Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen
+
Beinhaltet auch Präsentationen und Beispiele.
+
+ 		+

Mailing-Liste

+ +
+
Free ARIA Google Group
+
Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.
+
+ +

Blogs

+ +

ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.

+ +

Paciello Group

+ +

Accessible Culture

+ +

Yahoo! Accessibility

+ +

Fehler melden

+ +

Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries.

+ +

Beispiele

+ +
+
Verzeichnis für ARIA-Beispiele
+
Einige Beispieldateien mit Grundstruktur von denen man lernen kann.
+
Beispiele für zugängliche JS-Widget-Libraries
+
Dojo, jQuery, Fluid, YUI
+
+ +
+
Yahoo! Mail
+
Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein Review über Yahoo! Mail des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".
+
+ +
+
Yahoo! Search
+
Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die Technik ausführlich dokumentiert. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.
+
+ +

Bemühungen zur Standardisierung

+ +
+
Übersicht zu den WAI-ARIA Aktivitäten des W3C
+
Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).
+
WAI-ARIA Spezifikation
+
Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.
+
WAI-ARIA Authoring Practices
+
Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.
+
+ Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.
+
Open AJAX Accessibility Task Force
+
Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.
+
In der Entwicklung: WCAG 2.0 ARIA Techniken
+
Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.
+
+
+ + +
+
Accessibility, AJAX, JavaScript
+
+
+ +

 

diff --git a/files/de/web/barrierefreiheit/index.html b/files/de/web/barrierefreiheit/index.html new file mode 100644 index 0000000000..417c160fd0 --- /dev/null +++ b/files/de/web/barrierefreiheit/index.html @@ -0,0 +1,78 @@ +--- +title: Barrierefreiheit +slug: Web/Barrierefreiheit +tags: + - Accessibility + - Barrierefreiheit +translation_of: Web/Accessibility +--- +

Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.

+ +

For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.

+ +

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."

+ +
+
+

Key tutorials

+ +

The MDN Accessibility Learning Area contains modern, up-to-date tutorials covering accessibility essentials:

+ +
+
What is accessibility?
+
This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.
+
HTML: A good basis for accessibility
+
A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.
+
CSS and JavaScript accessibility best practices
+
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.
+
WAI-ARIA basics
+
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
+
Accessible multimedia
+
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
+
Mobile accessibility
+
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+
+ +
+

Other documentation

+ +
+
Understanding the Web Content Accessibility Guidelines
+
+

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

+
+
Keyboard-navigable JavaScript widgets
+
Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.
+
ARIA
+
A collection of articles to learn how to use ARIA to make your HTML documents more accessible.
+
Assistive technology (AT) development
+
A collection of articles intended for AT developers
+
Mobile accessibility checklist
+
This document provides a concise checklist of accessibility requirements for mobile app developers.
+
Cognitive accessibility
+
When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.
+
Accessibility for seizure disorders
+
Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.
+
+
+ +

View all articles about Accessibility...

+
+ + +
+ +

W3C - Accessibility

+ +

See also

+ + + + diff --git a/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html new file mode 100644 index 0000000000..2dedfc7aab --- /dev/null +++ b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html @@ -0,0 +1,145 @@ +--- +title: Tastaturgesteuerte JavaScript-Komponenten +slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +

Tastaturgesteuerte JavaScript-Komponenten

+

Übersicht

+

Bei der Erstellung von Desktopkomponenten für Web-Applikationen, wie z.B. Menüs, Baumansichten, Richtext-Felder und Tab-Panels kommt in der Regel JavaScript zum Einsatz. Die Komponenten bestehen üblicherweise aus {{ HTMLElement("div") }}- und {{ HTMLElement("span") }}-Elementen, die von Haus aus nicht die gleiche Funktionalität wie echte Desktopkomponenten besitzen. Dieses Dokument beschreibt Techniken, die eingesetzt werden können, um JavaScript-Komponenten über die Tastatur zugänglich zu machen.

+

Benutzung von tabindex

+

Das tabindex-Attribut wurde zu Beginn als Teil von HTML 4 eingeführt, um Entwicklern zu ermöglichen, die Reihenfolge für die Fokussierung von Elementen festzulegen, die vom Benutzer mit der Tastatur angesteuert werden. Das genaue Verhalten von tabindex wurde später etwas abgeändert. Diese Änderungen sind in der HTML 5-Spezifikation beschrieben. Alle bekannten Browser implementieren fortan das neue Design.

+

Die folgende Tabelle beschreibt das Verhalten von tabindex in modernen Browsern:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tabindex-AttributFokussierbar mit der Maus oder JavaScript über element.focus()Tab-navigierbar
Nicht vorhandenFolgt der Festlegung für das Element für die Plattform ("Ja" bei Formularsteuerungen, Links, etc.).Folgt der Festlegung für das Element für die Plattform.
Negativ (z.B. tabindex="-1")JaNein; Entwickler muss auf Tasteneingaben reagieren und das Element über focus() fokussieren.
Null (z.B. tabindex="0")JaIn der Tab-Ordnung relativ zur Position des Elements im Dokument.
Positiv (z.B. tabindex="33")JaWert von tabindex bestimmt die Position des Elements in der Tab-Ordnung: Im Allgemeinen werden Elemente vor solchen positioniert, bei denen tabindex="0" gesetzt ist oder die von Natur aus per Tab steuerbar sind; Elemente mit kleinere Werten werden vor solchen mit größeren Werten positioniert (ein Element mit tabindex="7" wird z.B. vor tabindex="11" positioniert)
+

Einfache Steuerungen

+

Damit z.B. eine einfache Tab-Komponente über die Tastatur bedient werden kann, wird dem entsprechenden {{ HTMLElement("div") }}- oder {{ HTMLElement("span") }}-Element das tabindex-Attribut hinzugefügt. Beim folgenden Beispiel wird diese Technik für eine Checkbox angewendet, die auf einem span-Element basiert.

+

Beispiel 1: Eine einfache Checkbox-Komponente mit einem Bild, welche um das tabindex="0" erweitert wurde und so auch über die Tastatur gesteuert werden kann.

+
<!-- Ohne die tabindex-Attribute könnten die <span>-Elemente nicht mit der Tastatur fokussiert werden -->
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Include decorative fruit basket
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Include singing telegram
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="false" tabindex="0">
+        <img src="unchecked.gif" role="presentation" alt="" />
+        Require payment before delivery
+    </span>
+</div>
+
+

Gruppieren von Steuerungselementen

+

Für die Gruppierung von Komponenten, wie z.B. Menüs, Tableisten, Grids oder Baumansichten, sollte das Elternelement in die Tab-Ordnung aufgenommen werden (tabindex="0"). Außerdem sollte jede(s) untergeordnete Auswahl/Tab/Zelle/Reihe aus der Tabordnung entfernt werden (tabindex="-1"). Die untergeordneten Elemente sollten vom Benutzer über die Pfeiltasten angesteuert werden können (Eine ausführliche Beschreibung der Tastaturunterstützung, die im Allgemeinen für bestimmte Komponenten erwartet wird, finden Sie im DHTML Style Guide).

+

Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das <ul>-Element erreicht, muss der JavaScript-Entwickler den Fokus programmatisch steuern und auf das Drücken der Pfeiltasten reagieren. Techniken für die Steuerung des Fokus innerhalb von Komponenten, sind im Abschnitt "Steuerung des Fokus innerhalb von Gruppen" weiter unten beschrieben.

+

Beispiel 2: Eine Menüsteuerung bei der mit tabindex die Tastaturnavigation gesteuert wird.

+
<ul id="mb1" tabindex="0">
+  <li id="mb1_menu1" tabindex="-1"> Font
+    <ul id="fontMenu" title="Font" tabindex="-1">
+      <li id="sans-serif" tabindex="-1">Sans-serif</li>
+      <li id="serif" tabindex="-1">Serif</li>
+      <li id="monospace" tabindex="-1">Monospace</li>
+      <li id="fantasy" tabindex="-1">Fantasy</li>
+    </ul>
+  </li>
+  <li id="mb1_menu2" tabindex="-1"> Style
+    <ul id="styleMenu" title="Style" tabindex="-1">
+      <li id="italic" tabindex="-1">Italics</li>
+      <li id="bold" tabindex="-1">Bold</li>
+      <li id="underline" tabindex="-1">Underlined</li>
+    </ul>
+  </li>
+  <li id="mb1_menu3" tabindex="-1"> Justification
+    <ul id="justificationMenu" title="Justication" tabindex="-1">
+      <li id="left" tabindex="-1">Left</li>
+      <li id="center" tabindex="-1">Centered</li>
+      <li id="right" tabindex="-1">Right</li>
+      <li id="justify" tabindex="-1">Justify</li>
+    </ul>
+  </li>
+</ul>
+

Deaktivierte Steuerungen

+

Wenn Sie ein Steuerelement deaktivieren, sollte dieses aus der Tab-Ordnung entfernt werden, indem tabindex="-1" gesetzt wird. Elemente, die Teil einer Komponentengruppe (wie z.B. Menüpunkte in einem Menü) sind, sollten über die Tastatur ansprechbar bleiben.

+

Steuerung des Fokus innerhalb von Gruppen

+

Wenn ein Benutzer den Fokus per Tab von einem Element wegbewegt, sollte der Fokus zu dem Element, das zuvor fokussiert war - z.B. einer Baumkomponente oder Gridzelle - zurückkehren. Es existieren zwei verschiedene Techniken, um dies zu bewirken:

+
    +
  1. Verschiebung von tabindex: Programmatische Bewegung des Fokus
    2. +
  2. aria-activedescendent: Verwaltung eines "virtuellen" Fokus
    3. +
+

Technik 1: Verschiebung von tabindex

+

Setzt man tabindex für das fokussierte Element auf "0", wird das ausgewählte Element innerhalb der Gruppe erneut fokussiert, wenn der Benutzer den Fokus per Tab fortbewegt und dann zu diesem Element zurückkehrt. Beachten Sie, dass bei der Aktualisierung von tabindex auf 0 für des zuvor selektierte Element tabindex="-1" gesetzt werden muss. Diese Technik wird auch verwendet, wenn auf Tastendrücke reagiert und der Fokus programmatisch weiterbewegt wird. Der tabindex wird dann entspechend aktualisiert, um das aktuell fokussierte Element anzuzeigen. Dies lässt sich wie folgt umsetzen:

+

Jeweils ein keydown-Hander wird mit einem Element der Gruppe verknüpft. Wenn der Benutzer eine Pfeiltaste drückt, um ein anderes Element anzusteuern, passiert Folgendes:

+
    +
  1. Das neue Element wird codegesteuert fokussiert.
    2. +
  2. Der tabindex des fokussierten Elements wird auf "0" gesetzt.
    3. +
  3. Der tabindex des zuvor fokussierte Elements wird auf "-1" gesetzt.
    4. +
+

Hier finden Sie ein Beispiel für eine WAI-ARIA Baumansicht bei der diese Technik eingesetzt wird.

+
Tipps
+
Mit element.focus() den Fokus setzen
+

Benutzen Sie nicht die Funktionen createEvent(), initEvent() und dispatchEvent() um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf element.focus() zurück.

+
Mit onfocus den Fokus überprüfen
+

Gehen Sie nicht davon aus, dass Fokusänderungen allein über die Tastatur oder Maus initiiert werden: Assistierende Technologien, wie z.B. Screenreader, sind in der Lage den Fokus für jedes fokussierbare Element zu setzen. Benutzen Sie daher onfocus und onblur um Fokusänderungen zu verfolgen.

+

onfocus und onblur können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.

+

Technik 2: aria-activedescendant

+

Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und aria-activedescendant dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (Mehr Informationen über ARIA finden Sie indieser Übersicht).

+

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

+

Die Eigenschaft aria-activedescendent enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von aria-activedescendent aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des ARIA-Radiogruppen-Beispiels.

+
Tipps
+
scrollIntoView
+

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the quirksmode test.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell fokussierte Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion element.scrollIntoView() eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem Quirksmode-Test, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.

+
Probleme
+ +

Allgemeine Richtlinien

+

Benutzung von onkeydown, um auf Tastendrücke zu reagieren (nicht onkeypress)

+

Der Internet Explorer führt keypress-Events für nicht-alpahnumerische Zeichen nicht aus. Benutzen Sie stattdessen das onkeydown-Event.

+

Tastatur- und Mausbedienung sollte konsistent sein

+

Um sicherzustellen, dass Benutzereingaben unabhängig vom Eingabegerät konstistent sind, sollten Tastatur- und Maus-Eventhandler denselben Code verwenden. Zum Beispiel sollte der Code, womit der tabindex oder das Aussehen festgelegt wird, wenn die Pfeiltasten benutzt werden, auch für die Mausklick-Handler verwendet werden, damit dieselben Änderungen stattfinden.

+

Aktivierung von Elementen per Tastatur

+

Damit die Tastatur für die Aktivierung von Elementen benutzt werden kann, sollte alle Handler, die mit der Mausevents verknüpft sind, auch mit Tastaturevents verknüpft werden. Soll z.B. mit der Enter-Taste ein Element aktiviert werden können, welches über einen Maushandler onclick="doSomething()" mit der Maus verknüpft ist, dann sollte die Funktion doSomething() auch über ein keydown-Event mit der Tastatur verknüpft werden: onkeydown="return event.keyCode != 13 || doSomething();".

+

Verwenden Sie nicht :focus für das Styling (falls Kompatibilität mit IE 7 und ältereren Browsern notwendig)

+

Der Internet Explorer 7 und ältere Versionen unterstützen den Pseudoselektor :focus nicht. Aus diesem Grund sollte er für die Gestaltung von fokussierten Elementen nicht verwendet werden. Stattdessen kann die Darstellung über einen onfucus-Eventhander verändert werden, z.B. indem ein CSS-Style Name dem class-Attribut hinzugefügt wird.

+

Kontinuierliches Anzeigen des Fokus für Elemente mit tabindex="-1", die programmatisch fokussiert werden

+

Der Internet Explorer zeigt die Fokusumrandung für Elemente nicht automatisch an. Die Hervorhebung des fokussierten Elementes muss daher per JavaScript, entweder durch die Änderung der Hintergrundfarbe (z.B. this.style.backgroundColor = "gray") oder Anzeige eines gepunkteten Rahmen (z.B. this.style.border = "1px dotted invert") erfolgen. Entscheiden Sie sich für die zweite Vorgehensweise, sollten die Elementen von Anfang an einen unsichtbaren 1px-Rahmen besitzen, damit sie nicht größer werden, wenn der Rahmen angezeigt wird (Rahmen nehmen Platz in Anspruch und beim IE sind CSS-Outlines nicht implementiert).

+

Verwendete Tastendrücke sollten keine Browserfunktionen auslösen

+

Wenn eine Komponente auf Tastendrücke reagiert, sollte verhindert werden, dass der Browser diese Tastendrücke verarbeitet (z.B. Scrollen mit den Pfeiltasten), indem bei Event-Handlern ein Return-Code angegeben wird. Der Rückgabewert false verhindert, dass das Event an den Browser weitergereicht wird.

+

Hierzu ein Beispiel:

+
<span tabindex="-1" onkeydown="return handleKeyDown();">
+

Gibt die Funktion handleKeyDown() den Wert false zurück, wird das Event übernommen und der Browser so davon abgehalten auf den Tastendruck zu reagieren.

+

Abweichendes Verhalten bei wiederholten Tastendrücken

+

Je nach Betriebssystem kann es leider vorkommen, dass bei wiederholten Tastendrücken onkeydown-Events wiederholt ausgeführt werden oder auch nicht.

diff --git a/files/de/web/barrierefreiheit/webentwicklung/index.html b/files/de/web/barrierefreiheit/webentwicklung/index.html new file mode 100644 index 0000000000..7c0f69c735 --- /dev/null +++ b/files/de/web/barrierefreiheit/webentwicklung/index.html @@ -0,0 +1,58 @@ +--- +title: Webentwicklung +slug: Web/Barrierefreiheit/Webentwicklung +translation_of: Web/Accessibility +--- +

 

+ + + + + + + + +
+

Barrierefreiheit im Web

+ +
+
ARIA für Entwickler
+
+ +
+
ARIA ermöglicht Barrierefreiheit für dynamischen HTML-Content, wie z.B. Live-Content und JavaScript-Widgets.
+
+ +
+
Tastaturgesteuerte JavaScript-Widgets
+
Viele Webentwickler, die ihre <div>- und <span>-basierten Widgets über die Tastatur zugänglich machen wollen,  suchen dafür die passende Technik. Tastaturgesteuerte Zugänglichkeit gehört zu den Techniken, mit denen jeder Webentwickler vertraut sein sollte.
+
+ +

XUL-Barrierefreiheit

+ +
+
 
+
Erstellung von benutzerdefinierten Komponenten mit XUL
+
Wie man DHTML-Techniken für Barrierefreiheit einsetzt, um XUL-Komponenten barrierefrei zu machen.
+
+ +
+
Richtlinien für die Erstellung von barrierefreiem XUL
+
Wenn diese Richtlinen bei der Erstellung von XUL-Komponenten befolgt werden, sind die mit XUL erstellten Benutzeroberflächen barrierefrei. Programmierer, Reviewer, Designer und QS-Tester sollten mit diesen Richtlinien vertraut sein.
+
+ +
+
+ +
+
+ 		+

Externe Informationen

+ +
+
Accessible Web Page Authoring
+
Eine übersichtliche Checkliste für barrierefreie Webentwicklung von IBM.
+
+
+ +

 

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: