From 80c54397e782d58aa6d22cc7ac5267809c7a7c03 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Tue, 30 Aug 2022 00:25:43 +0200 Subject: [PATCH] Retire German (de) + Polish (pl) Moved to https://github.com/mdn/retired-content. See: https://github.com/mdn/retired-content/commit/5cdb0dad537179fd4ded09405c05950f5544e1cf --- files/de/_redirects.txt | 848 - files/de/_wikihistory.json | 14070 ---------------- files/de/games/index.html | 73 - files/de/glossary/abstraction/index.html | 20 - files/de/glossary/accessibility/index.html | 33 - files/de/glossary/adobe_flash/index.html | 16 - files/de/glossary/ajax/index.html | 33 - files/de/glossary/algorithm/index.html | 12 - files/de/glossary/api/index.html | 34 - files/de/glossary/apple_safari/index.html | 23 - files/de/glossary/argument/index.html | 20 - files/de/glossary/aria/index.html | 14 - files/de/glossary/arpa/index.html | 15 - files/de/glossary/array/index.html | 37 - files/de/glossary/ascii/index.html | 15 - files/de/glossary/asynchronous/index.html | 35 - files/de/glossary/atag/index.html | 25 - files/de/glossary/attribute/index.html | 20 - files/de/glossary/bandwidth/index.html | 18 - files/de/glossary/block/css/index.html | 22 - files/de/glossary/block/index.html | 11 - files/de/glossary/block/scripting/index.html | 20 - files/de/glossary/boolean/index.html | 50 - files/de/glossary/bootstrap/index.html | 29 - files/de/glossary/browser/index.html | 27 - files/de/glossary/buffer/index.html | 18 - files/de/glossary/cache/index.html | 17 - files/de/glossary/caldav/index.html | 24 - files/de/glossary/canvas/index.html | 31 - files/de/glossary/card_sorting/index.html | 20 - files/de/glossary/cdn/index.html | 17 - files/de/glossary/character/index.html | 22 - files/de/glossary/chrome/index.html | 12 - files/de/glossary/class/index.html | 21 - files/de/glossary/cms/index.html | 18 - files/de/glossary/codec/index.html | 23 - files/de/glossary/compile_time/index.html | 18 - files/de/glossary/constructor/index.html | 48 - files/de/glossary/cookie/index.html | 20 - .../cors-safelisted_request_header/index.html | 39 - files/de/glossary/cors/index.html | 48 - files/de/glossary/crawler/index.html | 23 - files/de/glossary/crlf/index.html | 30 - files/de/glossary/css/index.html | 48 - files/de/glossary/css_preprocessor/index.html | 24 - files/de/glossary/data_structure/index.html | 17 - .../de/glossary/denial_of_service/index.html | 9 - files/de/glossary/dhtml/index.html | 18 - files/de/glossary/dns/index.html | 15 - files/de/glossary/doctype/index.html | 21 - files/de/glossary/dom/index.html | 29 - files/de/glossary/domain_name/index.html | 20 - files/de/glossary/dos_attack/index.html | 33 - files/de/glossary/ecma/index.html | 19 - files/de/glossary/ecmascript/index.html | 22 - files/de/glossary/element/index.html | 21 - files/de/glossary/empty_element/index.html | 35 - files/de/glossary/encapsulation/index.html | 15 - files/de/glossary/falsy/index.html | 111 - files/de/glossary/firefox_os/index.html | 27 - files/de/glossary/firewall/index.html | 22 - .../glossary/first-class_function/index.html | 102 - files/de/glossary/flex/index.html | 44 - files/de/glossary/flexbox/index.html | 77 - .../glossary/forbidden_header_name/index.html | 50 - files/de/glossary/ftp/index.html | 19 - files/de/glossary/gif/index.html | 17 - files/de/glossary/git/index.html | 15 - files/de/glossary/gpu/index.html | 9 - .../glossary/graceful_degradation/index.html | 36 - files/de/glossary/grid/index.html | 71 - files/de/glossary/gutters/index.html | 72 - files/de/glossary/gzip_compression/index.html | 26 - files/de/glossary/hoisting/index.html | 90 - files/de/glossary/html/index.html | 48 - files/de/glossary/html5/index.html | 17 - files/de/glossary/http/index.html | 22 - files/de/glossary/https/index.html | 19 - files/de/glossary/hyperlink/index.html | 34 - files/de/glossary/ide/index.html | 19 - files/de/glossary/identifier/index.html | 20 - files/de/glossary/ietf/index.html | 19 - files/de/glossary/iife/index.html | 58 - files/de/glossary/imap/index.html | 18 - files/de/glossary/index.html | 25 - files/de/glossary/indexeddb/index.html | 20 - .../information_architecture/index.html | 20 - files/de/glossary/internet/index.html | 22 - files/de/glossary/iso/index.html | 21 - files/de/glossary/jank/index.html | 10 - files/de/glossary/javascript/index.html | 44 - files/de/glossary/jpeg/index.html | 17 - files/de/glossary/json/index.html | 28 - files/de/glossary/local_scope/index.html | 19 - files/de/glossary/local_variable/index.html | 29 - files/de/glossary/localization/index.html | 54 - files/de/glossary/middleware/index.html | 16 - files/de/glossary/mime_type/index.html | 27 - files/de/glossary/mixin/index.html | 21 - files/de/glossary/mozilla_firefox/index.html | 29 - files/de/glossary/namespace/index.html | 18 - files/de/glossary/node.js/index.html | 29 - files/de/glossary/null/index.html | 23 - files/de/glossary/number/index.html | 23 - files/de/glossary/object/index.html | 21 - files/de/glossary/oop/index.html | 21 - files/de/glossary/operand/index.html | 14 - files/de/glossary/operator/index.html | 22 - files/de/glossary/php/index.html | 15 - files/de/glossary/png/index.html | 17 - files/de/glossary/polyfill/index.html | 30 - files/de/glossary/primitive/index.html | 49 - .../progressive_enhancement/index.html | 36 - files/de/glossary/protocol/index.html | 22 - .../prototype-based_programming/index.html | 20 - files/de/glossary/prototype/index.html | 20 - .../de/glossary/regular_expression/index.html | 27 - files/de/glossary/repo/index.html | 14 - .../glossary/responsive_web_design/index.html | 19 - files/de/glossary/rest/index.html | 28 - files/de/glossary/rgb/index.html | 22 - files/de/glossary/rss/index.html | 24 - files/de/glossary/scope/index.html | 38 - files/de/glossary/server/index.html | 24 - files/de/glossary/sloppy_mode/index.html | 16 - files/de/glossary/slug/index.html | 10 - files/de/glossary/specification/index.html | 23 - files/de/glossary/sql/index.html | 26 - files/de/glossary/statement/index.html | 30 - files/de/glossary/string/index.html | 22 - files/de/glossary/svg/index.html | 33 - files/de/glossary/tag/index.html | 24 - files/de/glossary/tcp/index.html | 23 - files/de/glossary/tls/index.html | 27 - files/de/glossary/truthy/index.html | 33 - files/de/glossary/type/index.html | 22 - files/de/glossary/type_conversion/index.html | 41 - files/de/glossary/ui/index.html | 22 - files/de/glossary/undefined/index.html | 23 - files/de/glossary/uri/index.html | 22 - files/de/glossary/url/index.html | 33 - files/de/glossary/user_agent/index.html | 51 - files/de/glossary/ux/index.html | 20 - files/de/glossary/validator/index.html | 19 - files/de/glossary/value/index.html | 14 - files/de/glossary/variable/index.html | 25 - files/de/glossary/vendor_prefix/index.html | 70 - files/de/glossary/viewport/index.html | 24 - files/de/glossary/visual_viewport/index.html | 19 - files/de/glossary/voip/index.html | 20 - files/de/glossary/w3c/index.html | 26 - files/de/glossary/wai/index.html | 18 - files/de/glossary/webdav/index.html | 40 - files/de/glossary/webm/index.html | 28 - files/de/glossary/webp/index.html | 31 - files/de/glossary/webrtc/index.html | 26 - files/de/glossary/websockets/index.html | 41 - files/de/glossary/wrapper/index.html | 30 - files/de/glossary/xml/index.html | 18 - .../accessibility_troubleshooting/index.html | 111 - files/de/learn/accessibility/index.html | 62 - files/de/learn/common_questions/index.html | 135 - .../upload_files_to_a_web_server/index.html | 170 - .../cascade_and_inheritance/index.html | 161 - files/de/learn/css/building_blocks/index.html | 87 - .../css/building_blocks/organizing/index.html | 374 - .../css/building_blocks/selectors/index.html | 431 - .../learn/css/css_layout/flexbox/index.html | 352 - files/de/learn/css/css_layout/index.html | 88 - .../how_css_is_structured/index.html | 167 - .../css/first_steps/how_css_works/index.html | 114 - files/de/learn/css/first_steps/index.html | 54 - files/de/learn/css/index.html | 59 - .../css/styling_text/fundamentals/index.html | 153 - files/de/learn/css/styling_text/index.html | 65 - files/de/learn/forms/index.html | 88 - .../css_basics/index.html | 282 - .../dealing_with_files/index.html | 107 - .../how_the_web_works/index.html | 101 - .../html_basics/index.html | 226 - .../getting_started_with_the_web/index.html | 66 - .../installing_basic_software/index.html | 61 - .../javascript_basics/index.html | 408 - .../publishing_your_website/index.html | 111 - .../index.html | 119 - files/de/learn/html/index.html | 74 - .../advanced_text_formatting/index.html | 464 - .../creating_hyperlinks/index.html | 318 - .../debugging_html/index.html | 198 - .../document_and_website_structure/index.html | 293 - .../getting_started/index.html | 572 - .../html_text_fundamentals/index.html | 644 - .../html/introduction_to_html/index.html | 66 - .../marking_up_a_letter/index.html | 103 - .../structuring_a_page_of_content/index.html | 100 - .../the_head_metadata_in_html/index.html | 269 - .../html/multimedia_and_embedding/index.html | 77 - .../mozilla_splash_page/index.html | 126 - files/de/learn/html/tables/index.html | 45 - files/de/learn/index.html | 102 - .../javascript/building_blocks/index.html | 43 - .../first_steps/a_first_splash/index.html | 598 - .../learn/javascript/first_steps/index.html | 67 - .../silly_story_generator/index.html | 140 - .../first_steps/what_is_javascript/index.html | 340 - files/de/learn/javascript/index.html | 44 - .../javascript/objects/basics/index.html | 258 - .../objects/classes_in_javascript/index.html | 291 - files/de/learn/javascript/objects/index.html | 53 - .../learn/javascript/objects/json/index.html | 345 - .../objects/object_prototypes/index.html | 288 - .../server-side/express_nodejs/index.html | 65 - .../learn/server-side/first_steps/index.html | 50 - files/de/learn/server-side/index.html | 59 - files/de/learn/tools_and_testing/index.html | 46 - files/de/mdn/at_ten/history_of_mdn/index.html | 223 - files/de/mdn/at_ten/index.html | 41 - .../contributing/getting_started/index.html | 126 - files/de/mdn/community/index.html | 52 - files/de/mdn/contribute/howto/index.html | 13 - files/de/mdn/contribute/index.html | 91 - files/de/mdn/index.html | 32 - files/de/mdn/tools/index.html | 10 - .../kumascript/troubleshooting/index.html | 62 - .../writing_guidelines/howto/tag/index.html | 430 - files/de/mdn/writing_guidelines/index.html | 100 - .../page_structures/index.html | 11 - .../page_structures/live_samples/index.html | 29 - files/de/mdn/yari/index.html | 29 - files/de/mozilla/add-ons/index.html | 197 - .../anatomy_of_a_webextension/index.html | 133 - .../webextensions/api/bookmarks/index.html | 85 - .../webextensions/api/commands/index.html | 52 - .../add-ons/webextensions/api/index.html | 51 - .../index.html | 13 - .../add-ons/webextensions/examples/index.html | 23 - .../extending_the_developer_tools/index.html | 137 - .../mozilla/add-ons/webextensions/index.html | 86 - .../manifest.json/commands/index.html | 182 - .../webextensions/manifest.json/index.html | 105 - .../what_are_webextensions/index.html | 24 - .../working_with_the_tabs_api/index.html | 609 - .../your_first_webextension/index.html | 156 - .../your_second_webextension/index.html | 358 - files/de/mozilla/firefox/index.html | 56 - .../index.html | 67 - .../mozilla/firefox/releases/1.5/index.html | 122 - .../1.5/using_firefox_1.5_caching/index.html | 204 - .../de/mozilla/firefox/releases/27/index.html | 54 - .../mozilla/firefox/releases/3.5/index.html | 240 - .../de/mozilla/firefox/releases/3/index.html | 172 - .../releases/3/updating_extensions/index.html | 233 - .../3/updating_web_applications/index.html | 96 - .../de/mozilla/firefox/releases/34/index.html | 107 - .../de/mozilla/firefox/releases/5/index.html | 169 - .../de/mozilla/firefox/releases/56/index.html | 110 - .../de/mozilla/firefox/releases/57/index.html | 89 - .../de/mozilla/firefox/releases/58/index.html | 174 - files/de/mozilla/firefox/releases/index.html | 12 - files/de/mozilla/index.html | 12 - .../index.html | 220 - .../aria/aria_live_regions/index.html | 90 - .../aria/aria_techniques/index.html | 169 - files/de/web/accessibility/aria/index.html | 121 - .../index.html | 146 - files/de/web/api/aescbcparams/index.html | 52 - .../web/api/audiodestinationnode/index.html | 90 - files/de/web/api/audionode/index.html | 107 - files/de/web/api/audiotrack/index.html | 86 - .../decodeaudiodata/index.html | 147 - .../de/web/api/battery_status_api/index.html | 90 - files/de/web/api/blob/index.html | 243 - files/de/web/api/blob/size/index.html | 37 - files/de/web/api/btoa/index.html | 100 - files/de/web/api/cache/add/index.html | 107 - files/de/web/api/cache/addall/index.html | 122 - files/de/web/api/cache/index.html | 160 - files/de/web/api/canvas_api/index.html | 121 - .../tutorial/advanced_animations/index.html | 381 - .../applying_styles_and_colors/index.html | 754 - .../tutorial/basic_animations/index.html | 308 - .../tutorial/basic_usage/index.html | 155 - .../tutorial/drawing_shapes/index.html | 454 - .../tutorial/drawing_text/index.html | 166 - .../de/web/api/canvas_api/tutorial/index.html | 52 - .../tutorial/optimizing_canvas/index.html | 119 - .../tutorial/using_images/index.html | 325 - .../canvas/index.html | 54 - .../fillrect/index.html | 129 - .../getimagedata/index.html | 90 - .../api/canvasrenderingcontext2d/index.html | 432 - .../ispointinpath/index.html | 141 - .../canvasrenderingcontext2d/scale/index.html | 171 - .../textalign/index.html | 128 - 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 | 290 - files/de/web/api/console/log/index.html | 93 - files/de/web/api/console/table/index.html | 146 - 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 | 61 - files/de/web/api/crypto/index.html | 63 - files/de/web/api/css/escape/index.html | 79 - files/de/web/api/css/index.html | 87 - .../web/api/css_painting_api/guide/index.html | 534 - files/de/web/api/cssmediarule/index.html | 70 - files/de/web/api/csspagerule/index.html | 67 - files/de/web/api/cssrule/csstext/index.html | 31 - files/de/web/api/cssrule/index.html | 212 - .../customelementregistry/define/index.html | 241 - .../web/api/customelementregistry/index.html | 106 - .../api/dedicatedworkerglobalscope/index.html | 114 - .../message_event/index.html | 83 - .../de/web/api/document/adoptnode/index.html | 53 - .../de/web/api/document/alinkcolor/index.html | 30 - files/de/web/api/document/body/index.html | 45 - .../api/document/createattribute/index.html | 76 - .../createdocumentfragment/index.html | 87 - .../web/api/document/createelement/index.html | 153 - .../api/document/createelementns/index.html | 115 - .../api/document/createtextnode/index.html | 81 - .../api/document/createtreewalker/index.html | 161 - files/de/web/api/document/dir/index.html | 45 - files/de/web/api/document/document/index.html | 45 - .../api/document/documentelement/index.html | 42 - .../fullscreenchange_event/index.html | 87 - .../api/document/getelementbyid/index.html | 85 - .../getelementsbyclassname/index.html | 59 - files/de/web/api/document/head/index.html | 44 - .../de/web/api/document/importnode/index.html | 93 - files/de/web/api/document/index.html | 304 - .../web/api/document/queryselector/index.html | 129 - .../api/document/queryselectorall/index.html | 172 - .../de/web/api/document/readystate/index.html | 88 - .../readystatechange_event/index.html | 87 - files/de/web/api/document/referrer/index.html | 44 - .../api/document/registerelement/index.html | 67 - 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 - .../web/api/document_object_model/index.html | 53 - files/de/web/api/documentfragment/index.html | 118 - files/de/web/api/domerror/index.html | 143 - files/de/web/api/domparser/index.html | 103 - files/de/web/api/domtokenlist/add/index.html | 72 - files/de/web/api/domtokenlist/index.html | 75 - files/de/web/api/dragevent/index.html | 239 - files/de/web/api/element/classlist/index.html | 195 - files/de/web/api/element/classname/index.html | 76 - .../de/web/api/element/click_event/index.html | 76 - .../element/getboundingclientrect/index.html | 62 - .../web/api/element/hasattribute/index.html | 79 - files/de/web/api/element/index.html | 268 - files/de/web/api/element/innerhtml/index.html | 204 - .../api/element/insertadjacenthtml/index.html | 96 - .../web/api/element/queryselector/index.html | 89 - .../api/element/queryselectorall/index.html | 144 - .../api/element/removeattribute/index.html | 42 - .../api/element/requestfullscreen/index.html | 66 - .../web/api/element/scrollintoview/index.html | 82 - .../de/web/api/element/scrollleft/index.html | 83 - .../de/web/api/element/scrollwidth/index.html | 49 - .../web/api/element/setattribute/index.html | 48 - files/de/web/api/event/bubbles/index.html | 59 - files/de/web/api/event/event/index.html | 69 - files/de/web/api/event/index.html | 191 - files/de/web/api/eventsource/index.html | 72 - .../eventtarget/addeventlistener/index.html | 49 - .../de/web/api/federatedcredential/index.html | 73 - files/de/web/api/fetch_api/index.html | 84 - files/de/web/api/file/index.html | 99 - files/de/web/api/file/name/index.html | 58 - files/de/web/api/file/type/index.html | 66 - .../index.html | 509 - files/de/web/api/filereader/index.html | 107 - .../web/api/filereader/load_event/index.html | 25 - files/de/web/api/formdata/formdata/index.html | 99 - files/de/web/api/formdata/get/index.html | 72 - files/de/web/api/formdata/getall/index.html | 74 - files/de/web/api/formdata/index.html | 80 - files/de/web/api/fullscreen_api/index.html | 231 - files/de/web/api/gainnode/index.html | 83 - files/de/web/api/gamepad_api/index.html | 95 - .../geolocation/getcurrentposition/index.html | 88 - files/de/web/api/geolocation/index.html | 71 - files/de/web/api/geolocation_api/index.html | 239 - .../de/web/api/globaleventhandlers/index.html | 238 - files/de/web/api/history_api/index.html | 164 - .../web/api/html_drag_and_drop_api/index.html | 12 - files/de/web/api/htmlcanvaselement/index.html | 96 - .../htmlcanvaselement/todataurl/index.html | 158 - .../index.html | 84 - .../webglcontextlost_event/index.html | 85 - .../webglcontextrestored_event/index.html | 87 - files/de/web/api/htmlcollection/index.html | 70 - .../api/htmlelement/change_event/index.html | 110 - .../web/api/htmlelement/innertext/index.html | 45 - .../api/htmlformelement/elements/index.html | 46 - files/de/web/api/htmlformelement/index.html | 210 - .../htmlformelement/submit_event/index.html | 76 - files/de/web/api/htmlheadelement/index.html | 29 - .../api/htmlinputelement/select/index.html | 84 - .../htmlslotelement/assignednodes/index.html | 66 - files/de/web/api/htmlslotelement/index.html | 67 - .../htmltableelement/createcaption/index.html | 75 - files/de/web/api/htmltableelement/index.html | 130 - .../api/htmltableelement/insertrow/index.html | 122 - .../de/web/api/htmlunknownelement/index.html | 52 - files/de/web/api/index.html | 14 - .../index.html | 131 - files/de/web/api/indexeddb_api/index.html | 166 - .../indexeddb_api/using_indexeddb/index.html | 1181 -- .../web/api/keyboardevent/altkey/index.html | 68 - .../keyboardevent/getmodifierstate/index.html | 245 - files/de/web/api/keyboardevent/index.html | 228 - .../web/api/keyboardevent/keycode/index.html | 3183 ---- files/de/web/api/messageevent/index.html | 137 - files/de/web/api/mouseevent/index.html | 189 - files/de/web/api/mutationobserver/index.html | 233 - files/de/web/api/navigator/index.html | 122 - .../registerprotocolhandler/index.html | 124 - .../web-based_protocol_handlers/index.html | 126 - .../web/api/navigator/sendbeacon/index.html | 92 - files/de/web/api/navigator/vibrate/index.html | 59 - files/de/web/api/node/appendchild/index.html | 94 - files/de/web/api/node/childnodes/index.html | 69 - files/de/web/api/node/clonenode/index.html | 62 - files/de/web/api/node/firstchild/index.html | 60 - .../de/web/api/node/haschildnodes/index.html | 70 - files/de/web/api/node/lastchild/index.html | 40 - files/de/web/api/node/nextsibling/index.html | 59 - 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 | 34 - .../web/api/node/previoussibling/index.html | 68 - files/de/web/api/node/removechild/index.html | 82 - files/de/web/api/node/replacechild/index.html | 59 - files/de/web/api/node/textcontent/index.html | 69 - files/de/web/api/notification/index.html | 205 - .../api/notification/permission/index.html | 100 - .../de/web/api/page_visibility_api/index.html | 142 - files/de/web/api/performance/index.html | 135 - files/de/web/api/performance/now/index.html | 69 - .../web/api/performance_property/index.html | 43 - files/de/web/api/push_api/index.html | 107 - files/de/web/api/pushmanager/index.html | 109 - .../web/api/pushmanager/subscribe/index.html | 91 - files/de/web/api/range/index.html | 149 - files/de/web/api/range/range/index.html | 49 - files/de/web/api/readablestream/index.html | 101 - files/de/web/api/response/index.html | 120 - files/de/web/api/response/response/index.html | 75 - files/de/web/api/rtcicecandidate/index.html | 65 - .../rtcrtptransceiver/direction/index.html | 82 - files/de/web/api/rtcrtptransceiver/index.html | 85 - .../de/web/api/service_worker_api/index.html | 172 - .../using_service_workers/index.html | 457 - files/de/web/api/serviceworker/index.html | 103 - .../web/api/serviceworkercontainer/index.html | 108 - .../register/index.html | 72 - files/de/web/api/settimeout/index.html | 91 - files/de/web/api/sharedworker/index.html | 117 - files/de/web/api/speechsynthesis/index.html | 133 - 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 | 102 - files/de/web/api/storage/key/index.html | 75 - files/de/web/api/storage/length/index.html | 63 - .../de/web/api/storage/removeitem/index.html | 68 - files/de/web/api/storage/setitem/index.html | 87 - files/de/web/api/transferable/index.html | 60 - .../de/web/api/url/createobjecturl/index.html | 64 - files/de/web/api/url/index.html | 119 - files/de/web/api/url/protocol/index.html | 59 - files/de/web/api/urlsearchparams/index.html | 108 - .../de/web/api/web_animations_api/index.html | 99 - files/de/web/api/web_storage_api/index.html | 88 - files/de/web/api/web_workers_api/index.html | 101 - files/de/web/api/webgl_api/index.html | 206 - .../index.html | 239 - .../animating_objects_with_webgl/index.html | 119 - .../animating_textures_in_webgl/index.html | 90 - .../index.html | 127 - .../getting_started_with_webgl/index.html | 74 - .../de/web/api/webgl_api/tutorial/index.html | 40 - .../tutorial/lighting_in_webgl/index.html | 173 - .../index.html | 98 - .../using_textures_in_webgl/index.html | 160 - files/de/web/api/webglactiveinfo/index.html | 64 - files/de/web/api/webglprogram/index.html | 101 - .../webglrenderingcontext/canvas/index.html | 72 - .../getactiveattrib/index.html | 63 - .../getattriblocation/index.html | 63 - .../web/api/webglrenderingcontext/index.html | 367 - .../web/api/websocket/binarytype/index.html | 56 - files/de/web/api/websocket/close/index.html | 48 - .../web/api/websocket/close_event/index.html | 46 - .../web/api/websocket/extensions/index.html | 49 - files/de/web/api/websocket/index.html | 250 - .../de/web/api/websocket/protocol/index.html | 51 - .../web/api/websocket/readystate/index.html | 77 - files/de/web/api/websocket/url/index.html | 47 - files/de/web/api/websockets_api/index.html | 79 - .../writing_websocket_servers/index.html | 253 - .../api/window/afterprint_event/index.html | 46 - files/de/web/api/window/alert/index.html | 72 - .../api/window/applicationcache/index.html | 33 - .../window/cancelanimationframe/index.html | 68 - 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 - .../api/window/devicemotion_event/index.html | 57 - .../window/domcontentloaded_event/index.html | 107 - files/de/web/api/window/dump/index.html | 42 - .../api/window/hashchange_event/index.html | 113 - files/de/web/api/window/history/index.html | 56 - files/de/web/api/window/length/index.html | 33 - files/de/web/api/window/load_event/index.html | 89 - .../de/web/api/window/localstorage/index.html | 79 - files/de/web/api/window/name/index.html | 57 - files/de/web/api/window/navigator/index.html | 96 - files/de/web/api/window/opendialog/index.html | 90 - files/de/web/api/window/opener/index.html | 28 - .../web/api/window/popstate_event/index.html | 58 - files/de/web/api/window/print/index.html | 48 - files/de/web/api/window/prompt/index.html | 79 - .../de/web/api/window/resize_event/index.html | 65 - files/de/web/api/window/screenx/index.html | 50 - files/de/web/api/window/scroll/index.html | 56 - files/de/web/api/window/scrollto/index.html | 75 - .../web/api/window/sessionstorage/index.html | 90 - files/de/web/api/window/stop/index.html | 38 - .../de/web/api/windoweventhandlers/index.html | 95 - .../api/windoworworkerglobalscope/index.html | 76 - files/de/web/api/worker/index.html | 101 - files/de/web/api/xmlhttprequest/index.html | 557 - files/de/web/css/-moz-float-edge/index.html | 67 - .../-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 | 83 - files/de/web/css/-moz-orient/index.html | 73 - .../-moz-outline-radius-bottomleft/index.html | 22 - .../index.html | 22 - .../-moz-outline-radius-topleft/index.html | 22 - .../-moz-outline-radius-topright/index.html | 22 - .../de/web/css/-moz-outline-radius/index.html | 89 - files/de/web/css/-moz-user-focus/index.html | 69 - files/de/web/css/-moz-user-input/index.html | 64 - .../de/web/css/-webkit-box-reflect/index.html | 70 - .../css/-webkit-mask-position-x/index.html | 78 - .../css/-webkit-mask-position-y/index.html | 76 - .../web/css/-webkit-mask-repeat-x/index.html | 81 - .../web/css/-webkit-mask-repeat-y/index.html | 79 - .../css/-webkit-overflow-scrolling/index.html | 49 - .../-webkit-tap-highlight-color/index.html | 33 - .../css/-webkit-text-fill-color/index.html | 37 - .../css/-webkit-text-stroke-color/index.html | 62 - .../css/-webkit-text-stroke-width/index.html | 39 - .../de/web/css/-webkit-text-stroke/index.html | 80 - .../web/css/-webkit-touch-callout/index.html | 62 - 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 - .../de/web/css/@media/any-pointer/index.html | 67 - files/de/web/css/@media/aural/index.html | 18 - files/de/web/css/@media/index.html | 260 - files/de/web/css/@media/pointer/index.html | 91 - .../@media/prefers-reduced-motion/index.html | 23 - files/de/web/css/@media/width/index.html | 53 - files/de/web/css/@page/index.html | 90 - files/de/web/css/@viewport/index.html | 96 - .../de/web/css/_colon_-moz-broken/index.html | 25 - .../web/css/_colon_-moz-drag-over/index.html | 42 - .../web/css/_colon_-moz-first-node/index.html | 48 - .../web/css/_colon_-moz-focusring/index.html | 43 - .../_colon_-moz-handler-blocked/index.html | 23 - .../_colon_-moz-handler-crashed/index.html | 23 - .../_colon_-moz-handler-disabled/index.html | 23 - .../web/css/_colon_-moz-last-node/index.html | 48 - .../css/_colon_-moz-list-bullet/index.html | 47 - .../css/_colon_-moz-list-number/index.html | 45 - .../de/web/css/_colon_-moz-loading/index.html | 17 - .../_colon_-moz-locale-dir(ltr)/index.html | 28 - .../_colon_-moz-locale-dir(rtl)/index.html | 30 - .../_colon_-moz-only-whitespace/index.html | 36 - .../css/_colon_-moz-submit-invalid/index.html | 28 - .../web/css/_colon_-moz-suppressed/index.html | 17 - .../css/_colon_-moz-user-disabled/index.html | 19 - .../_colon_-moz-window-inactive/index.html | 51 - files/de/web/css/_colon_active/index.html | 84 - files/de/web/css/_colon_autofill/index.html | 35 - 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 - .../de/web/css/_colon_first-child/index.html | 103 - .../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 | 116 - .../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 - .../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 - .../de/web/css/_colon_out-of-range/index.html | 94 - .../css/_colon_placeholder-shown/index.html | 76 - files/de/web/css/_colon_required/index.html | 67 - files/de/web/css/_colon_root/index.html | 48 - .../de/web/css/_colon_user-invalid/index.html | 47 - files/de/web/css/_colon_visited/index.html | 76 - .../index.html | 37 - .../web/css/_doublecolon_-moz-page/index.html | 28 - .../_doublecolon_-moz-progress-bar/index.html | 36 - .../index.html | 33 - .../de/web/css/_doublecolon_after/index.html | 158 - .../web/css/_doublecolon_backdrop/index.html | 49 - .../de/web/css/_doublecolon_before/index.html | 230 - .../de/web/css/_doublecolon_marker/index.html | 100 - .../web/css/_doublecolon_selection/index.html | 86 - files/de/web/css/actual_value/index.html | 51 - .../adjacent_sibling_combinator/index.html | 89 - 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 | 136 - .../css/alternative_style_sheets/index.html | 47 - files/de/web/css/angle-percentage/index.html | 50 - files/de/web/css/angle/index.html | 86 - files/de/web/css/animation-delay/index.html | 77 - .../de/web/css/animation-direction/index.html | 91 - .../de/web/css/animation-duration/index.html | 78 - .../de/web/css/animation-fill-mode/index.html | 144 - .../css/animation-iteration-count/index.html | 74 - files/de/web/css/animation-name/index.html | 86 - .../web/css/animation-play-state/index.html | 84 - .../css/animation-timing-function/index.html | 93 - files/de/web/css/animation/index.html | 124 - files/de/web/css/appearance/index.html | 1486 -- files/de/web/css/at-rule/index.html | 61 - files/de/web/css/attr/index.html | 190 - .../de/web/css/attribute_selectors/index.html | 123 - files/de/web/css/backdrop-filter/index.html | 97 - .../de/web/css/backface-visibility/index.html | 208 - .../web/css/background-attachment/index.html | 156 - .../web/css/background-blend-mode/index.html | 127 - files/de/web/css/background-clip/index.html | 109 - files/de/web/css/background-color/index.html | 133 - files/de/web/css/background-image/index.html | 153 - files/de/web/css/background-origin/index.html | 59 - .../de/web/css/background-position/index.html | 85 - files/de/web/css/background-repeat/index.html | 164 - files/de/web/css/background-size/index.html | 151 - files/de/web/css/background/index.html | 179 - files/de/web/css/basic-shape/index.html | 176 - .../de/web/css/border-bottom-color/index.html | 99 - .../css/border-bottom-left-radius/index.html | 52 - .../css/border-bottom-right-radius/index.html | 56 - .../de/web/css/border-bottom-style/index.html | 99 - .../de/web/css/border-bottom-width/index.html | 82 - files/de/web/css/border-bottom/index.html | 88 - files/de/web/css/border-collapse/index.html | 151 - files/de/web/css/border-color/index.html | 107 - .../de/web/css/border-image-outset/index.html | 76 - .../de/web/css/border-image-repeat/index.html | 83 - .../de/web/css/border-image-slice/index.html | 102 - .../de/web/css/border-image-source/index.html | 67 - .../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 | 35 - files/de/web/css/border-left-style/index.html | 119 - files/de/web/css/border-left-width/index.html | 37 - files/de/web/css/border-left/index.html | 47 - files/de/web/css/border-radius/index.html | 139 - .../de/web/css/border-right-color/index.html | 35 - .../de/web/css/border-right-style/index.html | 119 - .../de/web/css/border-right-width/index.html | 89 - files/de/web/css/border-right/index.html | 47 - files/de/web/css/border-spacing/index.html | 141 - files/de/web/css/border-style/index.html | 219 - files/de/web/css/border-top-color/index.html | 80 - .../web/css/border-top-left-radius/index.html | 89 - .../css/border-top-right-radius/index.html | 47 - files/de/web/css/border-top-style/index.html | 119 - files/de/web/css/border-top-width/index.html | 89 - files/de/web/css/border-top/index.html | 97 - files/de/web/css/border-width/index.html | 117 - files/de/web/css/border/index.html | 99 - files/de/web/css/bottom/index.html | 72 - files/de/web/css/box-flex/index.html | 104 - files/de/web/css/box-ordinal-group/index.html | 68 - files/de/web/css/box-pack/index.html | 137 - files/de/web/css/box-shadow/index.html | 107 - files/de/web/css/box-sizing/index.html | 135 - 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 | 107 - files/de/web/css/caption-side/index.html | 145 - files/de/web/css/child_combinator/index.html | 91 - files/de/web/css/class_selectors/index.html | 77 - files/de/web/css/clear/index.html | 244 - files/de/web/css/clip-path/index.html | 128 - files/de/web/css/clip/index.html | 130 - files/de/web/css/color/index.html | 121 - files/de/web/css/color_value/index.html | 1286 -- files/de/web/css/column-count/index.html | 59 - 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 | 66 - files/de/web/css/column-rule-style/index.html | 71 - 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 | 66 - files/de/web/css/column-width/index.html | 99 - files/de/web/css/columns/index.html | 109 - .../css/compositing_and_blending/index.html | 54 - files/de/web/css/computed_value/index.html | 47 - files/de/web/css/content/index.html | 237 - files/de/web/css/counter-increment/index.html | 99 - files/de/web/css/counter-reset/index.html | 100 - files/de/web/css/css_animations/index.html | 79 - .../using_css_animations/index.html | 365 - .../border-image_generator/index.html | 2627 --- .../border-radius_generator/index.html | 1601 -- .../box-shadow_generator/index.html | 2885 ---- .../css_backgrounds_and_borders/index.html | 110 - .../resizing_background_images/index.html | 111 - .../using_multiple_backgrounds/index.html | 71 - .../css/css_basic_user_interface/index.html | 76 - files/de/web/css/css_box_model/index.html | 120 - .../index.html | 43 - .../mastering_margin_collapsing/index.html | 61 - files/de/web/css/css_charsets/index.html | 50 - .../css_colors/color_picker_tool/index.html | 3226 ---- files/de/web/css/css_colors/index.html | 73 - files/de/web/css/css_columns/index.html | 60 - .../using_multi-column_layouts/index.html | 62 - .../web/css/css_conditional_rules/index.html | 52 - .../using_css_counters/index.html | 127 - .../web/css/css_device_adaptation/index.html | 52 - .../index.html | 210 - .../basic_concepts_of_flexbox/index.html | 231 - .../css/css_flexible_box_layout/index.html | 63 - .../ordering_flex_items/index.html | 139 - files/de/web/css/css_fonts/index.html | 96 - files/de/web/css/css_functions/index.html | 255 - .../web/css/css_generated_content/index.html | 61 - files/de/web/css/css_grid_layout/index.html | 252 - .../index.html | 50 - files/de/web/css/css_images/index.html | 99 - .../css_images/using_css_gradients/index.html | 409 - .../consistent_list_indentation/index.html | 105 - .../web/css/css_lists_and_counters/index.html | 86 - .../web/css/css_logical_properties/index.html | 83 - files/de/web/css/css_masking/index.html | 56 - files/de/web/css/css_motion_path/index.html | 53 - files/de/web/css/css_namespaces/index.html | 52 - files/de/web/css/css_positioning/index.html | 64 - .../adding_z-index/index.html | 159 - .../understanding_z_index/index.html | 51 - .../stacking_and_float/index.html | 152 - .../stacking_context_example_1/index.html | 132 - .../stacking_context_example_2/index.html | 140 - .../stacking_context_example_3/index.html | 186 - .../stacking_without_z-index/index.html | 128 - .../the_stacking_context/index.html | 243 - files/de/web/css/css_ruby/index.html | 51 - files/de/web/css/css_selectors/index.html | 107 - files/de/web/css/css_shapes/index.html | 52 - files/de/web/css/css_table/index.html | 55 - files/de/web/css/css_text/index.html | 77 - .../de/web/css/css_text_decoration/index.html | 66 - files/de/web/css/css_transforms/index.html | 75 - .../using_css_transforms/index.html | 83 - files/de/web/css/css_transitions/index.html | 64 - files/de/web/css/css_types/index.html | 60 - files/de/web/css/css_writing_modes/index.html | 63 - files/de/web/css/cssom_view/index.html | 51 - files/de/web/css/cursor/index.html | 298 - files/de/web/css/custom-ident/index.html | 120 - files/de/web/css/direction/index.html | 90 - files/de/web/css/display/index.html | 309 - files/de/web/css/empty-cells/index.html | 76 - 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 | 81 - 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 | 231 - files/de/web/css/font-family/index.html | 177 - .../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 | 221 - 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 | 65 - files/de/web/css/gap/index.html | 179 - files/de/web/css/gradient/index.html | 91 - .../de/web/css/grid-template-areas/index.html | 190 - files/de/web/css/grid/index.html | 184 - files/de/web/css/height/index.html | 157 - files/de/web/css/hyphens/index.html | 118 - files/de/web/css/id_selectors/index.html | 73 - 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 | 98 - files/de/web/css/inherit/index.html | 75 - files/de/web/css/inheritance/index.html | 48 - files/de/web/css/initial/index.html | 52 - files/de/web/css/initial_value/index.html | 35 - files/de/web/css/integer/index.html | 89 - files/de/web/css/justify-content/index.html | 187 - files/de/web/css/layout_mode/index.html | 41 - 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/list-style-image/index.html | 102 - .../de/web/css/list-style-position/index.html | 116 - files/de/web/css/list-style-type/index.html | 558 - files/de/web/css/list-style/index.html | 102 - files/de/web/css/margin-bottom/index.html | 86 - files/de/web/css/margin-left/index.html | 86 - files/de/web/css/margin-right/index.html | 86 - files/de/web/css/margin-top/index.html | 86 - files/de/web/css/margin/index.html | 121 - files/de/web/css/mask-origin/index.html | 56 - files/de/web/css/mask-repeat/index.html | 83 - 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 | 138 - files/de/web/css/media_queries/index.html | 108 - files/de/web/css/min-height/index.html | 76 - files/de/web/css/min-width/index.html | 100 - files/de/web/css/mix-blend-mode/index.html | 97 - .../de/web/css/mozilla_extensions/index.html | 661 - files/de/web/css/number/index.html | 80 - files/de/web/css/object-fit/index.html | 148 - 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 | 95 - files/de/web/css/outline/index.html | 158 - files/de/web/css/overflow-wrap/index.html | 84 - files/de/web/css/overflow/index.html | 128 - .../web/css/overscroll-behavior-y/index.html | 85 - .../de/web/css/overscroll-behavior/index.html | 104 - files/de/web/css/padding-bottom/index.html | 75 - files/de/web/css/padding-left/index.html | 84 - files/de/web/css/padding-right/index.html | 75 - files/de/web/css/padding-top/index.html | 75 - files/de/web/css/padding/index.html | 125 - files/de/web/css/page-break-after/index.html | 89 - files/de/web/css/page-break-before/index.html | 89 - files/de/web/css/page-break-inside/index.html | 85 - 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 | 130 - files/de/web/css/position/index.html | 101 - files/de/web/css/position_value/index.html | 86 - .../de/web/css/print-color-adjust/index.html | 52 - 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/reference/index.html | 212 - files/de/web/css/replaced_element/index.html | 38 - files/de/web/css/resize/index.html | 193 - files/de/web/css/resolution/index.html | 83 - files/de/web/css/right/index.html | 97 - files/de/web/css/row-gap/index.html | 159 - files/de/web/css/ruby-align/index.html | 153 - files/de/web/css/scroll-behavior/index.html | 140 - files/de/web/css/shape/index.html | 93 - files/de/web/css/specificity/index.html | 212 - 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 | 112 - files/de/web/css/text-align-last/index.html | 104 - files/de/web/css/text-align/index.html | 234 - .../web/css/text-decoration-color/index.html | 89 - .../web/css/text-decoration-line/index.html | 93 - 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 | 328 - .../css/text-underline-position/index.html | 92 - files/de/web/css/time/index.html | 75 - .../linear-gradient_generator/index.html | 3328 ---- files/de/web/css/top/index.html | 83 - files/de/web/css/touch-action/index.html | 72 - .../de/web/css/transform-function/index.html | 295 - .../transform-function/translate3d/index.html | 144 - .../transform-function/translatey/index.html | 122 - .../transform-function/translatez/index.html | 125 - files/de/web/css/transform-origin/index.html | 692 - files/de/web/css/transform/index.html | 168 - .../de/web/css/transition-property/index.html | 91 - files/de/web/css/transition/index.html | 100 - files/de/web/css/translate/index.html | 134 - 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 - .../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/user-modify/index.html | 84 - files/de/web/css/user-select/index.html | 56 - .../css/value_definition_syntax/index.html | 420 - files/de/web/css/vertical-align/index.html | 242 - files/de/web/css/visibility/index.html | 99 - files/de/web/css/webkit_extensions/index.html | 271 - files/de/web/css/white-space/index.html | 240 - 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/z-index/index.html | 146 - files/de/web/demos/index.html | 155 - files/de/web/events/index.html | 1981 --- .../web/guide/ajax/getting_started/index.html | 339 - files/de/web/guide/ajax/index.html | 71 - files/de/web/guide/graphics/index.html | 50 - .../guide/html/content_categories/index.html | 154 - .../guide/html/editable_content/index.html | 53 - files/de/web/guide/index.html | 28 - .../web/html/block-level_elements/index.html | 109 - files/de/web/html/element/a/index.html | 281 - 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 | 115 - files/de/web/html/element/applet/index.html | 93 - files/de/web/html/element/area/index.html | 174 - files/de/web/html/element/article/index.html | 144 - 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 | 125 - files/de/web/html/element/bdi/index.html | 92 - files/de/web/html/element/bdo/index.html | 107 - files/de/web/html/element/bgsound/index.html | 50 - files/de/web/html/element/big/index.html | 45 - files/de/web/html/element/blink/index.html | 38 - .../de/web/html/element/blockquote/index.html | 110 - files/de/web/html/element/body/index.html | 152 - files/de/web/html/element/br/index.html | 84 - files/de/web/html/element/canvas/index.html | 65 - files/de/web/html/element/caption/index.html | 101 - files/de/web/html/element/center/index.html | 41 - files/de/web/html/element/cite/index.html | 106 - files/de/web/html/element/code/index.html | 101 - files/de/web/html/element/col/index.html | 214 - files/de/web/html/element/data/index.html | 88 - files/de/web/html/element/datalist/index.html | 106 - files/de/web/html/element/dd/index.html | 94 - files/de/web/html/element/del/index.html | 101 - files/de/web/html/element/details/index.html | 97 - files/de/web/html/element/dialog/index.html | 144 - 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 | 176 - files/de/web/html/element/dt/index.html | 89 - files/de/web/html/element/em/index.html | 106 - files/de/web/html/element/embed/index.html | 97 - files/de/web/html/element/fieldset/index.html | 403 - 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/header/index.html | 97 - .../html/element/heading_elements/index.html | 73 - files/de/web/html/element/hr/index.html | 57 - files/de/web/html/element/html/index.html | 111 - files/de/web/html/element/i/index.html | 110 - files/de/web/html/element/iframe/index.html | 45 - files/de/web/html/element/image/index.html | 48 - files/de/web/html/element/img/index.html | 250 - files/de/web/html/element/index.html | 249 - .../html/element/input/checkbox/index.html | 350 - files/de/web/html/element/input/index.html | 418 - files/de/web/html/element/ins/index.html | 99 - files/de/web/html/element/legend/index.html | 97 - files/de/web/html/element/li/index.html | 145 - files/de/web/html/element/link/index.html | 213 - files/de/web/html/element/main/index.html | 129 - files/de/web/html/element/map/index.html | 116 - files/de/web/html/element/marquee/index.html | 112 - 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 | 101 - files/de/web/html/element/object/index.html | 130 - files/de/web/html/element/ol/index.html | 131 - files/de/web/html/element/optgroup/index.html | 115 - files/de/web/html/element/option/index.html | 108 - 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 | 127 - files/de/web/html/element/q/index.html | 109 - files/de/web/html/element/s/index.html | 70 - files/de/web/html/element/section/index.html | 124 - files/de/web/html/element/shadow/index.html | 100 - files/de/web/html/element/strong/index.html | 49 - files/de/web/html/element/summary/index.html | 98 - files/de/web/html/element/table/index.html | 402 - files/de/web/html/element/td/index.html | 214 - files/de/web/html/element/template/index.html | 140 - files/de/web/html/element/time/index.html | 112 - files/de/web/html/element/title/index.html | 81 - files/de/web/html/element/tr/index.html | 136 - files/de/web/html/element/tt/index.html | 52 - files/de/web/html/element/u/index.html | 66 - files/de/web/html/element/ul/index.html | 121 - files/de/web/html/element/var/index.html | 46 - files/de/web/html/element/video/index.html | 173 - .../global_attributes/accesskey/index.html | 117 - .../autocapitalize/index.html | 47 - .../html/global_attributes/class/index.html | 62 - .../contenteditable/index.html | 67 - .../global_attributes/contextmenu/index.html | 122 - .../web/html/global_attributes/dir/index.html | 86 - .../global_attributes/draggable/index.html | 57 - .../html/global_attributes/hidden/index.html | 57 - .../web/html/global_attributes/id/index.html | 62 - .../de/web/html/global_attributes/index.html | 204 - .../global_attributes/inputmode/index.html | 77 - .../html/global_attributes/lang/index.html | 61 - .../html/global_attributes/style/index.html | 60 - .../global_attributes/tabindex/index.html | 127 - .../html/global_attributes/title/index.html | 100 - .../global_attributes/translate/index.html | 31 - files/de/web/html/index.html | 97 - files/de/web/html/inline_elements/index.html | 33 - files/de/web/html/reference/index.html | 25 - .../index.html | 188 - files/de/web/http/basics_of_http/index.html | 51 - files/de/web/http/caching/index.html | 74 - .../cors/errors/corsdidnotsucceed/index.html | 34 - .../index.html | 38 - .../errors/corsmissingalloworigin/index.html | 60 - .../cors/errors/corsrequestnothttp/index.html | 25 - files/de/web/http/cors/errors/index.html | 76 - files/de/web/http/cors/index.html | 560 - files/de/web/http/headers/accept/index.html | 94 - files/de/web/http/headers/age/index.html | 78 - .../web/http/headers/cache-control/index.html | 174 - files/de/web/http/headers/cookie/index.html | 70 - files/de/web/http/headers/dnt/index.html | 86 - .../de/web/http/headers/expect-ct/index.html | 111 - files/de/web/http/headers/expires/index.html | 73 - files/de/web/http/headers/index.html | 441 - files/de/web/http/headers/referer/index.html | 85 - files/de/web/http/headers/server/index.html | 67 - files/de/web/http/headers/tk/index.html | 94 - .../headers/x-content-type-options/index.html | 91 - .../http/headers/x-frame-options/index.html | 129 - files/de/web/http/index.html | 366 - files/de/web/http/methods/connect/index.html | 82 - files/de/web/http/methods/delete/index.html | 96 - files/de/web/http/methods/get/index.html | 73 - files/de/web/http/methods/index.html | 73 - files/de/web/http/status/100/index.html | 44 - files/de/web/http/status/200/index.html | 55 - files/de/web/http/status/201/index.html | 41 - files/de/web/http/status/302/index.html | 52 - files/de/web/http/status/304/index.html | 59 - files/de/web/http/status/400/index.html | 36 - files/de/web/http/status/401/index.html | 55 - files/de/web/http/status/403/index.html | 53 - files/de/web/http/status/404/index.html | 60 - files/de/web/http/status/409/index.html | 40 - files/de/web/http/status/410/index.html | 51 - files/de/web/http/status/414/index.html | 47 - files/de/web/http/status/418/index.html | 45 - files/de/web/http/status/500/index.html | 40 - files/de/web/http/status/502/index.html | 24 - files/de/web/http/status/503/index.html | 53 - files/de/web/http/status/504/index.html | 49 - 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 | 100 - .../index.html | 910 - .../javascript/about_javascript/index.html | 61 - files/de/web/javascript/closures/index.html | 471 - .../web/javascript/data_structures/index.html | 272 - .../index.html | 342 - .../index.html | 407 - files/de/web/javascript/eventloop/index.html | 138 - .../index.html | 431 - .../expressions_and_operators/index.html | 966 -- .../web/javascript/guide/functions/index.html | 658 - .../guide/grammar_and_types/index.html | 700 - files/de/web/javascript/guide/index.html | 145 - .../guide/indexed_collections/index.html | 448 - .../javascript/guide/introduction/index.html | 141 - .../guide/keyed_collections/index.html | 157 - .../guide/loops_and_iteration/index.html | 338 - .../guide/meta_programming/index.html | 265 - .../guide/numbers_and_dates/index.html | 378 - .../guide/regular_expressions/index.html | 625 - .../guide/text_formatting/index.html | 258 - .../guide/using_promises/index.html | 341 - .../guide/working_with_objects/index.html | 507 - files/de/web/javascript/index.html | 120 - .../index.html | 300 - .../index.html | 88 - .../javascript/memory_management/index.html | 185 - .../web/javascript/reference/about/index.html | 52 - .../reference/classes/constructor/index.html | 98 - .../reference/classes/extends/index.html | 108 - .../javascript/reference/classes/index.html | 325 - .../reference/classes/static/index.html | 137 - .../index.html | 292 - .../the_legacy_iterator_protocol/index.html | 80 - .../errors/already_has_pragma/index.html | 43 - .../errors/array_sort_argument/index.html | 48 - .../reference/errors/bad_octal/index.html | 55 - .../reference/errors/bad_radix/index.html | 62 - .../errors/bad_regexp_flag/index.html | 106 - .../errors/bad_return_or_yield/index.html | 56 - .../called_on_incompatible_type/index.html | 65 - .../index.html | 61 - .../index.html | 65 - .../reference/errors/cant_delete/index.html | 59 - .../errors/cant_redefine_property/index.html | 52 - .../errors/cyclic_object_value/index.html | 68 - .../reference/errors/dead_object/index.html | 51 - .../errors/delete_in_strict_mode/index.html | 71 - .../index.html | 76 - .../deprecated_expression_closures/index.html | 79 - .../errors/deprecated_octal/index.html | 68 - .../deprecated_source_map_pragma/index.html | 59 - .../deprecated_string_generics/index.html | 105 - .../deprecated_tolocaleformat/index.html | 91 - .../errors/equal_as_assign/index.html | 55 - .../index.html | 169 - .../reference/errors/getter_only/index.html | 84 - .../errors/identifier_after_number/index.html | 54 - .../errors/illegal_character/index.html | 81 - .../errors/in_operator_no_object/index.html | 73 - .../javascript/reference/errors/index.html | 30 - .../errors/invalid_array_length/index.html | 78 - .../index.html | 54 - .../invalid_const_assignment/index.html | 91 - .../reference/errors/invalid_date/index.html | 55 - .../invalid_for-in_initializer/index.html | 75 - .../invalid_for-of_initializer/index.html | 64 - .../index.html | 63 - .../errors/is_not_iterable/index.html | 104 - .../errors/json_bad_parse/index.html | 113 - .../malformed_formal_parameter/index.html | 62 - .../reference/errors/malformed_uri/index.html | 67 - .../missing_bracket_after_list/index.html | 57 - .../index.html | 78 - .../index.html | 68 - .../index.html | 52 - .../missing_formal_parameter/index.html | 81 - .../missing_initializer_in_const/index.html | 59 - .../index.html | 69 - .../index.html | 43 - .../index.html | 71 - .../index.html | 68 - .../errors/more_arguments_needed/index.html | 49 - .../negative_repetition_count/index.html | 45 - .../errors/no_non-null_object/index.html | 67 - .../reference/errors/no_properties/index.html | 41 - .../errors/no_variable_name/index.html | 85 - .../non_configurable_array_element/index.html | 84 - .../errors/not_a_codepoint/index.html | 56 - .../errors/not_a_constructor/index.html | 98 - .../errors/not_a_function/index.html | 125 - .../reference/errors/not_defined/index.html | 71 - .../errors/precision_range/index.html | 97 - .../errors/property_access_denied/index.html | 48 - .../reference/errors/read-only/index.html | 79 - .../errors/redeclared_parameter/index.html | 62 - .../index.html | 89 - .../errors/reserved_identifier/index.html | 81 - .../resulting_string_too_large/index.html | 50 - .../errors/stmt_after_return/index.html | 78 - .../strict_non_simple_params/index.html | 112 - .../errors/too_much_recursion/index.html | 55 - .../errors/undeclared_var/index.html | 68 - .../errors/undefined_prop/index.html | 64 - .../errors/unexpected_token/index.html | 48 - .../errors/unexpected_type/index.html | 68 - .../unnamed_function_statement/index.html | 116 - .../unterminated_string_literal/index.html | 68 - .../errors/var_hides_argument/index.html | 57 - .../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/arrow_functions/index.html | 361 - .../functions/default_parameters/index.html | 223 - .../reference/functions/get/index.html | 174 - .../javascript/reference/functions/index.html | 594 - .../functions/method_definitions/index.html | 166 - .../functions/rest_parameters/index.html | 168 - .../reference/functions/set/index.html | 149 - .../array/@@iterator/index.html | 89 - .../global_objects/array/@@species/index.html | 76 - .../array/@@unscopables/index.html | 76 - .../global_objects/array/concat/index.html | 156 - .../array/copywithin/index.html | 184 - .../global_objects/array/entries/index.html | 84 - .../global_objects/array/every/index.html | 195 - .../global_objects/array/fill/index.html | 155 - .../global_objects/array/filter/index.html | 234 - .../global_objects/array/find/index.html | 243 - .../global_objects/array/findindex/index.html | 189 - .../global_objects/array/flat/index.html | 116 - .../global_objects/array/flatmap/index.html | 117 - .../global_objects/array/foreach/index.html | 301 - .../global_objects/array/from/index.html | 227 - .../global_objects/array/includes/index.html | 177 - .../reference/global_objects/array/index.html | 460 - .../global_objects/array/indexof/index.html | 226 - .../global_objects/array/isarray/index.html | 121 - .../global_objects/array/join/index.html | 114 - .../global_objects/array/keys/index.html | 76 - .../array/lastindexof/index.html | 168 - .../global_objects/array/length/index.html | 149 - .../global_objects/array/map/index.html | 336 - .../global_objects/array/of/index.html | 102 - .../global_objects/array/pop/index.html | 98 - .../global_objects/array/push/index.html | 141 - .../global_objects/array/reduce/index.html | 564 - .../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 | 235 - .../global_objects/array/some/index.html | 209 - .../global_objects/array/sort/index.html | 264 - .../global_objects/array/splice/index.html | 159 - .../array/tolocalestring/index.html | 183 - .../global_objects/array/tostring/index.html | 80 - .../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 - .../arraybuffer/isview/index.html | 89 - .../arraybuffer/slice/index.html | 88 - .../global_objects/asyncfunction/index.html | 124 - .../global_objects/atomics/add/index.html | 83 - .../global_objects/atomics/and/index.html | 129 - .../atomics/compareexchange/index.html | 86 - .../atomics/exchange/index.html | 85 - .../global_objects/atomics/index.html | 116 - .../atomics/islockfree/index.html | 73 - .../global_objects/atomics/load/index.html | 81 - .../global_objects/atomics/notify/index.html | 94 - .../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/xor/index.html | 130 - .../global_objects/boolean/index.html | 159 - .../boolean/tostring/index.html | 89 - .../global_objects/boolean/valueof/index.html | 85 - .../global_objects/dataview/buffer/index.html | 71 - .../dataview/bytelength/index.html | 77 - .../dataview/byteoffset/index.html | 74 - .../dataview/getfloat32/index.html | 95 - .../dataview/getfloat64/index.html | 95 - .../dataview/getint16/index.html | 95 - .../dataview/getint32/index.html | 95 - .../dataview/getint8/index.html | 93 - .../dataview/getuint16/index.html | 98 - .../dataview/getuint32/index.html | 98 - .../dataview/getuint8/index.html | 95 - .../global_objects/dataview/index.html | 127 - .../dataview/setfloat32/index.html | 97 - .../dataview/setfloat64/index.html | 97 - .../dataview/setint16/index.html | 100 - .../dataview/setint32/index.html | 100 - .../dataview/setint8/index.html | 95 - .../dataview/setuint16/index.html | 100 - .../dataview/setuint32/index.html | 100 - .../dataview/setuint8/index.html | 95 - .../date/@@toprimitive/index.html | 67 - .../global_objects/date/getday/index.html | 67 - .../date/getfullyear/index.html | 86 - .../global_objects/date/gethours/index.html | 81 - .../date/getmilliseconds/index.html | 79 - .../global_objects/date/getminutes/index.html | 79 - .../global_objects/date/getmonth/index.html | 81 - .../global_objects/date/getseconds/index.html | 81 - .../global_objects/date/gettime/index.html | 124 - .../date/gettimezoneoffset/index.html | 100 - .../global_objects/date/getutcdate/index.html | 78 - .../global_objects/date/getutcday/index.html | 80 - .../date/getutcfullyear/index.html | 83 - .../date/getutchours/index.html | 79 - .../date/getutcmilliseconds/index.html | 77 - .../date/getutcminutes/index.html | 77 - .../date/getutcmonth/index.html | 79 - .../date/getutcseconds/index.html | 77 - .../global_objects/date/getyear/index.html | 125 - .../reference/global_objects/date/index.html | 230 - .../global_objects/date/now/index.html | 103 - .../global_objects/date/parse/index.html | 171 - .../global_objects/date/setdate/index.html | 89 - .../date/setfullyear/index.html | 95 - .../global_objects/date/sethours/index.html | 100 - .../date/setmilliseconds/index.html | 88 - .../global_objects/date/setminutes/index.html | 98 - .../global_objects/date/setmonth/index.html | 101 - .../global_objects/date/setseconds/index.html | 96 - .../global_objects/date/settime/index.html | 89 - .../global_objects/date/setutcdate/index.html | 88 - .../date/setutcfullyear/index.html | 94 - .../date/setutchours/index.html | 96 - .../date/setutcmilliseconds/index.html | 88 - .../date/setutcminutes/index.html | 94 - .../date/setutcmonth/index.html | 92 - .../date/setutcseconds/index.html | 92 - .../global_objects/date/setyear/index.html | 94 - .../date/todatestring/index.html | 90 - .../date/togmtstring/index.html | 85 - .../date/toisostring/index.html | 107 - .../global_objects/date/tojson/index.html | 79 - .../date/tolocaledatestring/index.html | 186 - .../date/tolocalestring/index.html | 186 - .../date/tolocaletimestring/index.html | 175 - .../global_objects/date/tostring/index.html | 92 - .../date/totimestring/index.html | 86 - .../date/toutcstring/index.html | 82 - .../global_objects/date/utc/index.html | 131 - .../global_objects/date/valueof/index.html | 83 - .../decodeuricomponent/index.html | 79 - .../global_objects/encodeuri/index.html | 113 - .../encodeuricomponent/index.html | 115 - .../error/columnnumber/index.html | 43 - .../global_objects/error/filename/index.html | 47 - .../reference/global_objects/error/index.html | 241 - .../error/linenumber/index.html | 55 - .../global_objects/error/message/index.html | 75 - .../global_objects/error/name/index.html | 58 - .../global_objects/error/stack/index.html | 124 - .../global_objects/error/tostring/index.html | 116 - .../global_objects/escape/index.html | 84 - .../global_objects/evalerror/index.html | 118 - .../global_objects/float32array/index.html | 204 - .../global_objects/float64array/index.html | 204 - .../global_objects/function/apply/index.html | 226 - .../function/arguments/index.html | 92 - .../global_objects/function/bind/index.html | 286 - .../global_objects/function/call/index.html | 163 - .../global_objects/function/caller/index.html | 84 - .../function/displayname/index.html | 81 - .../global_objects/function/index.html | 188 - .../global_objects/function/length/index.html | 92 - .../global_objects/function/name/index.html | 225 - .../function/tostring/index.html | 236 - .../global_objects/generator/index.html | 137 - .../global_objects/generator/next/index.html | 116 - .../generator/return/index.html | 102 - .../global_objects/generator/throw/index.html | 101 - .../generatorfunction/index.html | 115 - .../global_objects/globalthis/index.html | 90 - .../reference/global_objects/index.html | 191 - .../global_objects/infinity/index.html | 83 - .../global_objects/int16array/index.html | 204 - .../global_objects/int32array/index.html | 204 - .../global_objects/int8array/index.html | 209 - .../global_objects/internalerror/index.html | 82 - .../intl/collator/compare/index.html | 101 - .../global_objects/intl/collator/index.html | 179 - .../intl/collator/resolvedoptions/index.html | 100 - .../collator/supportedlocalesof/index.html | 98 - .../intl/datetimeformat/format/index.html | 101 - .../datetimeformat/formattoparts/index.html | 169 - .../intl/datetimeformat/index.html | 247 - .../datetimeformat/resolvedoptions/index.html | 107 - .../supportedlocalesof/index.html | 99 - .../intl/getcanonicallocales/index.html | 74 - .../reference/global_objects/intl/index.html | 129 - .../intl/numberformat/format/index.html | 98 - .../intl/numberformat/index.html | 194 - .../supportedlocalesof/index.html | 98 - .../intl/pluralrules/index.html | 161 - .../pluralrules/supportedlocalesof/index.html | 85 - .../global_objects/isfinite/index.html | 99 - .../reference/global_objects/isnan/index.html | 192 - .../reference/global_objects/json/index.html | 155 - .../global_objects/json/parse/index.html | 128 - .../global_objects/json/stringify/index.html | 310 - .../global_objects/math/acos/index.html | 101 - .../global_objects/math/acosh/index.html | 96 - .../global_objects/math/asin/index.html | 101 - .../global_objects/math/asinh/index.html | 97 - .../global_objects/math/atan/index.html | 103 - .../global_objects/math/atan2/index.html | 111 - .../global_objects/math/cbrt/index.html | 96 - .../global_objects/math/ceil/index.html | 168 - .../global_objects/math/clz32/index.html | 110 - .../global_objects/math/cos/index.html | 96 - .../global_objects/math/cosh/index.html | 100 - .../global_objects/math/e/index.html | 81 - .../global_objects/math/exp/index.html | 93 - .../global_objects/math/expm1/index.html | 92 - .../global_objects/math/floor/index.html | 135 - .../global_objects/math/fround/index.html | 110 - .../global_objects/math/hypot/index.html | 126 - .../global_objects/math/imul/index.html | 90 - .../reference/global_objects/math/index.html | 199 - .../global_objects/math/ln10/index.html | 81 - .../global_objects/math/ln2/index.html | 81 - .../global_objects/math/log/index.html | 111 - .../global_objects/math/log10/index.html | 99 - .../global_objects/math/log10e/index.html | 83 - .../global_objects/math/log1p/index.html | 100 - .../global_objects/math/log2/index.html | 99 - .../global_objects/math/log2e/index.html | 81 - .../global_objects/math/max/index.html | 116 - .../global_objects/math/min/index.html | 110 - .../global_objects/math/pi/index.html | 79 - .../global_objects/math/pow/index.html | 111 - .../global_objects/math/random/index.html | 111 - .../global_objects/math/round/index.html | 97 - .../global_objects/math/sign/index.html | 113 - .../global_objects/math/sin/index.html | 95 - .../global_objects/math/sinh/index.html | 100 - .../global_objects/math/sqrt/index.html | 97 - .../global_objects/math/sqrt1_2/index.html | 82 - .../global_objects/math/sqrt2/index.html | 80 - .../global_objects/math/tan/index.html | 100 - .../global_objects/math/tanh/index.html | 91 - .../global_objects/math/trunc/index.html | 123 - .../reference/global_objects/nan/index.html | 97 - .../global_objects/number/epsilon/index.html | 73 - .../global_objects/number/index.html | 178 - .../global_objects/number/isfinite/index.html | 91 - .../number/isinteger/index.html | 96 - .../global_objects/number/isnan/index.html | 102 - .../number/issafeinteger/index.html | 97 - .../number/max_safe_integer/index.html | 66 - .../number/max_value/index.html | 80 - .../number/min_safe_integer/index.html | 64 - .../number/min_value/index.html | 81 - .../global_objects/number/nan/index.html | 63 - .../number/negative_infinity/index.html | 98 - .../number/parsefloat/index.html | 70 - .../global_objects/number/parseint/index.html | 75 - .../number/positive_infinity/index.html | 98 - .../number/toexponential/index.html | 106 - .../global_objects/number/tofixed/index.html | 111 - .../number/tolocalestring/index.html | 190 - .../number/toprecision/index.html | 105 - .../global_objects/number/tostring/index.html | 114 - .../global_objects/number/valueof/index.html | 83 - .../global_objects/object/assign/index.html | 277 - .../object/constructor/index.html | 144 - .../global_objects/object/create/index.html | 220 - .../global_objects/object/entries/index.html | 168 - .../global_objects/object/freeze/index.html | 253 - .../object/getownpropertynames/index.html | 153 - .../object/getprototypeof/index.html | 85 - .../object/hasownproperty/index.html | 148 - .../global_objects/object/index.html | 186 - .../global_objects/object/is/index.html | 120 - .../object/isextensible/index.html | 105 - .../global_objects/object/isfrozen/index.html | 173 - .../global_objects/object/keys/index.html | 158 - .../global_objects/object/proto/index.html | 148 - .../global_objects/object/tostring/index.html | 122 - .../global_objects/object/valueof/index.html | 113 - .../global_objects/object/values/index.html | 96 - .../global_objects/parsefloat/index.html | 143 - .../global_objects/parseint/index.html | 195 - .../global_objects/promise/all/index.html | 133 - .../global_objects/promise/finally/index.html | 91 - .../global_objects/promise/index.html | 191 - .../global_objects/promise/race/index.html | 180 - .../global_objects/promise/reject/index.html | 72 - .../global_objects/promise/then/index.html | 101 - .../global_objects/reflect/apply/index.html | 98 - .../reflect/construct/index.html | 157 - .../global_objects/reflect/index.html | 88 - .../global_objects/regexp/flags/index.html | 79 - .../global_objects/regexp/index.html | 514 - .../global_objects/regexp/input/index.html | 57 - .../global_objects/regexp/test/index.html | 125 - .../global_objects/set/add/index.html | 67 - .../global_objects/set/delete/index.html | 82 - .../global_objects/set/has/index.html | 79 - .../reference/global_objects/set/index.html | 264 - .../global_objects/string/charat/index.html | 257 - .../global_objects/string/concat/index.html | 92 - .../global_objects/string/endswith/index.html | 98 - .../string/fromcharcode/index.html | 86 - .../global_objects/string/includes/index.html | 129 - .../global_objects/string/index.html | 310 - .../global_objects/string/indexof/index.html | 152 - .../string/lastindexof/index.html | 100 - .../global_objects/string/length/index.html | 85 - .../global_objects/string/match/index.html | 140 - .../global_objects/string/raw/index.html | 112 - .../global_objects/string/repeat/index.html | 284 - .../global_objects/string/replace/index.html | 296 - .../global_objects/string/search/index.html | 104 - .../global_objects/string/slice/index.html | 104 - .../global_objects/string/split/index.html | 212 - .../string/startswith/index.html | 100 - .../global_objects/string/substr/index.html | 123 - .../string/substring/index.html | 151 - .../string/tolowercase/index.html | 77 - .../string/touppercase/index.html | 79 - .../global_objects/string/trim/index.html | 91 - .../global_objects/string/trimend/index.html | 57 - .../string/trimstart/index.html | 57 - .../global_objects/symbol/index.html | 28 - .../global_objects/syntaxerror/index.html | 133 - .../global_objects/typeerror/index.html | 133 - .../global_objects/undefined/index.html | 135 - .../global_objects/unescape/index.html | 78 - .../webassembly/compile/index.html | 91 - .../webassembly/compilestreaming/index.html | 87 - .../global_objects/webassembly/index.html | 109 - files/de/web/javascript/reference/index.html | 49 - .../reference/iteration_protocols/index.html | 349 - .../reference/lexical_grammar/index.html | 549 - .../reference/operators/addition/index.html | 76 - .../operators/async_function/index.html | 107 - .../reference/operators/await/index.html | 112 - .../reference/operators/class/index.html | 107 - .../operators/comma_operator/index.html | 107 - .../operators/conditional_operator/index.html | 190 - .../reference/operators/decrement/index.html | 83 - .../reference/operators/delete/index.html | 295 - .../destructuring_assignment/index.html | 405 - .../reference/operators/function/index.html | 151 - .../operators/function_star_/index.html | 91 - .../reference/operators/grouping/index.html | 91 - .../reference/operators/in/index.html | 145 - .../reference/operators/increment/index.html | 81 - .../javascript/reference/operators/index.html | 302 - .../reference/operators/instanceof/index.html | 172 - .../reference/operators/new.target/index.html | 102 - .../reference/operators/new/index.html | 190 - .../reference/operators/null/index.html | 94 - .../operators/object_initializer/index.html | 316 - .../operators/operator_precedence/index.html | 318 - .../operators/optional_chaining/index.html | 189 - .../operators/property_accessors/index.html | 150 - .../reference/operators/remainder/index.html | 79 - .../operators/spread_syntax/index.html | 236 - .../reference/operators/super/index.html | 184 - .../reference/operators/this/index.html | 394 - .../reference/operators/typeof/index.html | 259 - .../reference/operators/void/index.html | 108 - .../reference/operators/yield/index.html | 119 - .../operators/yield_star_/index.html | 164 - .../statements/async_function/index.html | 221 - .../reference/statements/block/index.html | 115 - .../reference/statements/break/index.html | 116 - .../reference/statements/class/index.html | 106 - .../reference/statements/const/index.html | 170 - .../reference/statements/continue/index.html | 165 - .../reference/statements/debugger/index.html | 52 - .../statements/do...while/index.html | 84 - .../reference/statements/empty/index.html | 99 - .../reference/statements/export/index.html | 126 - .../reference/statements/for...in/index.html | 179 - .../reference/statements/for...of/index.html | 127 - .../reference/statements/for/index.html | 153 - .../reference/statements/function/index.html | 124 - .../statements/function_star_/index.html | 200 - .../reference/statements/if...else/index.html | 168 - .../reference/statements/import/index.html | 151 - .../reference/statements/index.html | 148 - .../reference/statements/label/index.html | 157 - .../reference/statements/let/index.html | 326 - .../reference/statements/return/index.html | 144 - .../reference/statements/switch/index.html | 241 - .../reference/statements/throw/index.html | 208 - .../statements/try...catch/index.html | 297 - .../reference/statements/var/index.html | 195 - .../reference/statements/while/index.html | 102 - .../reference/strict_mode/index.html | 401 - .../reference/template_literals/index.html | 220 - .../de/web/javascript/typed_arrays/index.html | 182 - files/de/web/manifest/index.html | 327 - files/de/web/mathml/attribute/index.html | 488 - .../de/web/mathml/attribute/values/index.html | 147 - files/de/web/mathml/element/index.html | 144 - .../de/web/mathml/element/maction/index.html | 123 - files/de/web/mathml/element/math/index.html | 158 - .../de/web/mathml/element/menclose/index.html | 195 - files/de/web/mathml/element/merror/index.html | 74 - .../de/web/mathml/element/mfenced/index.html | 95 - files/de/web/mathml/element/mfrac/index.html | 91 - files/de/web/mathml/element/mi/index.html | 117 - files/de/web/mathml/element/mn/index.html | 116 - files/de/web/mathml/element/mo/index.html | 165 - files/de/web/mathml/element/mover/index.html | 91 - .../de/web/mathml/element/mpadded/index.html | 95 - .../de/web/mathml/element/mphantom/index.html | 77 - files/de/web/mathml/element/mroot/index.html | 76 - files/de/web/mathml/element/mrow/index.html | 93 - files/de/web/mathml/element/ms/index.html | 127 - files/de/web/mathml/element/mspace/index.html | 85 - files/de/web/mathml/element/msqrt/index.html | 74 - files/de/web/mathml/element/mstyle/index.html | 124 - files/de/web/mathml/element/msub/index.html | 89 - .../de/web/mathml/element/msubsup/index.html | 92 - files/de/web/mathml/element/msup/index.html | 89 - files/de/web/mathml/element/mtable/index.html | 137 - files/de/web/mathml/element/mtd/index.html | 70 - files/de/web/mathml/element/mtext/index.html | 117 - files/de/web/mathml/element/mtr/index.html | 66 - files/de/web/mathml/element/munder/index.html | 91 - .../web/mathml/element/munderover/index.html | 90 - .../deriving_the_quadratic_formula/index.html | 107 - files/de/web/mathml/examples/index.html | 20 - .../mathml_pythagorean_theorem/index.html | 86 - files/de/web/mathml/index.html | 66 - files/de/web/opensearch/index.html | 155 - .../web/performance/dns-prefetch/index.html | 66 - files/de/web/progressive_web_apps/index.html | 79 - .../certificate_transparency/index.html | 51 - files/de/web/security/index.html | 17 - files/de/web/svg/attribute/class/index.html | 135 - files/de/web/svg/attribute/index.html | 467 - .../attribute/preserveaspectratio/index.html | 110 - files/de/web/svg/element/animate/index.html | 113 - files/de/web/svg/element/circle/index.html | 68 - .../web/svg/element/foreignobject/index.html | 85 - 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 | 92 - files/de/web/svg/element/rect/index.html | 114 - 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 | 99 - files/de/web/svg/index.html | 109 - .../svg/namespaces_crash_course/index.html | 197 - .../svg/tutorial/fills_and_strokes/index.html | 147 - files/de/web/svg/tutorial/index.html | 13 - .../web/svg/tutorial/introduction/index.html | 21 - files/de/web/svg/tutorial/paths/index.html | 240 - .../de/web/svg/tutorial/svg_fonts/index.html | 100 - .../web/svg/tutorial/svg_image_tag/index.html | 36 - .../web/svg/tutorial/tools_for_svg/index.html | 70 - files/de/web/web_components/index.html | 222 - .../using_custom_elements/index.html | 249 - files/de/web/xml/index.html | 17 - files/de/web/xml/xml_introduction/index.html | 63 - files/de/web/xslt/index.html | 38 - files/pl/_redirects.txt | 2450 --- files/pl/_wikihistory.json | 11166 ------------ .../web/accessibility/aria/index.html | 300 - .../pl/conflicting/web/css/cursor/index.html | 42 - .../index.html | 25 - .../global_objects/array/tostring/index.html | 63 - .../boolean/tostring/index.html | 52 - .../global_objects/date/tostring/index.html | 50 - .../global_objects/error/tostring/index.html | 61 - .../global_objects/object/tostring/index.html | 74 - .../global_objects/regexp/tostring/index.html | 48 - .../global_objects/string/tostring/index.html | 42 - files/pl/games/index.html | 85 - .../bounce_off_the_walls/index.html | 112 - .../index.html | 120 - .../index.html | 58 - .../move_the_ball/index.html | 148 - files/pl/games/tutorials/index.html | 27 - files/pl/glossary/abstraction/index.html | 56 - files/pl/glossary/accessibility/index.html | 32 - .../pl/glossary/accessibility_tree/index.html | 41 - files/pl/glossary/algorithm/index.html | 34 - files/pl/glossary/api/index.html | 31 - files/pl/glossary/argument/index.html | 22 - files/pl/glossary/arpanet/index.html | 14 - files/pl/glossary/array/index.html | 30 - files/pl/glossary/ascii/index.html | 17 - files/pl/glossary/boolean/index.html | 54 - files/pl/glossary/browser/index.html | 28 - files/pl/glossary/buffer/index.html | 16 - files/pl/glossary/chrome/index.html | 12 - files/pl/glossary/class/index.html | 20 - .../glossary/computer_programming/index.html | 17 - files/pl/glossary/cookie/index.html | 18 - files/pl/glossary/cryptography/index.html | 14 - files/pl/glossary/dhtml/index.html | 36 - files/pl/glossary/doctype/index.html | 28 - files/pl/glossary/dom/index.html | 29 - files/pl/glossary/empty_element/index.html | 35 - files/pl/glossary/firefox_os/index.html | 23 - files/pl/glossary/hoisting/index.html | 64 - files/pl/glossary/html/index.html | 51 - files/pl/glossary/hypertext/index.html | 27 - files/pl/glossary/ietf/index.html | 19 - files/pl/glossary/index.html | 25 - files/pl/glossary/iso/index.html | 20 - files/pl/glossary/javascript/index.html | 41 - files/pl/glossary/json/index.html | 60 - files/pl/glossary/localization/index.html | 67 - files/pl/glossary/metadata/index.html | 25 - files/pl/glossary/mozilla_firefox/index.html | 22 - files/pl/glossary/object/index.html | 21 - files/pl/glossary/semantics/index.html | 98 - files/pl/glossary/sgml/index.html | 20 - files/pl/glossary/slug/index.html | 15 - files/pl/glossary/truthy/index.html | 34 - files/pl/glossary/utf-8/index.html | 23 - files/pl/glossary/w3c/index.html | 26 - files/pl/glossary/webgl/index.html | 34 - files/pl/glossary/world_wide_web/index.html | 41 - files/pl/glossary/xhtml/index.html | 25 - files/pl/learn/accessibility/index.html | 62 - .../what_is_accessibility/index.html | 193 - .../how_does_the_internet_work/index.html | 101 - files/pl/learn/common_questions/index.html | 135 - .../cascade_and_inheritance/index.html | 98 - files/pl/learn/css/building_blocks/index.html | 72 - .../css/building_blocks/selectors/index.html | 261 - .../building_blocks/styling_tables/index.html | 598 - .../values_and_units/index.html | 210 - .../learn/css/css_layout/flexbox/index.html | 340 - files/pl/learn/css/css_layout/index.html | 57 - .../how_css_is_structured/index.html | 155 - .../css/first_steps/how_css_works/index.html | 134 - files/pl/learn/css/first_steps/index.html | 65 - files/pl/learn/css/howto/css_faq/index.html | 163 - .../css/howto/generated_content/index.html | 140 - files/pl/learn/css/howto/index.html | 86 - files/pl/learn/css/index.html | 52 - .../css/styling_text/fundamentals/index.html | 117 - .../css/styling_text/styling_lists/index.html | 270 - .../css_basics/index.html | 272 - .../dealing_with_files/index.html | 95 - .../how_the_web_works/index.html | 111 - .../html_basics/index.html | 219 - .../getting_started_with_the_web/index.html | 59 - .../installing_basic_software/index.html | 80 - .../javascript_basics/index.html | 395 - .../index.html | 99 - files/pl/learn/html/howto/index.html | 155 - .../html/howto/use_data_attributes/index.html | 82 - files/pl/learn/html/index.html | 50 - .../html/introduction_to_html/index.html | 67 - files/pl/learn/index.html | 139 - .../learn/javascript/asynchronous/index.html | 67 - .../asynchronous/introducing/index.html | 279 - .../javascript/building_blocks/index.html | 44 - .../client-side_web_apis/index.html | 37 - .../manipulating_documents/index.html | 128 - .../first_steps/a_first_splash/index.html | 688 - .../learn/javascript/first_steps/index.html | 62 - .../first_steps/variables/index.html | 454 - .../first_steps/what_is_javascript/index.html | 343 - .../first_steps/what_went_wrong/index.html | 258 - files/pl/learn/javascript/index.html | 78 - files/pl/learn/javascript/objects/index.html | 48 - .../configuring_server_mime_types/index.html | 115 - .../development_environment/index.html | 411 - .../server-side/express_nodejs/index.html | 70 - .../express_nodejs/introduction/index.html | 538 - .../skeleton_website/index.html | 528 - .../tutorial_local_library_website/index.html | 90 - files/pl/learn/server-side/index.html | 59 - files/pl/mdn/at_ten/index.html | 44 - .../contributing/getting_started/index.html | 131 - files/pl/mdn/community/index.html | 49 - files/pl/mdn/contribute/howto/index.html | 13 - files/pl/mdn/contribute/index.html | 92 - files/pl/mdn/index.html | 32 - files/pl/mdn/writing_guidelines/index.html | 21 - files/pl/mdn/yari/index.html | 26 - files/pl/mozilla/add-ons/index.html | 90 - .../mozilla/add-ons/webextensions/index.html | 125 - .../manifest.json/description/index.html | 38 - .../webextensions/manifest.json/index.html | 105 - .../manifest.json/manifest_version/index.html | 39 - .../manifest.json/name/index.html | 38 - .../manifest.json/version/index.html | 43 - .../your_first_webextension/index.html | 160 - files/pl/mozilla/firefox/index.html | 63 - .../index.html | 36 - .../mozilla/firefox/releases/1.5/index.html | 157 - .../1.5/what_s_new_in_1.5_alpha/index.html | 263 - .../pl/mozilla/firefox/releases/2/index.html | 156 - .../releases/2/security_changes/index.html | 37 - .../releases/2/updating_extensions/index.html | 45 - .../releases/3/dom_improvements/index.html | 41 - .../pl/mozilla/firefox/releases/3/index.html | 273 - .../releases/3/notable_bugs_fixed/index.html | 35 - .../releases/3/svg_improvements/index.html | 65 - .../3/updating_web_applications/index.html | 94 - .../xul_improvements_in_firefox_3/index.html | 98 - files/pl/mozilla/firefox/releases/index.html | 12 - files/pl/mozilla/index.html | 11 - .../api/htmlorforeignelement/blur/index.html | 22 - .../api/htmlorforeignelement/focus/index.html | 24 - .../api/navigatorid/appcodename/index.html | 31 - .../web/api/navigatorid/appname/index.html | 30 - .../web/api/navigatorid/appversion/index.html | 33 - .../web/api/navigatorid/platform/index.html | 29 - .../web/api/navigatorid/product/index.html | 39 - .../web/api/navigatorlanguage/index.html | 149 - .../api/navigatorlanguage/language/index.html | 46 - .../web/api/navigatoronline/index.html | 128 - .../web/api/navigatoronline/online/index.html | 48 - .../online_and_offline_events/index.html | 85 - .../web/api/navigatorplugins/index.html | 112 - .../navigatorplugins/javaenabled/index.html | 40 - .../api/navigatorplugins/mimetypes/index.html | 41 - .../api/navigatorplugins/plugins/index.html | 59 - .../index.html | 166 - files/pl/web/accessibility/aria/index.html | 127 - files/pl/web/accessibility/index.html | 91 - files/pl/web/api/atob/index.html | 105 - files/pl/web/api/attr/index.html | 164 - files/pl/web/api/audiobuffer/index.html | 174 - files/pl/web/api/audioparam/index.html | 224 - .../api/audioparam/setvalueattime/index.html | 182 - .../createdynamicscompressor/index.html | 143 - files/pl/web/api/btoa/index.html | 127 - files/pl/web/api/cache/index.html | 121 - files/pl/web/api/canvas_api/index.html | 53 - .../tutorial/basic_usage/index.html | 169 - .../tutorial/drawing_shapes/index.html | 572 - .../tutorial/drawing_text/index.html | 136 - .../pl/web/api/canvas_api/tutorial/index.html | 60 - .../tutorial/optimizing_canvas/index.html | 120 - files/pl/web/api/clearinterval/index.html | 29 - files/pl/web/api/cleartimeout/index.html | 41 - files/pl/web/api/console/index.html | 228 - files/pl/web/api/console/log/index.html | 69 - files/pl/web/api/crypto_property/index.html | 20 - .../pl/web/api/cssnumericvalue/div/index.html | 59 - files/pl/web/api/cssnumericvalue/index.html | 113 - files/pl/web/api/cssrule/index.html | 97 - files/pl/web/api/cssrulelist/index.html | 47 - .../api/cssstylesheet/deleterule/index.html | 27 - files/pl/web/api/cssstylesheet/index.html | 58 - .../api/cssstylesheet/insertrule/index.html | 43 - .../web/api/document/activeelement/index.html | 28 - .../pl/web/api/document/alinkcolor/index.html | 24 - files/pl/web/api/document/anchors/index.html | 38 - files/pl/web/api/document/applets/index.html | 26 - files/pl/web/api/document/bgcolor/index.html | 33 - files/pl/web/api/document/body/index.html | 31 - .../web/api/document/characterset/index.html | 26 - files/pl/web/api/document/clear/index.html | 19 - files/pl/web/api/document/close/index.html | 26 - .../pl/web/api/document/compatmode/index.html | 32 - files/pl/web/api/document/cookie/index.html | 49 - .../api/document/createattribute/index.html | 29 - .../createdocumentfragment/index.html | 43 - .../web/api/document/createelement/index.html | 74 - .../web/api/document/createevent/index.html | 134 - .../web/api/document/createrange/index.html | 29 - .../api/document/createtextnode/index.html | 62 - .../web/api/document/defaultview/index.html | 24 - .../pl/web/api/document/designmode/index.html | 53 - files/pl/web/api/document/doctype/index.html | 21 - .../api/document/documentelement/index.html | 60 - files/pl/web/api/document/domain/index.html | 30 - .../pl/web/api/document/drag_event/index.html | 333 - files/pl/web/api/document/embeds/index.html | 22 - .../web/api/document/execcommand/index.html | 280 - files/pl/web/api/document/fgcolor/index.html | 28 - files/pl/web/api/document/forms/index.html | 45 - .../api/document/getelementbyid/index.html | 67 - .../getelementsbyclassname/index.html | 82 - .../api/document/getelementsbyname/index.html | 35 - .../document/getelementsbytagname/index.html | 108 - files/pl/web/api/document/hasfocus/index.html | 25 - files/pl/web/api/document/head/index.html | 110 - files/pl/web/api/document/height/index.html | 34 - files/pl/web/api/document/images/index.html | 31 - .../api/document/implementation/index.html | 21 - .../pl/web/api/document/importnode/index.html | 57 - files/pl/web/api/document/index.html | 332 - .../web/api/document/lastmodified/index.html | 25 - .../pl/web/api/document/linkcolor/index.html | 33 - files/pl/web/api/document/links/index.html | 30 - files/pl/web/api/document/location/index.html | 37 - files/pl/web/api/document/open/index.html | 40 - files/pl/web/api/document/plugins/index.html | 40 - .../web/api/document/queryselector/index.html | 159 - files/pl/web/api/document/referrer/index.html | 22 - .../api/document/releasecapture/index.html | 31 - .../web/api/document/stylesheets/index.html | 21 - files/pl/web/api/document/title/index.html | 45 - files/pl/web/api/document/url/index.html | 25 - .../pl/web/api/document/vlinkcolor/index.html | 29 - files/pl/web/api/document/width/index.html | 28 - files/pl/web/api/document/write/index.html | 38 - files/pl/web/api/document/writeln/index.html | 41 - .../document_object_model/examples/index.html | 355 - .../web/api/document_object_model/index.html | 86 - .../introduction/index.html | 172 - .../pl/web/api/element/attributes/index.html | 82 - .../api/element/childelementcount/index.html | 94 - files/pl/web/api/element/classlist/index.html | 264 - files/pl/web/api/element/classname/index.html | 37 - .../pl/web/api/element/click_event/index.html | 67 - .../pl/web/api/element/clientwidth/index.html | 47 - .../web/api/element/getattribute/index.html | 43 - .../api/element/getattributenode/index.html | 36 - .../api/element/getattributenodens/index.html | 39 - .../web/api/element/getattributens/index.html | 47 - .../element/getboundingclientrect/index.html | 146 - .../element/getelementsbytagnamens/index.html | 49 - .../web/api/element/hasattribute/index.html | 34 - .../web/api/element/hasattributens/index.html | 39 - .../web/api/element/hasattributes/index.html | 28 - files/pl/web/api/element/id/index.html | 38 - files/pl/web/api/element/index.html | 677 - files/pl/web/api/element/innerhtml/index.html | 67 - .../api/element/insertadjacenthtml/index.html | 91 - .../web/api/element/keydown_event/index.html | 25 - .../web/api/element/keypress_event/index.html | 22 - .../pl/web/api/element/keyup_event/index.html | 25 - files/pl/web/api/element/localname/index.html | 65 - .../api/element/mousedown_event/index.html | 24 - .../api/element/mousemove_event/index.html | 30 - .../web/api/element/namespaceuri/index.html | 40 - files/pl/web/api/element/prefix/index.html | 29 - .../api/element/removeattribute/index.html | 36 - .../element/removeattributenode/index.html | 37 - .../api/element/removeattributens/index.html | 35 - .../pl/web/api/element/scrollleft/index.html | 58 - files/pl/web/api/element/scrolltop/index.html | 70 - .../pl/web/api/element/scrollwidth/index.html | 32 - .../web/api/element/setattribute/index.html | 34 - .../api/element/setattributenode/index.html | 40 - .../api/element/setattributenodens/index.html | 41 - .../web/api/element/setattributens/index.html | 33 - files/pl/web/api/element/tagname/index.html | 37 - files/pl/web/api/event/bubbles/index.html | 31 - files/pl/web/api/event/cancelable/index.html | 34 - .../pl/web/api/event/currenttarget/index.html | 25 - files/pl/web/api/event/eventphase/index.html | 40 - files/pl/web/api/event/index.html | 179 - files/pl/web/api/event/initevent/index.html | 45 - .../web/api/event/stoppropagation/index.html | 26 - files/pl/web/api/event/target/index.html | 27 - files/pl/web/api/event/timestamp/index.html | 47 - files/pl/web/api/event/type/index.html | 19 - .../eventtarget/addeventlistener/index.html | 110 - .../api/eventtarget/dispatchevent/index.html | 44 - files/pl/web/api/file/file/index.html | 68 - files/pl/web/api/file/index.html | 112 - files/pl/web/api/geolocation_api/index.html | 92 - .../pl/web/api/globaleventhandlers/index.html | 714 - .../capturestream/index.html | 73 - .../htmlcanvaselement/getcontext/index.html | 129 - .../api/htmlcanvaselement/height/index.html | 79 - files/pl/web/api/htmlcanvaselement/index.html | 97 - .../api/htmlcanvaselement/width/index.html | 79 - files/pl/web/api/htmlelement/click/index.html | 24 - files/pl/web/api/htmlelement/dir/index.html | 35 - files/pl/web/api/htmlelement/index.html | 409 - files/pl/web/api/htmlelement/lang/index.html | 41 - .../web/api/htmlelement/offsetleft/index.html | 74 - .../api/htmlelement/offsetparent/index.html | 29 - .../api/htmlelement/offsetwidth/index.html | 71 - .../htmlformelement/acceptcharset/index.html | 33 - .../web/api/htmlformelement/action/index.html | 36 - .../api/htmlformelement/elements/index.html | 36 - .../api/htmlformelement/encoding/index.html | 15 - .../api/htmlformelement/enctype/index.html | 39 - files/pl/web/api/htmlformelement/index.html | 143 - .../web/api/htmlformelement/length/index.html | 33 - .../web/api/htmlformelement/method/index.html | 35 - .../web/api/htmlformelement/name/index.html | 44 - .../web/api/htmlformelement/reset/index.html | 37 - .../web/api/htmlformelement/submit/index.html | 37 - .../web/api/htmlformelement/target/index.html | 35 - files/pl/web/api/htmliframeelement/index.html | 288 - .../api/htmltableelement/caption/index.html | 39 - files/pl/web/api/htmltableelement/index.html | 72 - .../web/api/htmltableelement/tfoot/index.html | 39 - .../web/api/htmltableelement/thead/index.html | 45 - files/pl/web/api/index.html | 11 - .../web/api/keyboardevent/charcode/index.html | 28 - .../web/api/keyboardevent/keycode/index.html | 25 - files/pl/web/api/location/index.html | 114 - files/pl/web/api/location/reload/index.html | 67 - files/pl/web/api/midiaccess/index.html | 70 - files/pl/web/api/mouseevent/altkey/index.html | 33 - files/pl/web/api/mouseevent/button/index.html | 68 - .../pl/web/api/mouseevent/clientx/index.html | 27 - .../pl/web/api/mouseevent/clienty/index.html | 18 - .../pl/web/api/mouseevent/ctrlkey/index.html | 28 - .../api/mouseevent/initmouseevent/index.html | 87 - files/pl/web/api/mouseevent/layerx/index.html | 16 - files/pl/web/api/mouseevent/layery/index.html | 18 - .../pl/web/api/mouseevent/metakey/index.html | 32 - files/pl/web/api/mouseevent/pagex/index.html | 18 - files/pl/web/api/mouseevent/pagey/index.html | 16 - .../api/mouseevent/relatedtarget/index.html | 58 - .../pl/web/api/mouseevent/screenx/index.html | 35 - .../pl/web/api/mouseevent/screeny/index.html | 25 - .../pl/web/api/mouseevent/shiftkey/index.html | 28 - files/pl/web/api/navigator/buildid/index.html | 41 - .../api/navigator/cookieenabled/index.html | 45 - files/pl/web/api/navigator/index.html | 119 - files/pl/web/api/navigator/oscpu/index.html | 41 - .../web/api/navigator/productsub/index.html | 52 - .../registerprotocolhandler/index.html | 66 - .../web-based_protocol_handlers/index.html | 107 - files/pl/web/api/node/appendchild/index.html | 53 - files/pl/web/api/node/childnodes/index.html | 50 - files/pl/web/api/node/clonenode/index.html | 33 - files/pl/web/api/node/firstchild/index.html | 102 - .../pl/web/api/node/haschildnodes/index.html | 29 - files/pl/web/api/node/insertbefore/index.html | 87 - files/pl/web/api/node/lastchild/index.html | 29 - files/pl/web/api/node/nextsibling/index.html | 64 - files/pl/web/api/node/nodename/index.html | 99 - files/pl/web/api/node/nodevalue/index.html | 86 - files/pl/web/api/node/normalize/index.html | 23 - .../pl/web/api/node/ownerdocument/index.html | 31 - files/pl/web/api/node/parentnode/index.html | 35 - .../web/api/node/previoussibling/index.html | 29 - files/pl/web/api/node/removechild/index.html | 37 - files/pl/web/api/node/replacechild/index.html | 54 - files/pl/web/api/node/textcontent/index.html | 42 - files/pl/web/api/nodelist/length/index.html | 38 - files/pl/web/api/notification/index.html | 349 - files/pl/web/api/range/index.html | 105 - files/pl/web/api/screen/colordepth/index.html | 43 - files/pl/web/api/screen/index.html | 74 - .../pl/web/api/selection/addrange/index.html | 40 - .../web/api/selection/anchornode/index.html | 22 - .../web/api/selection/anchoroffset/index.html | 23 - .../pl/web/api/selection/collapse/index.html | 45 - .../api/selection/collapsetoend/index.html | 22 - .../api/selection/collapsetostart/index.html | 22 - .../web/api/selection/containsnode/index.html | 47 - .../selection/deletefromdocument/index.html | 24 - files/pl/web/api/selection/extend/index.html | 40 - .../pl/web/api/selection/focusnode/index.html | 21 - .../web/api/selection/focusoffset/index.html | 22 - .../web/api/selection/getrangeat/index.html | 44 - files/pl/web/api/selection/index.html | 100 - .../web/api/selection/iscollapsed/index.html | 21 - .../web/api/selection/rangecount/index.html | 19 - .../api/selection/removeallranges/index.html | 22 - .../web/api/selection/removerange/index.html | 40 - .../selection/selectallchildren/index.html | 40 - .../pl/web/api/selection/tostring/index.html | 35 - files/pl/web/api/setinterval/index.html | 88 - files/pl/web/api/settimeout/index.html | 47 - .../pl/web/api/stylesheet/disabled/index.html | 25 - files/pl/web/api/stylesheet/href/index.html | 42 - files/pl/web/api/stylesheet/media/index.html | 29 - .../stylesheet/parentstylesheet/index.html | 29 - files/pl/web/api/stylesheet/title/index.html | 18 - files/pl/web/api/stylesheet/type/index.html | 22 - files/pl/web/api/touch_events/index.html | 337 - .../pl/web/api/uievent/inituievent/index.html | 50 - files/pl/web/api/uievent/ischar/index.html | 25 - files/pl/web/api/uievent/view/index.html | 24 - files/pl/web/api/web_storage_api/index.html | 156 - files/pl/web/api/webgl_api/index.html | 252 - files/pl/web/api/websockets_api/index.html | 188 - files/pl/web/api/window/alert/index.html | 58 - .../api/window/applicationcache/index.html | 33 - files/pl/web/api/window/blur_event/index.html | 86 - files/pl/web/api/window/closed/index.html | 59 - .../pl/web/api/window/controllers/index.html | 24 - .../web/api/window/defaultstatus/index.html | 35 - .../pl/web/api/window/directories/index.html | 33 - files/pl/web/api/window/document/index.html | 40 - files/pl/web/api/window/dump/index.html | 30 - files/pl/web/api/window/focus/index.html | 24 - .../pl/web/api/window/focus_event/index.html | 88 - .../pl/web/api/window/frameelement/index.html | 34 - files/pl/web/api/window/frames/index.html | 31 - .../pl/web/api/window/getselection/index.html | 39 - files/pl/web/api/window/index.html | 494 - files/pl/web/api/window/load_event/index.html | 63 - .../pl/web/api/window/localstorage/index.html | 125 - files/pl/web/api/window/name/index.html | 27 - files/pl/web/api/window/navigator/index.html | 84 - files/pl/web/api/window/open/index.html | 796 - files/pl/web/api/window/opener/index.html | 49 - files/pl/web/api/window/prompt/index.html | 33 - .../window/requestanimationframe/index.html | 170 - files/pl/web/api/window/resizeby/index.html | 32 - files/pl/web/api/window/resizeto/index.html | 36 - files/pl/web/api/window/scroll/index.html | 33 - .../web/api/window/scrollbylines/index.html | 35 - .../web/api/window/scrollbypages/index.html | 35 - files/pl/web/api/window/scrollto/index.html | 32 - .../api/windoworworkerglobalscope/index.html | 115 - files/pl/web/api/xmlhttprequest/index.html | 234 - files/pl/web/css/-moz-image-region/index.html | 41 - .../-moz-outline-radius-bottomleft/index.html | 17 - .../index.html | 15 - .../-moz-outline-radius-topleft/index.html | 15 - .../pl/web/css/-moz-outline-radius/index.html | 71 - files/pl/web/css/@document/index.html | 46 - files/pl/web/css/@import/index.html | 34 - files/pl/web/css/@media/index.html | 193 - files/pl/web/css/@supports/index.html | 123 - .../web/css/_colon_-moz-first-node/index.html | 59 - .../web/css/_colon_-moz-last-node/index.html | 63 - files/pl/web/css/_colon_active/index.html | 160 - files/pl/web/css/_colon_empty/index.html | 44 - .../pl/web/css/_colon_first-child/index.html | 74 - files/pl/web/css/_colon_hover/index.html | 101 - files/pl/web/css/_colon_lang/index.html | 31 - files/pl/web/css/_colon_last-child/index.html | 51 - files/pl/web/css/_colon_link/index.html | 70 - files/pl/web/css/_colon_not/index.html | 73 - files/pl/web/css/_colon_root/index.html | 26 - .../pl/web/css/_doublecolon_after/index.html | 64 - .../pl/web/css/_doublecolon_before/index.html | 61 - .../css/_doublecolon_first-letter/index.html | 50 - files/pl/web/css/appearance/index.html | 96 - .../web/css/background-attachment/index.html | 124 - files/pl/web/css/background-color/index.html | 82 - files/pl/web/css/background-image/index.html | 114 - files/pl/web/css/background-origin/index.html | 52 - .../pl/web/css/background-position/index.html | 122 - files/pl/web/css/background/index.html | 134 - .../pl/web/css/border-bottom-color/index.html | 149 - .../css/border-bottom-left-radius/index.html | 20 - .../css/border-bottom-right-radius/index.html | 20 - .../pl/web/css/border-bottom-style/index.html | 159 - .../pl/web/css/border-bottom-width/index.html | 143 - files/pl/web/css/border-bottom/index.html | 146 - files/pl/web/css/border-collapse/index.html | 89 - files/pl/web/css/border-color/index.html | 135 - files/pl/web/css/border-left-color/index.html | 109 - files/pl/web/css/border-left-style/index.html | 16 - files/pl/web/css/border-left-width/index.html | 19 - files/pl/web/css/border-left/index.html | 123 - files/pl/web/css/border-radius/index.html | 69 - .../pl/web/css/border-right-color/index.html | 16 - .../pl/web/css/border-right-style/index.html | 16 - .../pl/web/css/border-right-width/index.html | 17 - files/pl/web/css/border-right/index.html | 123 - files/pl/web/css/border-spacing/index.html | 101 - files/pl/web/css/border-style/index.html | 126 - files/pl/web/css/border-top-color/index.html | 14 - .../web/css/border-top-left-radius/index.html | 20 - .../css/border-top-right-radius/index.html | 14 - files/pl/web/css/border-top-style/index.html | 16 - files/pl/web/css/border-top-width/index.html | 16 - files/pl/web/css/border-top/index.html | 123 - files/pl/web/css/border-width/index.html | 113 - files/pl/web/css/border/index.html | 123 - files/pl/web/css/bottom/index.html | 149 - files/pl/web/css/box-align/index.html | 78 - files/pl/web/css/box-direction/index.html | 72 - files/pl/web/css/box-flex/index.html | 65 - files/pl/web/css/box-orient/index.html | 55 - files/pl/web/css/box-pack/index.html | 83 - files/pl/web/css/box-shadow/index.html | 222 - files/pl/web/css/box-sizing/index.html | 45 - files/pl/web/css/class_selectors/index.html | 87 - files/pl/web/css/clear/index.html | 98 - files/pl/web/css/clip/index.html | 92 - files/pl/web/css/color/index.html | 62 - files/pl/web/css/content/index.html | 107 - files/pl/web/css/counter-increment/index.html | 67 - files/pl/web/css/counter-reset/index.html | 66 - .../css_colors/color_picker_tool/index.html | 3242 ---- files/pl/web/css/css_colors/index.html | 121 - .../using_multi-column_layouts/index.html | 66 - .../using_css_counters/index.html | 87 - .../css/css_flexible_box_layout/index.html | 156 - files/pl/web/css/css_fonts/index.html | 35 - files/pl/web/css/css_grid_layout/index.html | 245 - files/pl/web/css/css_selectors/index.html | 133 - .../index.html | 65 - files/pl/web/css/cursor/index.html | 156 - files/pl/web/css/direction/index.html | 50 - files/pl/web/css/display/index.html | 168 - files/pl/web/css/empty-cells/index.html | 77 - files/pl/web/css/float/index.html | 116 - files/pl/web/css/font-family/index.html | 58 - files/pl/web/css/font-size-adjust/index.html | 60 - files/pl/web/css/font-size/index.html | 339 - files/pl/web/css/font-stretch/index.html | 77 - files/pl/web/css/font-style/index.html | 49 - files/pl/web/css/font-variant/index.html | 79 - files/pl/web/css/font-weight/index.html | 107 - files/pl/web/css/font/index.html | 145 - files/pl/web/css/grid/index.html | 200 - files/pl/web/css/height/index.html | 92 - files/pl/web/css/id_selectors/index.html | 77 - files/pl/web/css/ime-mode/index.html | 9 - files/pl/web/css/index.html | 95 - files/pl/web/css/inheritance/index.html | 51 - files/pl/web/css/initial/index.html | 118 - files/pl/web/css/initial_value/index.html | 26 - files/pl/web/css/letter-spacing/index.html | 74 - files/pl/web/css/list-style-image/index.html | 70 - .../pl/web/css/list-style-position/index.html | 99 - files/pl/web/css/list-style-type/index.html | 108 - files/pl/web/css/margin/index.html | 113 - files/pl/web/css/media_queries/index.html | 122 - .../testing_media_queries/index.html | 117 - .../using_media_queries/index.html | 319 - .../pl/web/css/mozilla_extensions/index.html | 679 - files/pl/web/css/opacity/index.html | 180 - files/pl/web/css/outline-color/index.html | 14 - files/pl/web/css/outline-offset/index.html | 42 - files/pl/web/css/outline/index.html | 57 - files/pl/web/css/page-break-after/index.html | 101 - .../index.html | 69 - files/pl/web/css/reference/index.html | 57 - files/pl/web/css/right/index.html | 148 - .../web/css/shorthand_properties/index.html | 57 - files/pl/web/css/text-transform/index.html | 81 - .../pl/web/css/transform-function/index.html | 201 - .../css/transform-function/matrix/index.html | 59 - files/pl/web/css/type_selectors/index.html | 81 - .../pl/web/css/universal_selectors/index.html | 105 - .../using_css_custom_properties/index.html | 244 - files/pl/web/css/vertical-align/index.html | 66 - files/pl/web/css/webkit_extensions/index.html | 359 - files/pl/web/css/white-space/index.html | 93 - files/pl/web/css/width/index.html | 207 - files/pl/web/css/word-spacing/index.html | 78 - files/pl/web/css/z-index/index.html | 128 - files/pl/web/exslt/index.html | 92 - .../web/guide/ajax/getting_started/index.html | 222 - files/pl/web/guide/ajax/index.html | 23 - files/pl/web/guide/api/index.html | 25 - files/pl/web/guide/graphics/index.html | 40 - files/pl/web/guide/index.html | 55 - .../web/html/block-level_elements/index.html | 39 - files/pl/web/html/element/a/index.html | 384 - files/pl/web/html/element/abbr/index.html | 200 - files/pl/web/html/element/acronym/index.html | 81 - files/pl/web/html/element/address/index.html | 140 - files/pl/web/html/element/applet/index.html | 74 - files/pl/web/html/element/aside/index.html | 126 - files/pl/web/html/element/b/index.html | 30 - files/pl/web/html/element/base/index.html | 129 - files/pl/web/html/element/bdo/index.html | 22 - files/pl/web/html/element/bgsound/index.html | 45 - files/pl/web/html/element/big/index.html | 20 - files/pl/web/html/element/blink/index.html | 22 - .../pl/web/html/element/blockquote/index.html | 49 - files/pl/web/html/element/body/index.html | 166 - files/pl/web/html/element/br/index.html | 41 - files/pl/web/html/element/center/index.html | 36 - files/pl/web/html/element/cite/index.html | 38 - files/pl/web/html/element/code/index.html | 23 - files/pl/web/html/element/dd/index.html | 33 - files/pl/web/html/element/details/index.html | 195 - files/pl/web/html/element/div/index.html | 131 - files/pl/web/html/element/dl/index.html | 112 - files/pl/web/html/element/dt/index.html | 24 - files/pl/web/html/element/em/index.html | 31 - files/pl/web/html/element/head/index.html | 128 - files/pl/web/html/element/hr/index.html | 57 - files/pl/web/html/element/html/index.html | 122 - files/pl/web/html/element/i/index.html | 19 - files/pl/web/html/element/iframe/index.html | 292 - files/pl/web/html/element/index.html | 131 - files/pl/web/html/element/kbd/index.html | 27 - files/pl/web/html/element/li/index.html | 50 - files/pl/web/html/element/link/index.html | 412 - files/pl/web/html/element/marquee/index.html | 112 - files/pl/web/html/element/ol/index.html | 123 - files/pl/web/html/element/p/index.html | 45 - files/pl/web/html/element/q/index.html | 36 - files/pl/web/html/element/ruby/index.html | 103 - files/pl/web/html/element/s/index.html | 23 - files/pl/web/html/element/samp/index.html | 25 - files/pl/web/html/element/section/index.html | 128 - files/pl/web/html/element/small/index.html | 26 - files/pl/web/html/element/span/index.html | 138 - files/pl/web/html/element/strong/index.html | 22 - files/pl/web/html/element/title/index.html | 120 - files/pl/web/html/element/tt/index.html | 27 - files/pl/web/html/element/ul/index.html | 103 - files/pl/web/html/element/video/index.html | 355 - .../pl/web/html/global_attributes/index.html | 480 - .../global_attributes/tabindex/index.html | 114 - files/pl/web/html/index.html | 55 - files/pl/web/html/inline_elements/index.html | 31 - .../quirks_mode_and_standards_mode/index.html | 55 - .../http/basics_of_http/mime_types/index.html | 40 - files/pl/web/http/cookies/index.html | 264 - files/pl/web/http/headers/index.html | 374 - .../http/headers/referrer-policy/index.html | 260 - files/pl/web/http/index.html | 89 - files/pl/web/http/overview/index.html | 179 - files/pl/web/http/status/404/index.html | 16 - files/pl/web/index.html | 52 - .../index.html | 966 -- .../javascript/about_javascript/index.html | 58 - files/pl/web/javascript/closures/index.html | 409 - files/pl/web/javascript/eventloop/index.html | 98 - .../index.html | 380 - .../expressions_and_operators/index.html | 114 - .../web/javascript/guide/functions/index.html | 643 - .../guide/grammar_and_types/index.html | 596 - files/pl/web/javascript/guide/index.html | 122 - .../javascript/guide/introduction/index.html | 150 - .../guide/iterators_and_generators/index.html | 165 - .../guide/loops_and_iteration/index.html | 332 - .../guide/regular_expressions/index.html | 52 - .../guide/working_with_objects/index.html | 51 - files/pl/web/javascript/index.html | 131 - .../index.html | 296 - .../index.html | 48 - .../web/javascript/reference/about/index.html | 59 - .../reference/classes/constructor/index.html | 189 - .../reference/classes/extends/index.html | 88 - .../javascript/reference/classes/index.html | 410 - .../classes/private_class_fields/index.html | 205 - .../classes/public_class_fields/index.html | 269 - .../reference/classes/static/index.html | 138 - .../javascript/reference/errors/index.html | 28 - .../errors/invalid_array_length/index.html | 79 - .../reference/errors/invalid_date/index.html | 59 - .../errors/json_bad_parse/index.html | 114 - .../index.html | 78 - .../index.html | 72 - .../missing_initializer_in_const/index.html | 61 - .../index.html | 59 - .../index.html | 82 - .../errors/more_arguments_needed/index.html | 44 - .../errors/not_a_function/index.html | 84 - .../reference/errors/not_defined/index.html | 66 - .../errors/property_access_denied/index.html | 53 - .../errors/unexpected_type/index.html | 69 - .../functions/arguments/callee/index.html | 55 - .../reference/functions/arguments/index.html | 124 - .../functions/arguments/length/index.html | 56 - .../functions/arrow_functions/index.html | 356 - .../functions/default_parameters/index.html | 226 - .../reference/functions/get/index.html | 216 - .../javascript/reference/functions/index.html | 657 - .../reference/functions/set/index.html | 146 - .../global_objects/array/concat/index.html | 72 - .../array/copywithin/index.html | 182 - .../global_objects/array/entries/index.html | 78 - .../global_objects/array/every/index.html | 90 - .../global_objects/array/fill/index.html | 186 - .../global_objects/array/filter/index.html | 151 - .../global_objects/array/find/index.html | 279 - .../global_objects/array/findindex/index.html | 215 - .../global_objects/array/flat/index.html | 174 - .../global_objects/array/foreach/index.html | 105 - .../global_objects/array/from/index.html | 249 - .../global_objects/array/includes/index.html | 111 - .../reference/global_objects/array/index.html | 280 - .../global_objects/array/indexof/index.html | 96 - .../global_objects/array/isarray/index.html | 140 - .../global_objects/array/join/index.html | 51 - .../global_objects/array/keys/index.html | 121 - .../array/lastindexof/index.html | 115 - .../global_objects/array/length/index.html | 54 - .../global_objects/array/map/index.html | 94 - .../global_objects/array/of/index.html | 93 - .../global_objects/array/pop/index.html | 139 - .../global_objects/array/push/index.html | 52 - .../global_objects/array/reduce/index.html | 301 - .../array/reduceright/index.html | 345 - .../global_objects/array/reverse/index.html | 56 - .../global_objects/array/shift/index.html | 49 - .../global_objects/array/slice/index.html | 100 - .../global_objects/array/some/index.html | 111 - .../global_objects/array/sort/index.html | 123 - .../global_objects/array/splice/index.html | 87 - .../array/tolocalestring/index.html | 129 - .../global_objects/array/tostring/index.html | 43 - .../global_objects/array/unshift/index.html | 57 - .../global_objects/array/values/index.html | 85 - .../global_objects/arraybuffer/index.html | 223 - .../global_objects/bigint/asintn/index.html | 80 - .../global_objects/bigint/asuintn/index.html | 79 - .../global_objects/bigint/index.html | 286 - .../global_objects/bigint/tostring/index.html | 94 - .../global_objects/bigint/valueof/index.html | 58 - .../global_objects/boolean/index.html | 112 - .../boolean/tostring/index.html | 42 - .../global_objects/boolean/valueof/index.html | 44 - .../global_objects/dataview/index.html | 119 - .../global_objects/date/getdate/index.html | 48 - .../global_objects/date/getday/index.html | 48 - .../date/getfullyear/index.html | 48 - .../global_objects/date/gethours/index.html | 47 - .../date/getmilliseconds/index.html | 45 - .../global_objects/date/getminutes/index.html | 49 - .../global_objects/date/getmonth/index.html | 47 - .../global_objects/date/getseconds/index.html | 47 - .../global_objects/date/gettime/index.html | 48 - .../date/gettimezoneoffset/index.html | 36 - .../global_objects/date/getutcdate/index.html | 46 - .../global_objects/date/getutcday/index.html | 46 - .../date/getutcfullyear/index.html | 45 - .../date/getutchours/index.html | 45 - .../date/getutcmilliseconds/index.html | 45 - .../date/getutcminutes/index.html | 45 - .../date/getutcmonth/index.html | 45 - .../date/getutcseconds/index.html | 45 - .../global_objects/date/getyear/index.html | 98 - .../reference/global_objects/date/index.html | 139 - .../global_objects/date/now/index.html | 44 - .../global_objects/date/parse/index.html | 75 - .../global_objects/date/setdate/index.html | 44 - .../date/setfullyear/index.html | 59 - .../global_objects/date/sethours/index.html | 67 - .../date/setmilliseconds/index.html | 46 - .../global_objects/date/setminutes/index.html | 61 - .../global_objects/date/setmonth/index.html | 57 - .../global_objects/date/setseconds/index.html | 57 - .../global_objects/date/settime/index.html | 47 - .../global_objects/date/setutcdate/index.html | 46 - .../date/setutcfullyear/index.html | 58 - .../date/setutchours/index.html | 63 - .../date/setutcmilliseconds/index.html | 46 - .../date/setutcminutes/index.html | 58 - .../date/setutcmonth/index.html | 53 - .../date/setutcseconds/index.html | 53 - .../global_objects/date/setyear/index.html | 53 - .../date/togmtstring/index.html | 45 - .../global_objects/date/tojson/index.html | 69 - .../date/tolocaledatestring/index.html | 56 - .../date/tolocalestring/index.html | 52 - .../date/tolocaletimestring/index.html | 53 - .../global_objects/date/tostring/index.html | 50 - .../date/toutcstring/index.html | 44 - .../global_objects/date/utc/index.html | 70 - .../global_objects/date/valueof/index.html | 47 - .../global_objects/decodeuri/index.html | 40 - .../decodeuricomponent/index.html | 42 - .../global_objects/encodeuri/index.html | 73 - .../encodeuricomponent/index.html | 39 - .../error/columnnumber/index.html | 82 - .../global_objects/error/filename/index.html | 50 - .../reference/global_objects/error/index.html | 247 - .../error/linenumber/index.html | 58 - .../global_objects/error/message/index.html | 109 - .../global_objects/error/name/index.html | 110 - .../global_objects/error/stack/index.html | 128 - .../global_objects/error/tostring/index.html | 99 - .../global_objects/evalerror/index.html | 88 - .../global_objects/function/apply/index.html | 290 - .../function/arguments/index.html | 42 - .../global_objects/function/bind/index.html | 333 - .../global_objects/function/caller/index.html | 70 - .../function/displayname/index.html | 120 - .../global_objects/function/index.html | 238 - .../global_objects/function/length/index.html | 43 - .../function/tostring/index.html | 57 - .../reference/global_objects/index.html | 194 - .../global_objects/infinity/index.html | 36 - .../global_objects/isfinite/index.html | 57 - .../reference/global_objects/isnan/index.html | 54 - .../reference/global_objects/json/index.html | 148 - .../global_objects/math/abs/index.html | 55 - .../global_objects/math/acos/index.html | 60 - .../global_objects/math/asin/index.html | 59 - .../global_objects/math/atan/index.html | 52 - .../global_objects/math/atan2/index.html | 64 - .../global_objects/math/ceil/index.html | 50 - .../global_objects/math/cos/index.html | 53 - .../global_objects/math/e/index.html | 41 - .../global_objects/math/exp/index.html | 50 - .../global_objects/math/floor/index.html | 47 - .../reference/global_objects/math/index.html | 95 - .../global_objects/math/ln10/index.html | 43 - .../global_objects/math/ln2/index.html | 41 - .../global_objects/math/log/index.html | 55 - .../global_objects/math/log10e/index.html | 45 - .../global_objects/math/log2e/index.html | 43 - .../global_objects/math/max/index.html | 44 - .../global_objects/math/min/index.html | 45 - .../global_objects/math/pi/index.html | 41 - .../global_objects/math/pow/index.html | 50 - .../global_objects/math/random/index.html | 68 - .../global_objects/math/round/index.html | 51 - .../global_objects/math/sign/index.html | 119 - .../global_objects/math/sin/index.html | 52 - .../global_objects/math/sqrt/index.html | 47 - .../global_objects/math/sqrt1_2/index.html | 40 - .../global_objects/math/sqrt2/index.html | 42 - .../global_objects/math/tan/index.html | 54 - .../reference/global_objects/nan/index.html | 46 - .../global_objects/number/epsilon/index.html | 75 - .../global_objects/number/index.html | 112 - .../number/isinteger/index.html | 87 - .../global_objects/number/isnan/index.html | 109 - .../number/max_value/index.html | 36 - .../number/min_value/index.html | 40 - .../global_objects/number/nan/index.html | 49 - .../number/negative_infinity/index.html | 54 - .../number/positive_infinity/index.html | 58 - .../number/toexponential/index.html | 54 - .../global_objects/number/tofixed/index.html | 62 - .../number/tolocalestring/index.html | 181 - .../number/toprecision/index.html | 57 - .../global_objects/number/tostring/index.html | 60 - .../global_objects/object/assign/index.html | 308 - .../object/constructor/index.html | 50 - .../global_objects/object/freeze/index.html | 202 - .../getownpropertydescriptor/index.html | 122 - .../object/hasownproperty/index.html | 151 - .../global_objects/object/index.html | 213 - .../global_objects/object/proto/index.html | 194 - .../global_objects/object/seal/index.html | 166 - .../object/tolocalestring/index.html | 36 - .../global_objects/object/tostring/index.html | 99 - .../global_objects/object/valueof/index.html | 64 - .../global_objects/parsefloat/index.html | 69 - .../global_objects/parseint/index.html | 113 - .../global_objects/promise/index.html | 257 - .../reference/global_objects/proxy/index.html | 402 - .../proxy/proxy/apply/index.html | 118 - .../global_objects/proxy/proxy/index.html | 79 - .../global_objects/rangeerror/index.html | 163 - .../global_objects/regexp/exec/index.html | 145 - .../global_objects/regexp/global/index.html | 36 - .../regexp/ignorecase/index.html | 36 - .../global_objects/regexp/index.html | 384 - .../regexp/lastmatch/index.html | 55 - .../global_objects/regexp/source/index.html | 30 - .../global_objects/regexp/test/index.html | 54 - .../global_objects/regexp/tostring/index.html | 47 - .../global_objects/set/add/index.html | 135 - .../global_objects/set/clear/index.html | 125 - .../global_objects/set/delete/index.html | 103 - .../reference/global_objects/set/index.html | 487 - .../global_objects/string/anchor/index.html | 57 - .../global_objects/string/big/index.html | 44 - .../global_objects/string/bold/index.html | 46 - .../global_objects/string/charat/index.html | 69 - .../string/charcodeat/index.html | 43 - .../global_objects/string/concat/index.html | 45 - .../string/fontcolor/index.html | 51 - .../global_objects/string/fontsize/index.html | 49 - .../string/fromcharcode/index.html | 51 - .../global_objects/string/index.html | 195 - .../global_objects/string/italics/index.html | 46 - .../global_objects/string/link/index.html | 44 - .../global_objects/string/search/index.html | 50 - .../global_objects/string/slice/index.html | 52 - .../global_objects/string/small/index.html | 38 - .../global_objects/string/strike/index.html | 45 - .../global_objects/string/sub/index.html | 45 - .../global_objects/string/substr/index.html | 67 - .../string/substring/index.html | 91 - .../global_objects/string/sup/index.html | 46 - .../string/tolowercase/index.html | 41 - .../global_objects/string/tostring/index.html | 42 - .../string/touppercase/index.html | 39 - .../global_objects/string/valueof/index.html | 41 - .../global_objects/symbol/index.html | 228 - .../global_objects/syntaxerror/index.html | 101 - .../global_objects/undefined/index.html | 41 - files/pl/web/javascript/reference/index.html | 71 - .../reference/lexical_grammar/index.html | 52 - .../operators/comma_operator/index.html | 38 - .../operators/conditional_operator/index.html | 35 - .../reference/operators/delete/index.html | 75 - .../destructuring_assignment/index.html | 494 - .../reference/operators/function/index.html | 145 - .../operators/function_star_/index.html | 91 - .../reference/operators/grouping/index.html | 91 - .../reference/operators/in/index.html | 93 - .../javascript/reference/operators/index.html | 283 - .../reference/operators/new.target/index.html | 135 - .../reference/operators/new/index.html | 184 - .../reference/operators/null/index.html | 135 - .../nullish_coalescing_operator/index.html | 245 - .../operators/object_initializer/index.html | 388 - .../operators/operator_precedence/index.html | 337 - .../operators/property_accessors/index.html | 178 - .../operators/spread_syntax/index.html | 245 - .../reference/operators/super/index.html | 172 - .../reference/operators/typeof/index.html | 92 - .../reference/operators/void/index.html | 52 - .../reference/operators/yield/index.html | 169 - .../operators/yield_star_/index.html | 201 - .../statements/async_function/index.html | 265 - .../reference/statements/block/index.html | 161 - .../reference/statements/break/index.html | 63 - .../reference/statements/class/index.html | 114 - .../reference/statements/const/index.html | 50 - .../reference/statements/continue/index.html | 167 - .../reference/statements/debugger/index.html | 127 - .../statements/do...while/index.html | 49 - .../reference/statements/empty/index.html | 93 - .../reference/statements/export/index.html | 44 - .../reference/statements/for...in/index.html | 174 - .../reference/statements/for/index.html | 54 - .../reference/statements/function/index.html | 65 - .../statements/function_star_/index.html | 310 - .../reference/statements/if...else/index.html | 60 - .../reference/statements/import/index.html | 52 - .../reference/statements/index.html | 150 - .../reference/statements/label/index.html | 47 - .../reference/statements/return/index.html | 43 - .../reference/statements/switch/index.html | 286 - .../reference/statements/var/index.html | 57 - .../reference/statements/while/index.html | 57 - files/pl/web/javascript/shells/index.html | 42 - files/pl/web/mathml/index.html | 61 - files/pl/web/opensearch/index.html | 159 - files/pl/web/progressive_web_apps/index.html | 113 - .../certificate_transparency/index.html | 64 - files/pl/web/security/index.html | 25 - .../security/same-origin_policy/index.html | 278 - .../security/subresource_integrity/index.html | 164 - files/pl/web/svg/element/a/index.html | 149 - .../svg/element/animatetransform/index.html | 95 - files/pl/web/svg/element/circle/index.html | 100 - files/pl/web/svg/element/index.html | 252 - files/pl/web/svg/index.html | 93 - files/pl/web/svg/other_resources/index.html | 19 - files/pl/web/svg/tutorial/index.html | 25 - .../web/svg/tutorial/svg_and_css/index.html | 196 - .../svg_in_html_introduction/index.html | 78 - files/pl/web/tutorials/index.html | 154 - files/pl/web/xml/index.html | 17 - files/pl/web/xml/xml_introduction/index.html | 46 - files/pl/web/xpath/axes/index.html | 42 - .../pl/web/xpath/functions/boolean/index.html | 36 - .../pl/web/xpath/functions/ceiling/index.html | 34 - .../pl/web/xpath/functions/concat/index.html | 29 - .../web/xpath/functions/contains/index.html | 34 - files/pl/web/xpath/functions/count/index.html | 31 - .../pl/web/xpath/functions/current/index.html | 31 - .../web/xpath/functions/document/index.html | 43 - .../functions/element-available/index.html | 31 - files/pl/web/xpath/functions/false/index.html | 35 - files/pl/web/xpath/functions/floor/index.html | 31 - .../xpath/functions/format-number/index.html | 39 - .../functions/function-available/index.html | 30 - .../xpath/functions/generate-id/index.html | 37 - files/pl/web/xpath/functions/id/index.html | 34 - files/pl/web/xpath/functions/index.html | 56 - files/pl/web/xpath/functions/key/index.html | 37 - files/pl/web/xpath/functions/lang/index.html | 56 - files/pl/web/xpath/functions/last/index.html | 31 - .../web/xpath/functions/local-name/index.html | 34 - files/pl/web/xpath/functions/name/index.html | 33 - .../xpath/functions/namespace-uri/index.html | 35 - .../functions/normalize-space/index.html | 32 - files/pl/web/xpath/functions/not/index.html | 35 - .../pl/web/xpath/functions/number/index.html | 35 - .../web/xpath/functions/position/index.html | 51 - files/pl/web/xpath/functions/round/index.html | 34 - .../xpath/functions/starts-with/index.html | 34 - .../xpath/functions/string-length/index.html | 30 - .../pl/web/xpath/functions/string/index.html | 41 - .../functions/substring-after/index.html | 38 - .../functions/substring-before/index.html | 36 - .../web/xpath/functions/substring/index.html | 38 - files/pl/web/xpath/functions/sum/index.html | 34 - .../functions/system-property/index.html | 37 - .../web/xpath/functions/translate/index.html | 83 - files/pl/web/xpath/functions/true/index.html | 28 - .../functions/unparsed-entity-url/index.html | 30 - files/pl/web/xpath/index.html | 13 - .../web/xslt/element/apply-imports/index.html | 31 - .../xslt/element/apply-templates/index.html | 36 - .../web/xslt/element/attribute-set/index.html | 36 - .../pl/web/xslt/element/attribute/index.html | 35 - .../web/xslt/element/call-template/index.html | 33 - files/pl/web/xslt/element/choose/index.html | 36 - files/pl/web/xslt/element/comment/index.html | 32 - files/pl/web/xslt/element/copy-of/index.html | 33 - files/pl/web/xslt/element/copy/index.html | 33 - .../xslt/element/decimal-format/index.html | 74 - files/pl/web/xslt/element/element/index.html | 36 - files/pl/web/xslt/element/fallback/index.html | 33 - files/pl/web/xslt/element/for-each/index.html | 33 - files/pl/web/xslt/element/if/index.html | 34 - files/pl/web/xslt/element/import/index.html | 32 - files/pl/web/xslt/element/include/index.html | 32 - files/pl/web/xslt/element/index.html | 57 - files/pl/web/xslt/element/key/index.html | 37 - files/pl/web/xslt/element/message/index.html | 32 - .../xslt/element/namespace-alias/index.html | 34 - files/pl/web/xslt/element/number/index.html | 99 - .../pl/web/xslt/element/otherwise/index.html | 33 - files/pl/web/xslt/element/output/index.html | 64 - files/pl/web/xslt/element/param/index.html | 35 - .../xslt/element/preserve-space/index.html | 32 - .../element/processing-instruction/index.html | 34 - files/pl/web/xslt/element/sort/index.html | 50 - .../web/xslt/element/strip-space/index.html | 32 - .../pl/web/xslt/element/stylesheet/index.html | 34 - files/pl/web/xslt/element/template/index.html | 48 - files/pl/web/xslt/element/text/index.html | 35 - .../pl/web/xslt/element/transform/index.html | 18 - files/pl/web/xslt/element/value-of/index.html | 33 - files/pl/web/xslt/element/variable/index.html | 36 - files/pl/web/xslt/element/when/index.html | 34 - .../pl/web/xslt/element/with-param/index.html | 33 - files/pl/web/xslt/index.html | 17 - .../for_further_reading/index.html | 204 - .../transforming_xml_with_xslt/index.html | 148 - .../index.html | 244 - files/pl/webassembly/index.html | 164 - 2724 files changed, 341590 deletions(-) delete mode 100644 files/de/_redirects.txt delete mode 100644 files/de/_wikihistory.json delete mode 100644 files/de/games/index.html delete mode 100644 files/de/glossary/abstraction/index.html delete mode 100644 files/de/glossary/accessibility/index.html delete mode 100644 files/de/glossary/adobe_flash/index.html delete mode 100644 files/de/glossary/ajax/index.html delete mode 100644 files/de/glossary/algorithm/index.html delete mode 100644 files/de/glossary/api/index.html delete mode 100644 files/de/glossary/apple_safari/index.html delete mode 100644 files/de/glossary/argument/index.html delete mode 100644 files/de/glossary/aria/index.html delete mode 100644 files/de/glossary/arpa/index.html delete mode 100644 files/de/glossary/array/index.html delete mode 100644 files/de/glossary/ascii/index.html delete mode 100644 files/de/glossary/asynchronous/index.html delete mode 100644 files/de/glossary/atag/index.html delete mode 100644 files/de/glossary/attribute/index.html delete mode 100644 files/de/glossary/bandwidth/index.html delete mode 100644 files/de/glossary/block/css/index.html delete mode 100644 files/de/glossary/block/index.html delete mode 100644 files/de/glossary/block/scripting/index.html delete mode 100644 files/de/glossary/boolean/index.html delete mode 100644 files/de/glossary/bootstrap/index.html delete mode 100644 files/de/glossary/browser/index.html delete mode 100644 files/de/glossary/buffer/index.html delete mode 100644 files/de/glossary/cache/index.html delete mode 100644 files/de/glossary/caldav/index.html delete mode 100644 files/de/glossary/canvas/index.html delete mode 100644 files/de/glossary/card_sorting/index.html delete mode 100644 files/de/glossary/cdn/index.html delete mode 100644 files/de/glossary/character/index.html delete mode 100644 files/de/glossary/chrome/index.html delete mode 100644 files/de/glossary/class/index.html delete mode 100644 files/de/glossary/cms/index.html delete mode 100644 files/de/glossary/codec/index.html delete mode 100644 files/de/glossary/compile_time/index.html delete mode 100644 files/de/glossary/constructor/index.html delete mode 100644 files/de/glossary/cookie/index.html delete mode 100644 files/de/glossary/cors-safelisted_request_header/index.html delete mode 100644 files/de/glossary/cors/index.html delete mode 100644 files/de/glossary/crawler/index.html delete mode 100644 files/de/glossary/crlf/index.html delete mode 100644 files/de/glossary/css/index.html delete mode 100644 files/de/glossary/css_preprocessor/index.html delete mode 100644 files/de/glossary/data_structure/index.html delete mode 100644 files/de/glossary/denial_of_service/index.html delete mode 100644 files/de/glossary/dhtml/index.html delete mode 100644 files/de/glossary/dns/index.html delete mode 100644 files/de/glossary/doctype/index.html delete mode 100644 files/de/glossary/dom/index.html delete mode 100644 files/de/glossary/domain_name/index.html delete mode 100644 files/de/glossary/dos_attack/index.html delete mode 100644 files/de/glossary/ecma/index.html delete mode 100644 files/de/glossary/ecmascript/index.html delete mode 100644 files/de/glossary/element/index.html delete mode 100644 files/de/glossary/empty_element/index.html delete mode 100644 files/de/glossary/encapsulation/index.html delete mode 100644 files/de/glossary/falsy/index.html delete mode 100644 files/de/glossary/firefox_os/index.html delete mode 100644 files/de/glossary/firewall/index.html delete mode 100644 files/de/glossary/first-class_function/index.html delete mode 100644 files/de/glossary/flex/index.html delete mode 100644 files/de/glossary/flexbox/index.html delete mode 100644 files/de/glossary/forbidden_header_name/index.html delete mode 100644 files/de/glossary/ftp/index.html delete mode 100644 files/de/glossary/gif/index.html delete mode 100644 files/de/glossary/git/index.html delete mode 100644 files/de/glossary/gpu/index.html delete mode 100644 files/de/glossary/graceful_degradation/index.html delete mode 100644 files/de/glossary/grid/index.html delete mode 100644 files/de/glossary/gutters/index.html delete mode 100644 files/de/glossary/gzip_compression/index.html delete mode 100644 files/de/glossary/hoisting/index.html delete mode 100644 files/de/glossary/html/index.html delete mode 100644 files/de/glossary/html5/index.html delete mode 100644 files/de/glossary/http/index.html delete mode 100644 files/de/glossary/https/index.html delete mode 100644 files/de/glossary/hyperlink/index.html delete mode 100644 files/de/glossary/ide/index.html delete mode 100644 files/de/glossary/identifier/index.html delete mode 100644 files/de/glossary/ietf/index.html delete mode 100644 files/de/glossary/iife/index.html delete mode 100644 files/de/glossary/imap/index.html delete mode 100644 files/de/glossary/index.html delete mode 100644 files/de/glossary/indexeddb/index.html delete mode 100644 files/de/glossary/information_architecture/index.html delete mode 100644 files/de/glossary/internet/index.html delete mode 100644 files/de/glossary/iso/index.html delete mode 100644 files/de/glossary/jank/index.html delete mode 100644 files/de/glossary/javascript/index.html delete mode 100644 files/de/glossary/jpeg/index.html delete mode 100644 files/de/glossary/json/index.html delete mode 100644 files/de/glossary/local_scope/index.html delete mode 100644 files/de/glossary/local_variable/index.html delete mode 100644 files/de/glossary/localization/index.html delete mode 100644 files/de/glossary/middleware/index.html delete mode 100644 files/de/glossary/mime_type/index.html delete mode 100644 files/de/glossary/mixin/index.html delete mode 100644 files/de/glossary/mozilla_firefox/index.html delete mode 100644 files/de/glossary/namespace/index.html delete mode 100644 files/de/glossary/node.js/index.html delete mode 100644 files/de/glossary/null/index.html delete mode 100644 files/de/glossary/number/index.html delete mode 100644 files/de/glossary/object/index.html delete mode 100644 files/de/glossary/oop/index.html delete mode 100644 files/de/glossary/operand/index.html delete mode 100644 files/de/glossary/operator/index.html delete mode 100644 files/de/glossary/php/index.html delete mode 100644 files/de/glossary/png/index.html delete mode 100644 files/de/glossary/polyfill/index.html delete mode 100644 files/de/glossary/primitive/index.html delete mode 100644 files/de/glossary/progressive_enhancement/index.html delete mode 100644 files/de/glossary/protocol/index.html delete mode 100644 files/de/glossary/prototype-based_programming/index.html delete mode 100644 files/de/glossary/prototype/index.html delete mode 100644 files/de/glossary/regular_expression/index.html delete mode 100644 files/de/glossary/repo/index.html delete mode 100644 files/de/glossary/responsive_web_design/index.html delete mode 100644 files/de/glossary/rest/index.html delete mode 100644 files/de/glossary/rgb/index.html delete mode 100644 files/de/glossary/rss/index.html delete mode 100644 files/de/glossary/scope/index.html delete mode 100644 files/de/glossary/server/index.html delete mode 100644 files/de/glossary/sloppy_mode/index.html delete mode 100644 files/de/glossary/slug/index.html delete mode 100644 files/de/glossary/specification/index.html delete mode 100644 files/de/glossary/sql/index.html delete mode 100644 files/de/glossary/statement/index.html delete mode 100644 files/de/glossary/string/index.html delete mode 100644 files/de/glossary/svg/index.html delete mode 100644 files/de/glossary/tag/index.html delete mode 100644 files/de/glossary/tcp/index.html delete mode 100644 files/de/glossary/tls/index.html delete mode 100644 files/de/glossary/truthy/index.html delete mode 100644 files/de/glossary/type/index.html delete mode 100644 files/de/glossary/type_conversion/index.html delete mode 100644 files/de/glossary/ui/index.html delete mode 100644 files/de/glossary/undefined/index.html delete mode 100644 files/de/glossary/uri/index.html delete mode 100644 files/de/glossary/url/index.html delete mode 100644 files/de/glossary/user_agent/index.html delete mode 100644 files/de/glossary/ux/index.html delete mode 100644 files/de/glossary/validator/index.html delete mode 100644 files/de/glossary/value/index.html delete mode 100644 files/de/glossary/variable/index.html delete mode 100644 files/de/glossary/vendor_prefix/index.html delete mode 100644 files/de/glossary/viewport/index.html delete mode 100644 files/de/glossary/visual_viewport/index.html delete mode 100644 files/de/glossary/voip/index.html delete mode 100644 files/de/glossary/w3c/index.html delete mode 100644 files/de/glossary/wai/index.html delete mode 100644 files/de/glossary/webdav/index.html delete mode 100644 files/de/glossary/webm/index.html delete mode 100644 files/de/glossary/webp/index.html delete mode 100644 files/de/glossary/webrtc/index.html delete mode 100644 files/de/glossary/websockets/index.html delete mode 100644 files/de/glossary/wrapper/index.html delete mode 100644 files/de/glossary/xml/index.html delete mode 100644 files/de/learn/accessibility/accessibility_troubleshooting/index.html delete mode 100644 files/de/learn/accessibility/index.html delete mode 100644 files/de/learn/common_questions/index.html delete mode 100644 files/de/learn/common_questions/upload_files_to_a_web_server/index.html delete mode 100644 files/de/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/de/learn/css/building_blocks/index.html delete mode 100644 files/de/learn/css/building_blocks/organizing/index.html delete mode 100644 files/de/learn/css/building_blocks/selectors/index.html delete mode 100644 files/de/learn/css/css_layout/flexbox/index.html delete mode 100644 files/de/learn/css/css_layout/index.html delete mode 100644 files/de/learn/css/first_steps/how_css_is_structured/index.html delete mode 100644 files/de/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/de/learn/css/first_steps/index.html delete mode 100644 files/de/learn/css/index.html delete mode 100644 files/de/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/de/learn/css/styling_text/index.html delete mode 100644 files/de/learn/forms/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/html_basics/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/javascript_basics/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/de/learn/html/index.html delete mode 100644 files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html delete mode 100644 files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html delete mode 100644 files/de/learn/html/introduction_to_html/debugging_html/index.html delete mode 100644 files/de/learn/html/introduction_to_html/document_and_website_structure/index.html delete mode 100644 files/de/learn/html/introduction_to_html/getting_started/index.html delete mode 100644 files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html delete mode 100644 files/de/learn/html/introduction_to_html/index.html delete mode 100644 files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html delete mode 100644 files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html delete mode 100644 files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html delete mode 100644 files/de/learn/html/multimedia_and_embedding/index.html delete mode 100644 files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html delete mode 100644 files/de/learn/html/tables/index.html delete mode 100644 files/de/learn/index.html delete mode 100644 files/de/learn/javascript/building_blocks/index.html delete mode 100644 files/de/learn/javascript/first_steps/a_first_splash/index.html delete mode 100644 files/de/learn/javascript/first_steps/index.html delete mode 100644 files/de/learn/javascript/first_steps/silly_story_generator/index.html delete mode 100644 files/de/learn/javascript/first_steps/what_is_javascript/index.html delete mode 100644 files/de/learn/javascript/index.html delete mode 100644 files/de/learn/javascript/objects/basics/index.html delete mode 100644 files/de/learn/javascript/objects/classes_in_javascript/index.html delete mode 100644 files/de/learn/javascript/objects/index.html delete mode 100644 files/de/learn/javascript/objects/json/index.html delete mode 100644 files/de/learn/javascript/objects/object_prototypes/index.html delete mode 100644 files/de/learn/server-side/express_nodejs/index.html delete mode 100644 files/de/learn/server-side/first_steps/index.html delete mode 100644 files/de/learn/server-side/index.html delete mode 100644 files/de/learn/tools_and_testing/index.html delete mode 100644 files/de/mdn/at_ten/history_of_mdn/index.html delete mode 100644 files/de/mdn/at_ten/index.html delete mode 100644 files/de/mdn/community/contributing/getting_started/index.html delete mode 100644 files/de/mdn/community/index.html delete mode 100644 files/de/mdn/contribute/howto/index.html delete mode 100644 files/de/mdn/contribute/index.html delete mode 100644 files/de/mdn/index.html delete mode 100644 files/de/mdn/tools/index.html delete mode 100644 files/de/mdn/tools/kumascript/troubleshooting/index.html delete mode 100644 files/de/mdn/writing_guidelines/howto/tag/index.html delete mode 100644 files/de/mdn/writing_guidelines/index.html delete mode 100644 files/de/mdn/writing_guidelines/page_structures/index.html delete mode 100644 files/de/mdn/writing_guidelines/page_structures/live_samples/index.html delete mode 100644 files/de/mdn/yari/index.html delete mode 100644 files/de/mozilla/add-ons/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/api/commands/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/api/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/examples/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html delete mode 100644 files/de/mozilla/firefox/index.html delete mode 100644 files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html delete mode 100644 files/de/mozilla/firefox/releases/1.5/index.html delete mode 100644 files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html delete mode 100644 files/de/mozilla/firefox/releases/27/index.html delete mode 100644 files/de/mozilla/firefox/releases/3.5/index.html delete mode 100644 files/de/mozilla/firefox/releases/3/index.html delete mode 100644 files/de/mozilla/firefox/releases/3/updating_extensions/index.html delete mode 100644 files/de/mozilla/firefox/releases/3/updating_web_applications/index.html delete mode 100644 files/de/mozilla/firefox/releases/34/index.html delete mode 100644 files/de/mozilla/firefox/releases/5/index.html delete mode 100644 files/de/mozilla/firefox/releases/56/index.html delete mode 100644 files/de/mozilla/firefox/releases/57/index.html delete mode 100644 files/de/mozilla/firefox/releases/58/index.html delete mode 100644 files/de/mozilla/firefox/releases/index.html delete mode 100644 files/de/mozilla/index.html delete mode 100644 files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html delete mode 100644 files/de/web/accessibility/aria/aria_live_regions/index.html delete mode 100644 files/de/web/accessibility/aria/aria_techniques/index.html delete mode 100644 files/de/web/accessibility/aria/index.html delete mode 100644 files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html delete mode 100644 files/de/web/api/aescbcparams/index.html delete mode 100644 files/de/web/api/audiodestinationnode/index.html delete mode 100644 files/de/web/api/audionode/index.html delete mode 100644 files/de/web/api/audiotrack/index.html delete mode 100644 files/de/web/api/baseaudiocontext/decodeaudiodata/index.html delete mode 100644 files/de/web/api/battery_status_api/index.html delete mode 100644 files/de/web/api/blob/index.html delete mode 100644 files/de/web/api/blob/size/index.html delete mode 100644 files/de/web/api/btoa/index.html delete mode 100644 files/de/web/api/cache/add/index.html delete mode 100644 files/de/web/api/cache/addall/index.html delete mode 100644 files/de/web/api/cache/index.html delete mode 100644 files/de/web/api/canvas_api/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/advanced_animations/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/basic_animations/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/basic_usage/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/drawing_text/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html delete mode 100644 files/de/web/api/canvas_api/tutorial/using_images/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/canvas/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/fillrect/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/scale/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/textalign/index.html delete mode 100644 files/de/web/api/console/assert/index.html delete mode 100644 files/de/web/api/console/clear/index.html delete mode 100644 files/de/web/api/console/count/index.html delete mode 100644 files/de/web/api/console/debug/index.html delete mode 100644 files/de/web/api/console/dir/index.html delete mode 100644 files/de/web/api/console/index.html delete mode 100644 files/de/web/api/console/log/index.html delete mode 100644 files/de/web/api/console/table/index.html delete mode 100644 files/de/web/api/console/time/index.html delete mode 100644 files/de/web/api/console/timeend/index.html delete mode 100644 files/de/web/api/console/warn/index.html delete mode 100644 files/de/web/api/crypto/index.html delete mode 100644 files/de/web/api/css/escape/index.html delete mode 100644 files/de/web/api/css/index.html delete mode 100644 files/de/web/api/css_painting_api/guide/index.html delete mode 100644 files/de/web/api/cssmediarule/index.html delete mode 100644 files/de/web/api/csspagerule/index.html delete mode 100644 files/de/web/api/cssrule/csstext/index.html delete mode 100644 files/de/web/api/cssrule/index.html delete mode 100644 files/de/web/api/customelementregistry/define/index.html delete mode 100644 files/de/web/api/customelementregistry/index.html delete mode 100644 files/de/web/api/dedicatedworkerglobalscope/index.html delete mode 100644 files/de/web/api/dedicatedworkerglobalscope/message_event/index.html delete mode 100644 files/de/web/api/document/adoptnode/index.html delete mode 100644 files/de/web/api/document/alinkcolor/index.html delete mode 100644 files/de/web/api/document/body/index.html delete mode 100644 files/de/web/api/document/createattribute/index.html delete mode 100644 files/de/web/api/document/createdocumentfragment/index.html delete mode 100644 files/de/web/api/document/createelement/index.html delete mode 100644 files/de/web/api/document/createelementns/index.html delete mode 100644 files/de/web/api/document/createtextnode/index.html delete mode 100644 files/de/web/api/document/createtreewalker/index.html delete mode 100644 files/de/web/api/document/dir/index.html delete mode 100644 files/de/web/api/document/document/index.html delete mode 100644 files/de/web/api/document/documentelement/index.html delete mode 100644 files/de/web/api/document/fullscreenchange_event/index.html delete mode 100644 files/de/web/api/document/getelementbyid/index.html delete mode 100644 files/de/web/api/document/getelementsbyclassname/index.html delete mode 100644 files/de/web/api/document/head/index.html delete mode 100644 files/de/web/api/document/importnode/index.html delete mode 100644 files/de/web/api/document/index.html delete mode 100644 files/de/web/api/document/queryselector/index.html delete mode 100644 files/de/web/api/document/queryselectorall/index.html delete mode 100644 files/de/web/api/document/readystate/index.html delete mode 100644 files/de/web/api/document/readystatechange_event/index.html delete mode 100644 files/de/web/api/document/referrer/index.html delete mode 100644 files/de/web/api/document/registerelement/index.html delete mode 100644 files/de/web/api/document/title/index.html delete mode 100644 files/de/web/api/document/url/index.html delete mode 100644 files/de/web/api/document/width/index.html delete mode 100644 files/de/web/api/document/write/index.html delete mode 100644 files/de/web/api/document/writeln/index.html delete mode 100644 files/de/web/api/document_object_model/index.html delete mode 100644 files/de/web/api/documentfragment/index.html delete mode 100644 files/de/web/api/domerror/index.html delete mode 100644 files/de/web/api/domparser/index.html delete mode 100644 files/de/web/api/domtokenlist/add/index.html delete mode 100644 files/de/web/api/domtokenlist/index.html delete mode 100644 files/de/web/api/dragevent/index.html delete mode 100644 files/de/web/api/element/classlist/index.html delete mode 100644 files/de/web/api/element/classname/index.html delete mode 100644 files/de/web/api/element/click_event/index.html delete mode 100644 files/de/web/api/element/getboundingclientrect/index.html delete mode 100644 files/de/web/api/element/hasattribute/index.html delete mode 100644 files/de/web/api/element/index.html delete mode 100644 files/de/web/api/element/innerhtml/index.html delete mode 100644 files/de/web/api/element/insertadjacenthtml/index.html delete mode 100644 files/de/web/api/element/queryselector/index.html delete mode 100644 files/de/web/api/element/queryselectorall/index.html delete mode 100644 files/de/web/api/element/removeattribute/index.html delete mode 100644 files/de/web/api/element/requestfullscreen/index.html delete mode 100644 files/de/web/api/element/scrollintoview/index.html delete mode 100644 files/de/web/api/element/scrollleft/index.html delete mode 100644 files/de/web/api/element/scrollwidth/index.html delete mode 100644 files/de/web/api/element/setattribute/index.html delete mode 100644 files/de/web/api/event/bubbles/index.html delete mode 100644 files/de/web/api/event/event/index.html delete mode 100644 files/de/web/api/event/index.html delete mode 100644 files/de/web/api/eventsource/index.html delete mode 100644 files/de/web/api/eventtarget/addeventlistener/index.html delete mode 100644 files/de/web/api/federatedcredential/index.html delete mode 100644 files/de/web/api/fetch_api/index.html delete mode 100644 files/de/web/api/file/index.html delete mode 100644 files/de/web/api/file/name/index.html delete mode 100644 files/de/web/api/file/type/index.html delete mode 100644 files/de/web/api/file_api/using_files_from_web_applications/index.html delete mode 100644 files/de/web/api/filereader/index.html delete mode 100644 files/de/web/api/filereader/load_event/index.html delete mode 100644 files/de/web/api/formdata/formdata/index.html delete mode 100644 files/de/web/api/formdata/get/index.html delete mode 100644 files/de/web/api/formdata/getall/index.html delete mode 100644 files/de/web/api/formdata/index.html delete mode 100644 files/de/web/api/fullscreen_api/index.html delete mode 100644 files/de/web/api/gainnode/index.html delete mode 100644 files/de/web/api/gamepad_api/index.html delete mode 100644 files/de/web/api/geolocation/getcurrentposition/index.html delete mode 100644 files/de/web/api/geolocation/index.html delete mode 100644 files/de/web/api/geolocation_api/index.html delete mode 100644 files/de/web/api/globaleventhandlers/index.html delete mode 100644 files/de/web/api/history_api/index.html delete mode 100644 files/de/web/api/html_drag_and_drop_api/index.html delete mode 100644 files/de/web/api/htmlcanvaselement/index.html delete mode 100644 files/de/web/api/htmlcanvaselement/todataurl/index.html delete mode 100644 files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html delete mode 100644 files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html delete mode 100644 files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html delete mode 100644 files/de/web/api/htmlcollection/index.html delete mode 100644 files/de/web/api/htmlelement/change_event/index.html delete mode 100644 files/de/web/api/htmlelement/innertext/index.html delete mode 100644 files/de/web/api/htmlformelement/elements/index.html delete mode 100644 files/de/web/api/htmlformelement/index.html delete mode 100644 files/de/web/api/htmlformelement/submit_event/index.html delete mode 100644 files/de/web/api/htmlheadelement/index.html delete mode 100644 files/de/web/api/htmlinputelement/select/index.html delete mode 100644 files/de/web/api/htmlslotelement/assignednodes/index.html delete mode 100644 files/de/web/api/htmlslotelement/index.html delete mode 100644 files/de/web/api/htmltableelement/createcaption/index.html delete mode 100644 files/de/web/api/htmltableelement/index.html delete mode 100644 files/de/web/api/htmltableelement/insertrow/index.html delete mode 100644 files/de/web/api/htmlunknownelement/index.html delete mode 100644 files/de/web/api/index.html delete mode 100644 files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html delete mode 100644 files/de/web/api/indexeddb_api/index.html delete mode 100644 files/de/web/api/indexeddb_api/using_indexeddb/index.html delete mode 100644 files/de/web/api/keyboardevent/altkey/index.html delete mode 100644 files/de/web/api/keyboardevent/getmodifierstate/index.html delete mode 100644 files/de/web/api/keyboardevent/index.html delete mode 100644 files/de/web/api/keyboardevent/keycode/index.html delete mode 100644 files/de/web/api/messageevent/index.html delete mode 100644 files/de/web/api/mouseevent/index.html delete mode 100644 files/de/web/api/mutationobserver/index.html delete mode 100644 files/de/web/api/navigator/index.html delete mode 100644 files/de/web/api/navigator/registerprotocolhandler/index.html delete mode 100644 files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html delete mode 100644 files/de/web/api/navigator/sendbeacon/index.html delete mode 100644 files/de/web/api/navigator/vibrate/index.html delete mode 100644 files/de/web/api/node/appendchild/index.html delete mode 100644 files/de/web/api/node/childnodes/index.html delete mode 100644 files/de/web/api/node/clonenode/index.html delete mode 100644 files/de/web/api/node/firstchild/index.html delete mode 100644 files/de/web/api/node/haschildnodes/index.html delete mode 100644 files/de/web/api/node/lastchild/index.html delete mode 100644 files/de/web/api/node/nextsibling/index.html delete mode 100644 files/de/web/api/node/nodevalue/index.html delete mode 100644 files/de/web/api/node/normalize/index.html delete mode 100644 files/de/web/api/node/parentnode/index.html delete mode 100644 files/de/web/api/node/previoussibling/index.html delete mode 100644 files/de/web/api/node/removechild/index.html delete mode 100644 files/de/web/api/node/replacechild/index.html delete mode 100644 files/de/web/api/node/textcontent/index.html delete mode 100644 files/de/web/api/notification/index.html delete mode 100644 files/de/web/api/notification/permission/index.html delete mode 100644 files/de/web/api/page_visibility_api/index.html delete mode 100644 files/de/web/api/performance/index.html delete mode 100644 files/de/web/api/performance/now/index.html delete mode 100644 files/de/web/api/performance_property/index.html delete mode 100644 files/de/web/api/push_api/index.html delete mode 100644 files/de/web/api/pushmanager/index.html delete mode 100644 files/de/web/api/pushmanager/subscribe/index.html delete mode 100644 files/de/web/api/range/index.html delete mode 100644 files/de/web/api/range/range/index.html delete mode 100644 files/de/web/api/readablestream/index.html delete mode 100644 files/de/web/api/response/index.html delete mode 100644 files/de/web/api/response/response/index.html delete mode 100644 files/de/web/api/rtcicecandidate/index.html delete mode 100644 files/de/web/api/rtcrtptransceiver/direction/index.html delete mode 100644 files/de/web/api/rtcrtptransceiver/index.html delete mode 100644 files/de/web/api/service_worker_api/index.html delete mode 100644 files/de/web/api/service_worker_api/using_service_workers/index.html delete mode 100644 files/de/web/api/serviceworker/index.html delete mode 100644 files/de/web/api/serviceworkercontainer/index.html delete mode 100644 files/de/web/api/serviceworkercontainer/register/index.html delete mode 100644 files/de/web/api/settimeout/index.html delete mode 100644 files/de/web/api/sharedworker/index.html delete mode 100644 files/de/web/api/speechsynthesis/index.html delete mode 100644 files/de/web/api/storage/clear/index.html delete mode 100644 files/de/web/api/storage/getitem/index.html delete mode 100644 files/de/web/api/storage/index.html delete mode 100644 files/de/web/api/storage/key/index.html delete mode 100644 files/de/web/api/storage/length/index.html delete mode 100644 files/de/web/api/storage/removeitem/index.html delete mode 100644 files/de/web/api/storage/setitem/index.html delete mode 100644 files/de/web/api/transferable/index.html delete mode 100644 files/de/web/api/url/createobjecturl/index.html delete mode 100644 files/de/web/api/url/index.html delete mode 100644 files/de/web/api/url/protocol/index.html delete mode 100644 files/de/web/api/urlsearchparams/index.html delete mode 100644 files/de/web/api/web_animations_api/index.html delete mode 100644 files/de/web/api/web_storage_api/index.html delete mode 100644 files/de/web/api/web_workers_api/index.html delete mode 100644 files/de/web/api/webgl_api/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html delete mode 100644 files/de/web/api/webglactiveinfo/index.html delete mode 100644 files/de/web/api/webglprogram/index.html delete mode 100644 files/de/web/api/webglrenderingcontext/canvas/index.html delete mode 100644 files/de/web/api/webglrenderingcontext/getactiveattrib/index.html delete mode 100644 files/de/web/api/webglrenderingcontext/getattriblocation/index.html delete mode 100644 files/de/web/api/webglrenderingcontext/index.html delete mode 100644 files/de/web/api/websocket/binarytype/index.html delete mode 100644 files/de/web/api/websocket/close/index.html delete mode 100644 files/de/web/api/websocket/close_event/index.html delete mode 100644 files/de/web/api/websocket/extensions/index.html delete mode 100644 files/de/web/api/websocket/index.html delete mode 100644 files/de/web/api/websocket/protocol/index.html delete mode 100644 files/de/web/api/websocket/readystate/index.html delete mode 100644 files/de/web/api/websocket/url/index.html delete mode 100644 files/de/web/api/websockets_api/index.html delete mode 100644 files/de/web/api/websockets_api/writing_websocket_servers/index.html delete mode 100644 files/de/web/api/window/afterprint_event/index.html delete mode 100644 files/de/web/api/window/alert/index.html delete mode 100644 files/de/web/api/window/applicationcache/index.html delete mode 100644 files/de/web/api/window/cancelanimationframe/index.html delete mode 100644 files/de/web/api/window/close/index.html delete mode 100644 files/de/web/api/window/confirm/index.html delete mode 100644 files/de/web/api/window/console/index.html delete mode 100644 files/de/web/api/window/devicemotion_event/index.html delete mode 100644 files/de/web/api/window/domcontentloaded_event/index.html delete mode 100644 files/de/web/api/window/dump/index.html delete mode 100644 files/de/web/api/window/hashchange_event/index.html delete mode 100644 files/de/web/api/window/history/index.html delete mode 100644 files/de/web/api/window/length/index.html delete mode 100644 files/de/web/api/window/load_event/index.html delete mode 100644 files/de/web/api/window/localstorage/index.html delete mode 100644 files/de/web/api/window/name/index.html delete mode 100644 files/de/web/api/window/navigator/index.html delete mode 100644 files/de/web/api/window/opendialog/index.html delete mode 100644 files/de/web/api/window/opener/index.html delete mode 100644 files/de/web/api/window/popstate_event/index.html delete mode 100644 files/de/web/api/window/print/index.html delete mode 100644 files/de/web/api/window/prompt/index.html delete mode 100644 files/de/web/api/window/resize_event/index.html delete mode 100644 files/de/web/api/window/screenx/index.html delete mode 100644 files/de/web/api/window/scroll/index.html delete mode 100644 files/de/web/api/window/scrollto/index.html delete mode 100644 files/de/web/api/window/sessionstorage/index.html delete mode 100644 files/de/web/api/window/stop/index.html delete mode 100644 files/de/web/api/windoweventhandlers/index.html delete mode 100644 files/de/web/api/windoworworkerglobalscope/index.html delete mode 100644 files/de/web/api/worker/index.html delete mode 100644 files/de/web/api/xmlhttprequest/index.html delete mode 100644 files/de/web/css/-moz-float-edge/index.html delete mode 100644 files/de/web/css/-moz-force-broken-image-icon/index.html delete mode 100644 files/de/web/css/-moz-image-rect/index.html delete mode 100644 files/de/web/css/-moz-image-region/index.html delete mode 100644 files/de/web/css/-moz-orient/index.html delete mode 100644 files/de/web/css/-moz-outline-radius-bottomleft/index.html delete mode 100644 files/de/web/css/-moz-outline-radius-bottomright/index.html delete mode 100644 files/de/web/css/-moz-outline-radius-topleft/index.html delete mode 100644 files/de/web/css/-moz-outline-radius-topright/index.html delete mode 100644 files/de/web/css/-moz-outline-radius/index.html delete mode 100644 files/de/web/css/-moz-user-focus/index.html delete mode 100644 files/de/web/css/-moz-user-input/index.html delete mode 100644 files/de/web/css/-webkit-box-reflect/index.html delete mode 100644 files/de/web/css/-webkit-mask-position-x/index.html delete mode 100644 files/de/web/css/-webkit-mask-position-y/index.html delete mode 100644 files/de/web/css/-webkit-mask-repeat-x/index.html delete mode 100644 files/de/web/css/-webkit-mask-repeat-y/index.html delete mode 100644 files/de/web/css/-webkit-overflow-scrolling/index.html delete mode 100644 files/de/web/css/-webkit-tap-highlight-color/index.html delete mode 100644 files/de/web/css/-webkit-text-fill-color/index.html delete mode 100644 files/de/web/css/-webkit-text-stroke-color/index.html delete mode 100644 files/de/web/css/-webkit-text-stroke-width/index.html delete mode 100644 files/de/web/css/-webkit-text-stroke/index.html delete mode 100644 files/de/web/css/-webkit-touch-callout/index.html delete mode 100644 files/de/web/css/@charset/index.html delete mode 100644 files/de/web/css/@document/index.html delete mode 100644 files/de/web/css/@import/index.html delete mode 100644 files/de/web/css/@keyframes/index.html delete mode 100644 files/de/web/css/@media/any-pointer/index.html delete mode 100644 files/de/web/css/@media/aural/index.html delete mode 100644 files/de/web/css/@media/index.html delete mode 100644 files/de/web/css/@media/pointer/index.html delete mode 100644 files/de/web/css/@media/prefers-reduced-motion/index.html delete mode 100644 files/de/web/css/@media/width/index.html delete mode 100644 files/de/web/css/@page/index.html delete mode 100644 files/de/web/css/@viewport/index.html delete mode 100644 files/de/web/css/_colon_-moz-broken/index.html delete mode 100644 files/de/web/css/_colon_-moz-drag-over/index.html delete mode 100644 files/de/web/css/_colon_-moz-first-node/index.html delete mode 100644 files/de/web/css/_colon_-moz-focusring/index.html delete mode 100644 files/de/web/css/_colon_-moz-handler-blocked/index.html delete mode 100644 files/de/web/css/_colon_-moz-handler-crashed/index.html delete mode 100644 files/de/web/css/_colon_-moz-handler-disabled/index.html delete mode 100644 files/de/web/css/_colon_-moz-last-node/index.html delete mode 100644 files/de/web/css/_colon_-moz-list-bullet/index.html delete mode 100644 files/de/web/css/_colon_-moz-list-number/index.html delete mode 100644 files/de/web/css/_colon_-moz-loading/index.html delete mode 100644 files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html delete mode 100644 files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html delete mode 100644 files/de/web/css/_colon_-moz-only-whitespace/index.html delete mode 100644 files/de/web/css/_colon_-moz-submit-invalid/index.html delete mode 100644 files/de/web/css/_colon_-moz-suppressed/index.html delete mode 100644 files/de/web/css/_colon_-moz-user-disabled/index.html delete mode 100644 files/de/web/css/_colon_-moz-window-inactive/index.html delete mode 100644 files/de/web/css/_colon_active/index.html delete mode 100644 files/de/web/css/_colon_autofill/index.html delete mode 100644 files/de/web/css/_colon_default/index.html delete mode 100644 files/de/web/css/_colon_dir/index.html delete mode 100644 files/de/web/css/_colon_disabled/index.html delete mode 100644 files/de/web/css/_colon_empty/index.html delete mode 100644 files/de/web/css/_colon_enabled/index.html delete mode 100644 files/de/web/css/_colon_first-child/index.html delete mode 100644 files/de/web/css/_colon_first-of-type/index.html delete mode 100644 files/de/web/css/_colon_first/index.html delete mode 100644 files/de/web/css/_colon_focus/index.html delete mode 100644 files/de/web/css/_colon_fullscreen/index.html delete mode 100644 files/de/web/css/_colon_hover/index.html delete mode 100644 files/de/web/css/_colon_in-range/index.html delete mode 100644 files/de/web/css/_colon_indeterminate/index.html delete mode 100644 files/de/web/css/_colon_invalid/index.html delete mode 100644 files/de/web/css/_colon_lang/index.html delete mode 100644 files/de/web/css/_colon_last-child/index.html delete mode 100644 files/de/web/css/_colon_last-of-type/index.html delete mode 100644 files/de/web/css/_colon_link/index.html delete mode 100644 files/de/web/css/_colon_not/index.html delete mode 100644 files/de/web/css/_colon_nth-child/index.html delete mode 100644 files/de/web/css/_colon_only-child/index.html delete mode 100644 files/de/web/css/_colon_optional/index.html delete mode 100644 files/de/web/css/_colon_out-of-range/index.html delete mode 100644 files/de/web/css/_colon_placeholder-shown/index.html delete mode 100644 files/de/web/css/_colon_required/index.html delete mode 100644 files/de/web/css/_colon_root/index.html delete mode 100644 files/de/web/css/_colon_user-invalid/index.html delete mode 100644 files/de/web/css/_colon_visited/index.html delete mode 100644 files/de/web/css/_doublecolon_-moz-page-sequence/index.html delete mode 100644 files/de/web/css/_doublecolon_-moz-page/index.html delete mode 100644 files/de/web/css/_doublecolon_-moz-progress-bar/index.html delete mode 100644 files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html delete mode 100644 files/de/web/css/_doublecolon_after/index.html delete mode 100644 files/de/web/css/_doublecolon_backdrop/index.html delete mode 100644 files/de/web/css/_doublecolon_before/index.html delete mode 100644 files/de/web/css/_doublecolon_marker/index.html delete mode 100644 files/de/web/css/_doublecolon_selection/index.html delete mode 100644 files/de/web/css/actual_value/index.html delete mode 100644 files/de/web/css/adjacent_sibling_combinator/index.html delete mode 100644 files/de/web/css/align-content/index.html delete mode 100644 files/de/web/css/align-items/index.html delete mode 100644 files/de/web/css/align-self/index.html delete mode 100644 files/de/web/css/all/index.html delete mode 100644 files/de/web/css/alternative_style_sheets/index.html delete mode 100644 files/de/web/css/angle-percentage/index.html delete mode 100644 files/de/web/css/angle/index.html delete mode 100644 files/de/web/css/animation-delay/index.html delete mode 100644 files/de/web/css/animation-direction/index.html delete mode 100644 files/de/web/css/animation-duration/index.html delete mode 100644 files/de/web/css/animation-fill-mode/index.html delete mode 100644 files/de/web/css/animation-iteration-count/index.html delete mode 100644 files/de/web/css/animation-name/index.html delete mode 100644 files/de/web/css/animation-play-state/index.html delete mode 100644 files/de/web/css/animation-timing-function/index.html delete mode 100644 files/de/web/css/animation/index.html delete mode 100644 files/de/web/css/appearance/index.html delete mode 100644 files/de/web/css/at-rule/index.html delete mode 100644 files/de/web/css/attr/index.html delete mode 100644 files/de/web/css/attribute_selectors/index.html delete mode 100644 files/de/web/css/backdrop-filter/index.html delete mode 100644 files/de/web/css/backface-visibility/index.html delete mode 100644 files/de/web/css/background-attachment/index.html delete mode 100644 files/de/web/css/background-blend-mode/index.html delete mode 100644 files/de/web/css/background-clip/index.html delete mode 100644 files/de/web/css/background-color/index.html delete mode 100644 files/de/web/css/background-image/index.html delete mode 100644 files/de/web/css/background-origin/index.html delete mode 100644 files/de/web/css/background-position/index.html delete mode 100644 files/de/web/css/background-repeat/index.html delete mode 100644 files/de/web/css/background-size/index.html delete mode 100644 files/de/web/css/background/index.html delete mode 100644 files/de/web/css/basic-shape/index.html delete mode 100644 files/de/web/css/border-bottom-color/index.html delete mode 100644 files/de/web/css/border-bottom-left-radius/index.html delete mode 100644 files/de/web/css/border-bottom-right-radius/index.html delete mode 100644 files/de/web/css/border-bottom-style/index.html delete mode 100644 files/de/web/css/border-bottom-width/index.html delete mode 100644 files/de/web/css/border-bottom/index.html delete mode 100644 files/de/web/css/border-collapse/index.html delete mode 100644 files/de/web/css/border-color/index.html delete mode 100644 files/de/web/css/border-image-outset/index.html delete mode 100644 files/de/web/css/border-image-repeat/index.html delete mode 100644 files/de/web/css/border-image-slice/index.html delete mode 100644 files/de/web/css/border-image-source/index.html delete mode 100644 files/de/web/css/border-image-width/index.html delete mode 100644 files/de/web/css/border-image/index.html delete mode 100644 files/de/web/css/border-left-color/index.html delete mode 100644 files/de/web/css/border-left-style/index.html delete mode 100644 files/de/web/css/border-left-width/index.html delete mode 100644 files/de/web/css/border-left/index.html delete mode 100644 files/de/web/css/border-radius/index.html delete mode 100644 files/de/web/css/border-right-color/index.html delete mode 100644 files/de/web/css/border-right-style/index.html delete mode 100644 files/de/web/css/border-right-width/index.html delete mode 100644 files/de/web/css/border-right/index.html delete mode 100644 files/de/web/css/border-spacing/index.html delete mode 100644 files/de/web/css/border-style/index.html delete mode 100644 files/de/web/css/border-top-color/index.html delete mode 100644 files/de/web/css/border-top-left-radius/index.html delete mode 100644 files/de/web/css/border-top-right-radius/index.html delete mode 100644 files/de/web/css/border-top-style/index.html delete mode 100644 files/de/web/css/border-top-width/index.html delete mode 100644 files/de/web/css/border-top/index.html delete mode 100644 files/de/web/css/border-width/index.html delete mode 100644 files/de/web/css/border/index.html delete mode 100644 files/de/web/css/bottom/index.html delete mode 100644 files/de/web/css/box-flex/index.html delete mode 100644 files/de/web/css/box-ordinal-group/index.html delete mode 100644 files/de/web/css/box-pack/index.html delete mode 100644 files/de/web/css/box-shadow/index.html delete mode 100644 files/de/web/css/box-sizing/index.html delete mode 100644 files/de/web/css/break-after/index.html delete mode 100644 files/de/web/css/break-inside/index.html delete mode 100644 files/de/web/css/calc/index.html delete mode 100644 files/de/web/css/caption-side/index.html delete mode 100644 files/de/web/css/child_combinator/index.html delete mode 100644 files/de/web/css/class_selectors/index.html delete mode 100644 files/de/web/css/clear/index.html delete mode 100644 files/de/web/css/clip-path/index.html delete mode 100644 files/de/web/css/clip/index.html delete mode 100644 files/de/web/css/color/index.html delete mode 100644 files/de/web/css/color_value/index.html delete mode 100644 files/de/web/css/column-count/index.html delete mode 100644 files/de/web/css/column-fill/index.html delete mode 100644 files/de/web/css/column-gap/index.html delete mode 100644 files/de/web/css/column-rule-color/index.html delete mode 100644 files/de/web/css/column-rule-style/index.html delete mode 100644 files/de/web/css/column-rule-width/index.html delete mode 100644 files/de/web/css/column-rule/index.html delete mode 100644 files/de/web/css/column-span/index.html delete mode 100644 files/de/web/css/column-width/index.html delete mode 100644 files/de/web/css/columns/index.html delete mode 100644 files/de/web/css/compositing_and_blending/index.html delete mode 100644 files/de/web/css/computed_value/index.html delete mode 100644 files/de/web/css/content/index.html delete mode 100644 files/de/web/css/counter-increment/index.html delete mode 100644 files/de/web/css/counter-reset/index.html delete mode 100644 files/de/web/css/css_animations/index.html delete mode 100644 files/de/web/css/css_animations/using_css_animations/index.html delete mode 100644 files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html delete mode 100644 files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html delete mode 100644 files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html delete mode 100644 files/de/web/css/css_backgrounds_and_borders/index.html delete mode 100644 files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html delete mode 100644 files/de/web/css/css_basic_user_interface/index.html delete mode 100644 files/de/web/css/css_box_model/index.html delete mode 100644 files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/de/web/css/css_box_model/mastering_margin_collapsing/index.html delete mode 100644 files/de/web/css/css_charsets/index.html delete mode 100644 files/de/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/de/web/css/css_colors/index.html delete mode 100644 files/de/web/css/css_columns/index.html delete mode 100644 files/de/web/css/css_columns/using_multi-column_layouts/index.html delete mode 100644 files/de/web/css/css_conditional_rules/index.html delete mode 100644 files/de/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/de/web/css/css_device_adaptation/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html delete mode 100644 files/de/web/css/css_fonts/index.html delete mode 100644 files/de/web/css/css_functions/index.html delete mode 100644 files/de/web/css/css_generated_content/index.html delete mode 100644 files/de/web/css/css_grid_layout/index.html delete mode 100644 files/de/web/css/css_images/implementing_image_sprites_in_css/index.html delete mode 100644 files/de/web/css/css_images/index.html delete mode 100644 files/de/web/css/css_images/using_css_gradients/index.html delete mode 100644 files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html delete mode 100644 files/de/web/css/css_lists_and_counters/index.html delete mode 100644 files/de/web/css/css_logical_properties/index.html delete mode 100644 files/de/web/css/css_masking/index.html delete mode 100644 files/de/web/css/css_motion_path/index.html delete mode 100644 files/de/web/css/css_namespaces/index.html delete mode 100644 files/de/web/css/css_positioning/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html delete mode 100644 files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/de/web/css/css_ruby/index.html delete mode 100644 files/de/web/css/css_selectors/index.html delete mode 100644 files/de/web/css/css_shapes/index.html delete mode 100644 files/de/web/css/css_table/index.html delete mode 100644 files/de/web/css/css_text/index.html delete mode 100644 files/de/web/css/css_text_decoration/index.html delete mode 100644 files/de/web/css/css_transforms/index.html delete mode 100644 files/de/web/css/css_transforms/using_css_transforms/index.html delete mode 100644 files/de/web/css/css_transitions/index.html delete mode 100644 files/de/web/css/css_types/index.html delete mode 100644 files/de/web/css/css_writing_modes/index.html delete mode 100644 files/de/web/css/cssom_view/index.html delete mode 100644 files/de/web/css/cursor/index.html delete mode 100644 files/de/web/css/custom-ident/index.html delete mode 100644 files/de/web/css/direction/index.html delete mode 100644 files/de/web/css/display/index.html delete mode 100644 files/de/web/css/empty-cells/index.html delete mode 100644 files/de/web/css/filter/index.html delete mode 100644 files/de/web/css/flex-flow/index.html delete mode 100644 files/de/web/css/flex-grow/index.html delete mode 100644 files/de/web/css/flex-shrink/index.html delete mode 100644 files/de/web/css/flex-wrap/index.html delete mode 100644 files/de/web/css/float/index.html delete mode 100644 files/de/web/css/font-family/index.html delete mode 100644 files/de/web/css/font-feature-settings/index.html delete mode 100644 files/de/web/css/font-size/index.html delete mode 100644 files/de/web/css/font-style/index.html delete mode 100644 files/de/web/css/font-variant/index.html delete mode 100644 files/de/web/css/font-weight/index.html delete mode 100644 files/de/web/css/font/index.html delete mode 100644 files/de/web/css/frequency/index.html delete mode 100644 files/de/web/css/gap/index.html delete mode 100644 files/de/web/css/gradient/index.html delete mode 100644 files/de/web/css/grid-template-areas/index.html delete mode 100644 files/de/web/css/grid/index.html delete mode 100644 files/de/web/css/height/index.html delete mode 100644 files/de/web/css/hyphens/index.html delete mode 100644 files/de/web/css/id_selectors/index.html delete mode 100644 files/de/web/css/image-orientation/index.html delete mode 100644 files/de/web/css/image-rendering/index.html delete mode 100644 files/de/web/css/image/index.html delete mode 100644 files/de/web/css/index.html delete mode 100644 files/de/web/css/inherit/index.html delete mode 100644 files/de/web/css/inheritance/index.html delete mode 100644 files/de/web/css/initial/index.html delete mode 100644 files/de/web/css/initial_value/index.html delete mode 100644 files/de/web/css/integer/index.html delete mode 100644 files/de/web/css/justify-content/index.html delete mode 100644 files/de/web/css/layout_mode/index.html delete mode 100644 files/de/web/css/left/index.html delete mode 100644 files/de/web/css/length/index.html delete mode 100644 files/de/web/css/letter-spacing/index.html delete mode 100644 files/de/web/css/line-break/index.html delete mode 100644 files/de/web/css/list-style-image/index.html delete mode 100644 files/de/web/css/list-style-position/index.html delete mode 100644 files/de/web/css/list-style-type/index.html delete mode 100644 files/de/web/css/list-style/index.html delete mode 100644 files/de/web/css/margin-bottom/index.html delete mode 100644 files/de/web/css/margin-left/index.html delete mode 100644 files/de/web/css/margin-right/index.html delete mode 100644 files/de/web/css/margin-top/index.html delete mode 100644 files/de/web/css/margin/index.html delete mode 100644 files/de/web/css/mask-origin/index.html delete mode 100644 files/de/web/css/mask-repeat/index.html delete mode 100644 files/de/web/css/mask/index.html delete mode 100644 files/de/web/css/max-height/index.html delete mode 100644 files/de/web/css/max-width/index.html delete mode 100644 files/de/web/css/media_queries/index.html delete mode 100644 files/de/web/css/min-height/index.html delete mode 100644 files/de/web/css/min-width/index.html delete mode 100644 files/de/web/css/mix-blend-mode/index.html delete mode 100644 files/de/web/css/mozilla_extensions/index.html delete mode 100644 files/de/web/css/number/index.html delete mode 100644 files/de/web/css/object-fit/index.html delete mode 100644 files/de/web/css/opacity/index.html delete mode 100644 files/de/web/css/order/index.html delete mode 100644 files/de/web/css/orphans/index.html delete mode 100644 files/de/web/css/outline-color/index.html delete mode 100644 files/de/web/css/outline/index.html delete mode 100644 files/de/web/css/overflow-wrap/index.html delete mode 100644 files/de/web/css/overflow/index.html delete mode 100644 files/de/web/css/overscroll-behavior-y/index.html delete mode 100644 files/de/web/css/overscroll-behavior/index.html delete mode 100644 files/de/web/css/padding-bottom/index.html delete mode 100644 files/de/web/css/padding-left/index.html delete mode 100644 files/de/web/css/padding-right/index.html delete mode 100644 files/de/web/css/padding-top/index.html delete mode 100644 files/de/web/css/padding/index.html delete mode 100644 files/de/web/css/page-break-after/index.html delete mode 100644 files/de/web/css/page-break-before/index.html delete mode 100644 files/de/web/css/page-break-inside/index.html delete mode 100644 files/de/web/css/paged_media/index.html delete mode 100644 files/de/web/css/percentage/index.html delete mode 100644 files/de/web/css/pointer-events/index.html delete mode 100644 files/de/web/css/position/index.html delete mode 100644 files/de/web/css/position_value/index.html delete mode 100644 files/de/web/css/print-color-adjust/index.html delete mode 100644 files/de/web/css/pseudo-classes/index.html delete mode 100644 files/de/web/css/pseudo-elements/index.html delete mode 100644 files/de/web/css/quotes/index.html delete mode 100644 files/de/web/css/ratio/index.html delete mode 100644 files/de/web/css/reference/index.html delete mode 100644 files/de/web/css/replaced_element/index.html delete mode 100644 files/de/web/css/resize/index.html delete mode 100644 files/de/web/css/resolution/index.html delete mode 100644 files/de/web/css/right/index.html delete mode 100644 files/de/web/css/row-gap/index.html delete mode 100644 files/de/web/css/ruby-align/index.html delete mode 100644 files/de/web/css/scroll-behavior/index.html delete mode 100644 files/de/web/css/shape/index.html delete mode 100644 files/de/web/css/specificity/index.html delete mode 100644 files/de/web/css/string/index.html delete mode 100644 files/de/web/css/tab-size/index.html delete mode 100644 files/de/web/css/table-layout/index.html delete mode 100644 files/de/web/css/text-align-last/index.html delete mode 100644 files/de/web/css/text-align/index.html delete mode 100644 files/de/web/css/text-decoration-color/index.html delete mode 100644 files/de/web/css/text-decoration-line/index.html delete mode 100644 files/de/web/css/text-decoration/index.html delete mode 100644 files/de/web/css/text-indent/index.html delete mode 100644 files/de/web/css/text-justify/index.html delete mode 100644 files/de/web/css/text-overflow/index.html delete mode 100644 files/de/web/css/text-rendering/index.html delete mode 100644 files/de/web/css/text-shadow/index.html delete mode 100644 files/de/web/css/text-transform/index.html delete mode 100644 files/de/web/css/text-underline-position/index.html delete mode 100644 files/de/web/css/time/index.html delete mode 100644 files/de/web/css/tools/linear-gradient_generator/index.html delete mode 100644 files/de/web/css/top/index.html delete mode 100644 files/de/web/css/touch-action/index.html delete mode 100644 files/de/web/css/transform-function/index.html delete mode 100644 files/de/web/css/transform-function/translate3d/index.html delete mode 100644 files/de/web/css/transform-function/translatey/index.html delete mode 100644 files/de/web/css/transform-function/translatez/index.html delete mode 100644 files/de/web/css/transform-origin/index.html delete mode 100644 files/de/web/css/transform/index.html delete mode 100644 files/de/web/css/transition-property/index.html delete mode 100644 files/de/web/css/transition/index.html delete mode 100644 files/de/web/css/translate/index.html delete mode 100644 files/de/web/css/tutorials/index.html delete mode 100644 files/de/web/css/type_selectors/index.html delete mode 100644 files/de/web/css/unicode-bidi/index.html delete mode 100644 files/de/web/css/universal_selectors/index.html delete mode 100644 files/de/web/css/unset/index.html delete mode 100644 files/de/web/css/url/index.html delete mode 100644 files/de/web/css/user-modify/index.html delete mode 100644 files/de/web/css/user-select/index.html delete mode 100644 files/de/web/css/value_definition_syntax/index.html delete mode 100644 files/de/web/css/vertical-align/index.html delete mode 100644 files/de/web/css/visibility/index.html delete mode 100644 files/de/web/css/webkit_extensions/index.html delete mode 100644 files/de/web/css/white-space/index.html delete mode 100644 files/de/web/css/widows/index.html delete mode 100644 files/de/web/css/width/index.html delete mode 100644 files/de/web/css/word-break/index.html delete mode 100644 files/de/web/css/word-spacing/index.html delete mode 100644 files/de/web/css/z-index/index.html delete mode 100644 files/de/web/demos/index.html delete mode 100644 files/de/web/events/index.html delete mode 100644 files/de/web/guide/ajax/getting_started/index.html delete mode 100644 files/de/web/guide/ajax/index.html delete mode 100644 files/de/web/guide/graphics/index.html delete mode 100644 files/de/web/guide/html/content_categories/index.html delete mode 100644 files/de/web/guide/html/editable_content/index.html delete mode 100644 files/de/web/guide/index.html delete mode 100644 files/de/web/html/block-level_elements/index.html delete mode 100644 files/de/web/html/element/a/index.html delete mode 100644 files/de/web/html/element/abbr/index.html delete mode 100644 files/de/web/html/element/acronym/index.html delete mode 100644 files/de/web/html/element/address/index.html delete mode 100644 files/de/web/html/element/applet/index.html delete mode 100644 files/de/web/html/element/area/index.html delete mode 100644 files/de/web/html/element/article/index.html delete mode 100644 files/de/web/html/element/aside/index.html delete mode 100644 files/de/web/html/element/b/index.html delete mode 100644 files/de/web/html/element/base/index.html delete mode 100644 files/de/web/html/element/bdi/index.html delete mode 100644 files/de/web/html/element/bdo/index.html delete mode 100644 files/de/web/html/element/bgsound/index.html delete mode 100644 files/de/web/html/element/big/index.html delete mode 100644 files/de/web/html/element/blink/index.html delete mode 100644 files/de/web/html/element/blockquote/index.html delete mode 100644 files/de/web/html/element/body/index.html delete mode 100644 files/de/web/html/element/br/index.html delete mode 100644 files/de/web/html/element/canvas/index.html delete mode 100644 files/de/web/html/element/caption/index.html delete mode 100644 files/de/web/html/element/center/index.html delete mode 100644 files/de/web/html/element/cite/index.html delete mode 100644 files/de/web/html/element/code/index.html delete mode 100644 files/de/web/html/element/col/index.html delete mode 100644 files/de/web/html/element/data/index.html delete mode 100644 files/de/web/html/element/datalist/index.html delete mode 100644 files/de/web/html/element/dd/index.html delete mode 100644 files/de/web/html/element/del/index.html delete mode 100644 files/de/web/html/element/details/index.html delete mode 100644 files/de/web/html/element/dialog/index.html delete mode 100644 files/de/web/html/element/dir/index.html delete mode 100644 files/de/web/html/element/div/index.html delete mode 100644 files/de/web/html/element/dl/index.html delete mode 100644 files/de/web/html/element/dt/index.html delete mode 100644 files/de/web/html/element/em/index.html delete mode 100644 files/de/web/html/element/embed/index.html delete mode 100644 files/de/web/html/element/fieldset/index.html delete mode 100644 files/de/web/html/element/font/index.html delete mode 100644 files/de/web/html/element/footer/index.html delete mode 100644 files/de/web/html/element/frame/index.html delete mode 100644 files/de/web/html/element/header/index.html delete mode 100644 files/de/web/html/element/heading_elements/index.html delete mode 100644 files/de/web/html/element/hr/index.html delete mode 100644 files/de/web/html/element/html/index.html delete mode 100644 files/de/web/html/element/i/index.html delete mode 100644 files/de/web/html/element/iframe/index.html delete mode 100644 files/de/web/html/element/image/index.html delete mode 100644 files/de/web/html/element/img/index.html delete mode 100644 files/de/web/html/element/index.html delete mode 100644 files/de/web/html/element/input/checkbox/index.html delete mode 100644 files/de/web/html/element/input/index.html delete mode 100644 files/de/web/html/element/ins/index.html delete mode 100644 files/de/web/html/element/legend/index.html delete mode 100644 files/de/web/html/element/li/index.html delete mode 100644 files/de/web/html/element/link/index.html delete mode 100644 files/de/web/html/element/main/index.html delete mode 100644 files/de/web/html/element/map/index.html delete mode 100644 files/de/web/html/element/marquee/index.html delete mode 100644 files/de/web/html/element/nav/index.html delete mode 100644 files/de/web/html/element/noembed/index.html delete mode 100644 files/de/web/html/element/noscript/index.html delete mode 100644 files/de/web/html/element/object/index.html delete mode 100644 files/de/web/html/element/ol/index.html delete mode 100644 files/de/web/html/element/optgroup/index.html delete mode 100644 files/de/web/html/element/option/index.html delete mode 100644 files/de/web/html/element/p/index.html delete mode 100644 files/de/web/html/element/picture/index.html delete mode 100644 files/de/web/html/element/pre/index.html delete mode 100644 files/de/web/html/element/progress/index.html delete mode 100644 files/de/web/html/element/q/index.html delete mode 100644 files/de/web/html/element/s/index.html delete mode 100644 files/de/web/html/element/section/index.html delete mode 100644 files/de/web/html/element/shadow/index.html delete mode 100644 files/de/web/html/element/strong/index.html delete mode 100644 files/de/web/html/element/summary/index.html delete mode 100644 files/de/web/html/element/table/index.html delete mode 100644 files/de/web/html/element/td/index.html delete mode 100644 files/de/web/html/element/template/index.html delete mode 100644 files/de/web/html/element/time/index.html delete mode 100644 files/de/web/html/element/title/index.html delete mode 100644 files/de/web/html/element/tr/index.html delete mode 100644 files/de/web/html/element/tt/index.html delete mode 100644 files/de/web/html/element/u/index.html delete mode 100644 files/de/web/html/element/ul/index.html delete mode 100644 files/de/web/html/element/var/index.html delete mode 100644 files/de/web/html/element/video/index.html delete mode 100644 files/de/web/html/global_attributes/accesskey/index.html delete mode 100644 files/de/web/html/global_attributes/autocapitalize/index.html delete mode 100644 files/de/web/html/global_attributes/class/index.html delete mode 100644 files/de/web/html/global_attributes/contenteditable/index.html delete mode 100644 files/de/web/html/global_attributes/contextmenu/index.html delete mode 100644 files/de/web/html/global_attributes/dir/index.html delete mode 100644 files/de/web/html/global_attributes/draggable/index.html delete mode 100644 files/de/web/html/global_attributes/hidden/index.html delete mode 100644 files/de/web/html/global_attributes/id/index.html delete mode 100644 files/de/web/html/global_attributes/index.html delete mode 100644 files/de/web/html/global_attributes/inputmode/index.html delete mode 100644 files/de/web/html/global_attributes/lang/index.html delete mode 100644 files/de/web/html/global_attributes/style/index.html delete mode 100644 files/de/web/html/global_attributes/tabindex/index.html delete mode 100644 files/de/web/html/global_attributes/title/index.html delete mode 100644 files/de/web/html/global_attributes/translate/index.html delete mode 100644 files/de/web/html/index.html delete mode 100644 files/de/web/html/inline_elements/index.html delete mode 100644 files/de/web/html/reference/index.html delete mode 100644 files/de/web/http/basics_of_http/identifying_resources_on_the_web/index.html delete mode 100644 files/de/web/http/basics_of_http/index.html delete mode 100644 files/de/web/http/caching/index.html delete mode 100644 files/de/web/http/cors/errors/corsdidnotsucceed/index.html delete mode 100644 files/de/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html delete mode 100644 files/de/web/http/cors/errors/corsmissingalloworigin/index.html delete mode 100644 files/de/web/http/cors/errors/corsrequestnothttp/index.html delete mode 100644 files/de/web/http/cors/errors/index.html delete mode 100644 files/de/web/http/cors/index.html delete mode 100644 files/de/web/http/headers/accept/index.html delete mode 100644 files/de/web/http/headers/age/index.html delete mode 100644 files/de/web/http/headers/cache-control/index.html delete mode 100644 files/de/web/http/headers/cookie/index.html delete mode 100644 files/de/web/http/headers/dnt/index.html delete mode 100644 files/de/web/http/headers/expect-ct/index.html delete mode 100644 files/de/web/http/headers/expires/index.html delete mode 100644 files/de/web/http/headers/index.html delete mode 100644 files/de/web/http/headers/referer/index.html delete mode 100644 files/de/web/http/headers/server/index.html delete mode 100644 files/de/web/http/headers/tk/index.html delete mode 100644 files/de/web/http/headers/x-content-type-options/index.html delete mode 100644 files/de/web/http/headers/x-frame-options/index.html delete mode 100644 files/de/web/http/index.html delete mode 100644 files/de/web/http/methods/connect/index.html delete mode 100644 files/de/web/http/methods/delete/index.html delete mode 100644 files/de/web/http/methods/get/index.html delete mode 100644 files/de/web/http/methods/index.html delete mode 100644 files/de/web/http/status/100/index.html delete mode 100644 files/de/web/http/status/200/index.html delete mode 100644 files/de/web/http/status/201/index.html delete mode 100644 files/de/web/http/status/302/index.html delete mode 100644 files/de/web/http/status/304/index.html delete mode 100644 files/de/web/http/status/400/index.html delete mode 100644 files/de/web/http/status/401/index.html delete mode 100644 files/de/web/http/status/403/index.html delete mode 100644 files/de/web/http/status/404/index.html delete mode 100644 files/de/web/http/status/409/index.html delete mode 100644 files/de/web/http/status/410/index.html delete mode 100644 files/de/web/http/status/414/index.html delete mode 100644 files/de/web/http/status/418/index.html delete mode 100644 files/de/web/http/status/500/index.html delete mode 100644 files/de/web/http/status/502/index.html delete mode 100644 files/de/web/http/status/503/index.html delete mode 100644 files/de/web/http/status/504/index.html delete mode 100644 files/de/web/http/status/505/index.html delete mode 100644 files/de/web/http/status/511/index.html delete mode 100644 files/de/web/http/status/index.html delete mode 100644 files/de/web/index.html delete mode 100644 files/de/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 files/de/web/javascript/about_javascript/index.html delete mode 100644 files/de/web/javascript/closures/index.html delete mode 100644 files/de/web/javascript/data_structures/index.html delete mode 100644 files/de/web/javascript/enumerability_and_ownership_of_properties/index.html delete mode 100644 files/de/web/javascript/equality_comparisons_and_sameness/index.html delete mode 100644 files/de/web/javascript/eventloop/index.html delete mode 100644 files/de/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/de/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 files/de/web/javascript/guide/functions/index.html delete mode 100644 files/de/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/de/web/javascript/guide/index.html delete mode 100644 files/de/web/javascript/guide/indexed_collections/index.html delete mode 100644 files/de/web/javascript/guide/introduction/index.html delete mode 100644 files/de/web/javascript/guide/keyed_collections/index.html delete mode 100644 files/de/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/de/web/javascript/guide/meta_programming/index.html delete mode 100644 files/de/web/javascript/guide/numbers_and_dates/index.html delete mode 100644 files/de/web/javascript/guide/regular_expressions/index.html delete mode 100644 files/de/web/javascript/guide/text_formatting/index.html delete mode 100644 files/de/web/javascript/guide/using_promises/index.html delete mode 100644 files/de/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/de/web/javascript/index.html delete mode 100644 files/de/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/de/web/javascript/javascript_technologies_overview/index.html delete mode 100644 files/de/web/javascript/memory_management/index.html delete mode 100644 files/de/web/javascript/reference/about/index.html delete mode 100644 files/de/web/javascript/reference/classes/constructor/index.html delete mode 100644 files/de/web/javascript/reference/classes/extends/index.html delete mode 100644 files/de/web/javascript/reference/classes/index.html delete mode 100644 files/de/web/javascript/reference/classes/static/index.html delete mode 100644 files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html delete mode 100644 files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html delete mode 100644 files/de/web/javascript/reference/errors/already_has_pragma/index.html delete mode 100644 files/de/web/javascript/reference/errors/array_sort_argument/index.html delete mode 100644 files/de/web/javascript/reference/errors/bad_octal/index.html delete mode 100644 files/de/web/javascript/reference/errors/bad_radix/index.html delete mode 100644 files/de/web/javascript/reference/errors/bad_regexp_flag/index.html delete mode 100644 files/de/web/javascript/reference/errors/bad_return_or_yield/index.html delete mode 100644 files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html delete mode 100644 files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html delete mode 100644 files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html delete mode 100644 files/de/web/javascript/reference/errors/cant_delete/index.html delete mode 100644 files/de/web/javascript/reference/errors/cant_redefine_property/index.html delete mode 100644 files/de/web/javascript/reference/errors/cyclic_object_value/index.html delete mode 100644 files/de/web/javascript/reference/errors/dead_object/index.html delete mode 100644 files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html delete mode 100644 files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html delete mode 100644 files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html delete mode 100644 files/de/web/javascript/reference/errors/deprecated_octal/index.html delete mode 100644 files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html delete mode 100644 files/de/web/javascript/reference/errors/deprecated_string_generics/index.html delete mode 100644 files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html delete mode 100644 files/de/web/javascript/reference/errors/equal_as_assign/index.html delete mode 100644 files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html delete mode 100644 files/de/web/javascript/reference/errors/getter_only/index.html delete mode 100644 files/de/web/javascript/reference/errors/identifier_after_number/index.html delete mode 100644 files/de/web/javascript/reference/errors/illegal_character/index.html delete mode 100644 files/de/web/javascript/reference/errors/in_operator_no_object/index.html delete mode 100644 files/de/web/javascript/reference/errors/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_array_length/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_const_assignment/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_date/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html delete mode 100644 files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html delete mode 100644 files/de/web/javascript/reference/errors/is_not_iterable/index.html delete mode 100644 files/de/web/javascript/reference/errors/json_bad_parse/index.html delete mode 100644 files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html delete mode 100644 files/de/web/javascript/reference/errors/malformed_uri/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_formal_parameter/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html delete mode 100644 files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html delete mode 100644 files/de/web/javascript/reference/errors/more_arguments_needed/index.html delete mode 100644 files/de/web/javascript/reference/errors/negative_repetition_count/index.html delete mode 100644 files/de/web/javascript/reference/errors/no_non-null_object/index.html delete mode 100644 files/de/web/javascript/reference/errors/no_properties/index.html delete mode 100644 files/de/web/javascript/reference/errors/no_variable_name/index.html delete mode 100644 files/de/web/javascript/reference/errors/non_configurable_array_element/index.html delete mode 100644 files/de/web/javascript/reference/errors/not_a_codepoint/index.html delete mode 100644 files/de/web/javascript/reference/errors/not_a_constructor/index.html delete mode 100644 files/de/web/javascript/reference/errors/not_a_function/index.html delete mode 100644 files/de/web/javascript/reference/errors/not_defined/index.html delete mode 100644 files/de/web/javascript/reference/errors/precision_range/index.html delete mode 100644 files/de/web/javascript/reference/errors/property_access_denied/index.html delete mode 100644 files/de/web/javascript/reference/errors/read-only/index.html delete mode 100644 files/de/web/javascript/reference/errors/redeclared_parameter/index.html delete mode 100644 files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html delete mode 100644 files/de/web/javascript/reference/errors/reserved_identifier/index.html delete mode 100644 files/de/web/javascript/reference/errors/resulting_string_too_large/index.html delete mode 100644 files/de/web/javascript/reference/errors/stmt_after_return/index.html delete mode 100644 files/de/web/javascript/reference/errors/strict_non_simple_params/index.html delete mode 100644 files/de/web/javascript/reference/errors/too_much_recursion/index.html delete mode 100644 files/de/web/javascript/reference/errors/undeclared_var/index.html delete mode 100644 files/de/web/javascript/reference/errors/undefined_prop/index.html delete mode 100644 files/de/web/javascript/reference/errors/unexpected_token/index.html delete mode 100644 files/de/web/javascript/reference/errors/unexpected_type/index.html delete mode 100644 files/de/web/javascript/reference/errors/unnamed_function_statement/index.html delete mode 100644 files/de/web/javascript/reference/errors/unterminated_string_literal/index.html delete mode 100644 files/de/web/javascript/reference/errors/var_hides_argument/index.html delete mode 100644 files/de/web/javascript/reference/functions/arguments/@@iterator/index.html delete mode 100644 files/de/web/javascript/reference/functions/arguments/callee/index.html delete mode 100644 files/de/web/javascript/reference/functions/arguments/index.html delete mode 100644 files/de/web/javascript/reference/functions/arguments/length/index.html delete mode 100644 files/de/web/javascript/reference/functions/arrow_functions/index.html delete mode 100644 files/de/web/javascript/reference/functions/default_parameters/index.html delete mode 100644 files/de/web/javascript/reference/functions/get/index.html delete mode 100644 files/de/web/javascript/reference/functions/index.html delete mode 100644 files/de/web/javascript/reference/functions/method_definitions/index.html delete mode 100644 files/de/web/javascript/reference/functions/rest_parameters/index.html delete mode 100644 files/de/web/javascript/reference/functions/set/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/@@iterator/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/@@species/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/concat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/copywithin/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/entries/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/every/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/fill/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/filter/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/find/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/findindex/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/flat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/flatmap/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/foreach/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/from/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/includes/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/indexof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/isarray/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/join/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/keys/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/lastindexof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/length/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/map/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/of/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/pop/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/push/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/reduce/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/reduceright/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/reverse/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/shift/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/slice/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/some/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/sort/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/splice/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/unshift/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/values/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/@@species/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/isview/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/slice/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/add/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/and/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/compareexchange/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/exchange/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/islockfree/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/load/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/notify/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/or/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/store/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/sub/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/wait/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/xor/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/boolean/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/boolean/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/boolean/valueof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/buffer/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/bytelength/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/byteoffset/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getfloat32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getfloat64/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint16/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint8/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint16/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint8/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setfloat32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setfloat64/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint16/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint8/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint16/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint8/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/@@toprimitive/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getday/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getfullyear/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/gethours/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getmilliseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getminutes/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getmonth/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/gettime/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcdate/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcday/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcfullyear/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutchours/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcminutes/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcmonth/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getutcseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/getyear/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/now/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/parse/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setdate/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setfullyear/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/sethours/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setmilliseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setminutes/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setmonth/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/settime/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutcdate/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutcfullyear/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutchours/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutcminutes/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutcmonth/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setutcseconds/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/setyear/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/todatestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/togmtstring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/toisostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/tojson/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaledatestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/tolocalestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaletimestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/totimestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/toutcstring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/utc/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/valueof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/decodeuricomponent/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/encodeuri/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/columnnumber/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/filename/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/linenumber/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/message/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/name/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/stack/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/escape/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/evalerror/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/float32array/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/float64array/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/apply/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/arguments/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/bind/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/call/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/caller/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/displayname/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/length/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/name/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generator/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generator/next/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generator/return/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generator/throw/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/globalthis/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/infinity/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/int16array/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/int32array/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/int8array/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/internalerror/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/compare/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/format/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/pluralrules/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/isfinite/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/isnan/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/json/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/json/parse/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/json/stringify/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/acos/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/acosh/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/asin/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/asinh/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/atan/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/atan2/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/cbrt/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/ceil/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/clz32/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/cos/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/cosh/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/e/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/exp/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/expm1/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/floor/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/fround/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/hypot/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/imul/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/ln10/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/ln2/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/log/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/log10/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/log10e/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/log1p/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/log2/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/log2e/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/max/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/min/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/pi/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/pow/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/random/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/round/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/sign/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/sin/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/sinh/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt1_2/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt2/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/tan/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/tanh/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/trunc/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/nan/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/epsilon/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/isfinite/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/isinteger/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/isnan/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/issafeinteger/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/max_safe_integer/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/max_value/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/min_safe_integer/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/min_value/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/nan/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/negative_infinity/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/parsefloat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/parseint/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/positive_infinity/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/toexponential/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/tofixed/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/tolocalestring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/toprecision/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/valueof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/assign/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/constructor/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/create/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/entries/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/freeze/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/is/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/isextensible/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/isfrozen/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/keys/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/proto/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/tostring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/valueof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/values/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/parsefloat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/parseint/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/promise/all/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/promise/finally/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/promise/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/promise/race/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/promise/reject/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/promise/then/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/reflect/apply/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/reflect/construct/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/reflect/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/regexp/flags/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/regexp/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/regexp/input/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/regexp/test/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/set/add/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/set/delete/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/set/has/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/set/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/charat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/concat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/endswith/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/fromcharcode/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/includes/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/indexof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/lastindexof/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/length/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/match/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/raw/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/repeat/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/replace/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/search/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/slice/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/split/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/startswith/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/substr/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/substring/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/tolowercase/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/touppercase/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trim/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trimend/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trimstart/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/symbol/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/typeerror/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/undefined/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/unescape/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/webassembly/compile/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/webassembly/index.html delete mode 100644 files/de/web/javascript/reference/index.html delete mode 100644 files/de/web/javascript/reference/iteration_protocols/index.html delete mode 100644 files/de/web/javascript/reference/lexical_grammar/index.html delete mode 100644 files/de/web/javascript/reference/operators/addition/index.html delete mode 100644 files/de/web/javascript/reference/operators/async_function/index.html delete mode 100644 files/de/web/javascript/reference/operators/await/index.html delete mode 100644 files/de/web/javascript/reference/operators/class/index.html delete mode 100644 files/de/web/javascript/reference/operators/comma_operator/index.html delete mode 100644 files/de/web/javascript/reference/operators/conditional_operator/index.html delete mode 100644 files/de/web/javascript/reference/operators/decrement/index.html delete mode 100644 files/de/web/javascript/reference/operators/delete/index.html delete mode 100644 files/de/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/de/web/javascript/reference/operators/function/index.html delete mode 100644 files/de/web/javascript/reference/operators/function_star_/index.html delete mode 100644 files/de/web/javascript/reference/operators/grouping/index.html delete mode 100644 files/de/web/javascript/reference/operators/in/index.html delete mode 100644 files/de/web/javascript/reference/operators/increment/index.html delete mode 100644 files/de/web/javascript/reference/operators/index.html delete mode 100644 files/de/web/javascript/reference/operators/instanceof/index.html delete mode 100644 files/de/web/javascript/reference/operators/new.target/index.html delete mode 100644 files/de/web/javascript/reference/operators/new/index.html delete mode 100644 files/de/web/javascript/reference/operators/null/index.html delete mode 100644 files/de/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 files/de/web/javascript/reference/operators/operator_precedence/index.html delete mode 100644 files/de/web/javascript/reference/operators/optional_chaining/index.html delete mode 100644 files/de/web/javascript/reference/operators/property_accessors/index.html delete mode 100644 files/de/web/javascript/reference/operators/remainder/index.html delete mode 100644 files/de/web/javascript/reference/operators/spread_syntax/index.html delete mode 100644 files/de/web/javascript/reference/operators/super/index.html delete mode 100644 files/de/web/javascript/reference/operators/this/index.html delete mode 100644 files/de/web/javascript/reference/operators/typeof/index.html delete mode 100644 files/de/web/javascript/reference/operators/void/index.html delete mode 100644 files/de/web/javascript/reference/operators/yield/index.html delete mode 100644 files/de/web/javascript/reference/operators/yield_star_/index.html delete mode 100644 files/de/web/javascript/reference/statements/async_function/index.html delete mode 100644 files/de/web/javascript/reference/statements/block/index.html delete mode 100644 files/de/web/javascript/reference/statements/break/index.html delete mode 100644 files/de/web/javascript/reference/statements/class/index.html delete mode 100644 files/de/web/javascript/reference/statements/const/index.html delete mode 100644 files/de/web/javascript/reference/statements/continue/index.html delete mode 100644 files/de/web/javascript/reference/statements/debugger/index.html delete mode 100644 files/de/web/javascript/reference/statements/do...while/index.html delete mode 100644 files/de/web/javascript/reference/statements/empty/index.html delete mode 100644 files/de/web/javascript/reference/statements/export/index.html delete mode 100644 files/de/web/javascript/reference/statements/for...in/index.html delete mode 100644 files/de/web/javascript/reference/statements/for...of/index.html delete mode 100644 files/de/web/javascript/reference/statements/for/index.html delete mode 100644 files/de/web/javascript/reference/statements/function/index.html delete mode 100644 files/de/web/javascript/reference/statements/function_star_/index.html delete mode 100644 files/de/web/javascript/reference/statements/if...else/index.html delete mode 100644 files/de/web/javascript/reference/statements/import/index.html delete mode 100644 files/de/web/javascript/reference/statements/index.html delete mode 100644 files/de/web/javascript/reference/statements/label/index.html delete mode 100644 files/de/web/javascript/reference/statements/let/index.html delete mode 100644 files/de/web/javascript/reference/statements/return/index.html delete mode 100644 files/de/web/javascript/reference/statements/switch/index.html delete mode 100644 files/de/web/javascript/reference/statements/throw/index.html delete mode 100644 files/de/web/javascript/reference/statements/try...catch/index.html delete mode 100644 files/de/web/javascript/reference/statements/var/index.html delete mode 100644 files/de/web/javascript/reference/statements/while/index.html delete mode 100644 files/de/web/javascript/reference/strict_mode/index.html delete mode 100644 files/de/web/javascript/reference/template_literals/index.html delete mode 100644 files/de/web/javascript/typed_arrays/index.html delete mode 100644 files/de/web/manifest/index.html delete mode 100644 files/de/web/mathml/attribute/index.html delete mode 100644 files/de/web/mathml/attribute/values/index.html delete mode 100644 files/de/web/mathml/element/index.html delete mode 100644 files/de/web/mathml/element/maction/index.html delete mode 100644 files/de/web/mathml/element/math/index.html delete mode 100644 files/de/web/mathml/element/menclose/index.html delete mode 100644 files/de/web/mathml/element/merror/index.html delete mode 100644 files/de/web/mathml/element/mfenced/index.html delete mode 100644 files/de/web/mathml/element/mfrac/index.html delete mode 100644 files/de/web/mathml/element/mi/index.html delete mode 100644 files/de/web/mathml/element/mn/index.html delete mode 100644 files/de/web/mathml/element/mo/index.html delete mode 100644 files/de/web/mathml/element/mover/index.html delete mode 100644 files/de/web/mathml/element/mpadded/index.html delete mode 100644 files/de/web/mathml/element/mphantom/index.html delete mode 100644 files/de/web/mathml/element/mroot/index.html delete mode 100644 files/de/web/mathml/element/mrow/index.html delete mode 100644 files/de/web/mathml/element/ms/index.html delete mode 100644 files/de/web/mathml/element/mspace/index.html delete mode 100644 files/de/web/mathml/element/msqrt/index.html delete mode 100644 files/de/web/mathml/element/mstyle/index.html delete mode 100644 files/de/web/mathml/element/msub/index.html delete mode 100644 files/de/web/mathml/element/msubsup/index.html delete mode 100644 files/de/web/mathml/element/msup/index.html delete mode 100644 files/de/web/mathml/element/mtable/index.html delete mode 100644 files/de/web/mathml/element/mtd/index.html delete mode 100644 files/de/web/mathml/element/mtext/index.html delete mode 100644 files/de/web/mathml/element/mtr/index.html delete mode 100644 files/de/web/mathml/element/munder/index.html delete mode 100644 files/de/web/mathml/element/munderover/index.html delete mode 100644 files/de/web/mathml/examples/deriving_the_quadratic_formula/index.html delete mode 100644 files/de/web/mathml/examples/index.html delete mode 100644 files/de/web/mathml/examples/mathml_pythagorean_theorem/index.html delete mode 100644 files/de/web/mathml/index.html delete mode 100644 files/de/web/opensearch/index.html delete mode 100644 files/de/web/performance/dns-prefetch/index.html delete mode 100644 files/de/web/progressive_web_apps/index.html delete mode 100644 files/de/web/security/certificate_transparency/index.html delete mode 100644 files/de/web/security/index.html delete mode 100644 files/de/web/svg/attribute/class/index.html delete mode 100644 files/de/web/svg/attribute/index.html delete mode 100644 files/de/web/svg/attribute/preserveaspectratio/index.html delete mode 100644 files/de/web/svg/element/animate/index.html delete mode 100644 files/de/web/svg/element/circle/index.html delete mode 100644 files/de/web/svg/element/foreignobject/index.html delete mode 100644 files/de/web/svg/element/index.html delete mode 100644 files/de/web/svg/element/path/index.html delete mode 100644 files/de/web/svg/element/polygon/index.html delete mode 100644 files/de/web/svg/element/rect/index.html delete mode 100644 files/de/web/svg/element/svg/index.html delete mode 100644 files/de/web/svg/element/textpath/index.html delete mode 100644 files/de/web/svg/element/view/index.html delete mode 100644 files/de/web/svg/index.html delete mode 100644 files/de/web/svg/namespaces_crash_course/index.html delete mode 100644 files/de/web/svg/tutorial/fills_and_strokes/index.html delete mode 100644 files/de/web/svg/tutorial/index.html delete mode 100644 files/de/web/svg/tutorial/introduction/index.html delete mode 100644 files/de/web/svg/tutorial/paths/index.html delete mode 100644 files/de/web/svg/tutorial/svg_fonts/index.html delete mode 100644 files/de/web/svg/tutorial/svg_image_tag/index.html delete mode 100644 files/de/web/svg/tutorial/tools_for_svg/index.html delete mode 100644 files/de/web/web_components/index.html delete mode 100644 files/de/web/web_components/using_custom_elements/index.html delete mode 100644 files/de/web/xml/index.html delete mode 100644 files/de/web/xml/xml_introduction/index.html delete mode 100644 files/de/web/xslt/index.html delete mode 100644 files/pl/_redirects.txt delete mode 100644 files/pl/_wikihistory.json delete mode 100644 files/pl/conflicting/web/accessibility/aria/index.html delete mode 100644 files/pl/conflicting/web/css/cursor/index.html delete mode 100644 files/pl/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/array/tostring/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/boolean/tostring/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/date/tostring/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/error/tostring/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/object/tostring/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/regexp/tostring/index.html delete mode 100644 files/pl/conflicting/web/javascript/reference/global_objects/string/tostring/index.html delete mode 100644 files/pl/games/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/index.html delete mode 100644 files/pl/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html delete mode 100644 files/pl/games/tutorials/index.html delete mode 100644 files/pl/glossary/abstraction/index.html delete mode 100644 files/pl/glossary/accessibility/index.html delete mode 100644 files/pl/glossary/accessibility_tree/index.html delete mode 100644 files/pl/glossary/algorithm/index.html delete mode 100644 files/pl/glossary/api/index.html delete mode 100644 files/pl/glossary/argument/index.html delete mode 100644 files/pl/glossary/arpanet/index.html delete mode 100644 files/pl/glossary/array/index.html delete mode 100644 files/pl/glossary/ascii/index.html delete mode 100644 files/pl/glossary/boolean/index.html delete mode 100644 files/pl/glossary/browser/index.html delete mode 100644 files/pl/glossary/buffer/index.html delete mode 100644 files/pl/glossary/chrome/index.html delete mode 100644 files/pl/glossary/class/index.html delete mode 100644 files/pl/glossary/computer_programming/index.html delete mode 100644 files/pl/glossary/cookie/index.html delete mode 100644 files/pl/glossary/cryptography/index.html delete mode 100644 files/pl/glossary/dhtml/index.html delete mode 100644 files/pl/glossary/doctype/index.html delete mode 100644 files/pl/glossary/dom/index.html delete mode 100644 files/pl/glossary/empty_element/index.html delete mode 100644 files/pl/glossary/firefox_os/index.html delete mode 100644 files/pl/glossary/hoisting/index.html delete mode 100644 files/pl/glossary/html/index.html delete mode 100644 files/pl/glossary/hypertext/index.html delete mode 100644 files/pl/glossary/ietf/index.html delete mode 100644 files/pl/glossary/index.html delete mode 100644 files/pl/glossary/iso/index.html delete mode 100644 files/pl/glossary/javascript/index.html delete mode 100644 files/pl/glossary/json/index.html delete mode 100644 files/pl/glossary/localization/index.html delete mode 100644 files/pl/glossary/metadata/index.html delete mode 100644 files/pl/glossary/mozilla_firefox/index.html delete mode 100644 files/pl/glossary/object/index.html delete mode 100644 files/pl/glossary/semantics/index.html delete mode 100644 files/pl/glossary/sgml/index.html delete mode 100644 files/pl/glossary/slug/index.html delete mode 100644 files/pl/glossary/truthy/index.html delete mode 100644 files/pl/glossary/utf-8/index.html delete mode 100644 files/pl/glossary/w3c/index.html delete mode 100644 files/pl/glossary/webgl/index.html delete mode 100644 files/pl/glossary/world_wide_web/index.html delete mode 100644 files/pl/glossary/xhtml/index.html delete mode 100644 files/pl/learn/accessibility/index.html delete mode 100644 files/pl/learn/accessibility/what_is_accessibility/index.html delete mode 100644 files/pl/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 files/pl/learn/common_questions/index.html delete mode 100644 files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/pl/learn/css/building_blocks/index.html delete mode 100644 files/pl/learn/css/building_blocks/selectors/index.html delete mode 100644 files/pl/learn/css/building_blocks/styling_tables/index.html delete mode 100644 files/pl/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/pl/learn/css/css_layout/flexbox/index.html delete mode 100644 files/pl/learn/css/css_layout/index.html delete mode 100644 files/pl/learn/css/first_steps/how_css_is_structured/index.html delete mode 100644 files/pl/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/pl/learn/css/first_steps/index.html delete mode 100644 files/pl/learn/css/howto/css_faq/index.html delete mode 100644 files/pl/learn/css/howto/generated_content/index.html delete mode 100644 files/pl/learn/css/howto/index.html delete mode 100644 files/pl/learn/css/index.html delete mode 100644 files/pl/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/pl/learn/css/styling_text/styling_lists/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/html_basics/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/javascript_basics/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/pl/learn/html/howto/index.html delete mode 100644 files/pl/learn/html/howto/use_data_attributes/index.html delete mode 100644 files/pl/learn/html/index.html delete mode 100644 files/pl/learn/html/introduction_to_html/index.html delete mode 100644 files/pl/learn/index.html delete mode 100644 files/pl/learn/javascript/asynchronous/index.html delete mode 100644 files/pl/learn/javascript/asynchronous/introducing/index.html delete mode 100644 files/pl/learn/javascript/building_blocks/index.html delete mode 100644 files/pl/learn/javascript/client-side_web_apis/index.html delete mode 100644 files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html delete mode 100644 files/pl/learn/javascript/first_steps/a_first_splash/index.html delete mode 100644 files/pl/learn/javascript/first_steps/index.html delete mode 100644 files/pl/learn/javascript/first_steps/variables/index.html delete mode 100644 files/pl/learn/javascript/first_steps/what_is_javascript/index.html delete mode 100644 files/pl/learn/javascript/first_steps/what_went_wrong/index.html delete mode 100644 files/pl/learn/javascript/index.html delete mode 100644 files/pl/learn/javascript/objects/index.html delete mode 100644 files/pl/learn/server-side/configuring_server_mime_types/index.html delete mode 100644 files/pl/learn/server-side/express_nodejs/development_environment/index.html delete mode 100644 files/pl/learn/server-side/express_nodejs/index.html delete mode 100644 files/pl/learn/server-side/express_nodejs/introduction/index.html delete mode 100644 files/pl/learn/server-side/express_nodejs/skeleton_website/index.html delete mode 100644 files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html delete mode 100644 files/pl/learn/server-side/index.html delete mode 100644 files/pl/mdn/at_ten/index.html delete mode 100644 files/pl/mdn/community/contributing/getting_started/index.html delete mode 100644 files/pl/mdn/community/index.html delete mode 100644 files/pl/mdn/contribute/howto/index.html delete mode 100644 files/pl/mdn/contribute/index.html delete mode 100644 files/pl/mdn/index.html delete mode 100644 files/pl/mdn/writing_guidelines/index.html delete mode 100644 files/pl/mdn/yari/index.html delete mode 100644 files/pl/mozilla/add-ons/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/description/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/name/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/version/index.html delete mode 100644 files/pl/mozilla/add-ons/webextensions/your_first_webextension/index.html delete mode 100644 files/pl/mozilla/firefox/index.html delete mode 100644 files/pl/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html delete mode 100644 files/pl/mozilla/firefox/releases/1.5/index.html delete mode 100644 files/pl/mozilla/firefox/releases/1.5/what_s_new_in_1.5_alpha/index.html delete mode 100644 files/pl/mozilla/firefox/releases/2/index.html delete mode 100644 files/pl/mozilla/firefox/releases/2/security_changes/index.html delete mode 100644 files/pl/mozilla/firefox/releases/2/updating_extensions/index.html delete mode 100644 files/pl/mozilla/firefox/releases/3/dom_improvements/index.html delete mode 100644 files/pl/mozilla/firefox/releases/3/index.html delete mode 100644 files/pl/mozilla/firefox/releases/3/notable_bugs_fixed/index.html delete mode 100644 files/pl/mozilla/firefox/releases/3/svg_improvements/index.html delete mode 100644 files/pl/mozilla/firefox/releases/3/updating_web_applications/index.html delete mode 100644 files/pl/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html delete mode 100644 files/pl/mozilla/firefox/releases/index.html delete mode 100644 files/pl/mozilla/index.html delete mode 100644 files/pl/orphaned/web/api/htmlorforeignelement/blur/index.html delete mode 100644 files/pl/orphaned/web/api/htmlorforeignelement/focus/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorid/appcodename/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorid/appname/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorid/appversion/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorid/platform/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorid/product/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorlanguage/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorlanguage/language/index.html delete mode 100644 files/pl/orphaned/web/api/navigatoronline/index.html delete mode 100644 files/pl/orphaned/web/api/navigatoronline/online/index.html delete mode 100644 files/pl/orphaned/web/api/navigatoronline/online_and_offline_events/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorplugins/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorplugins/javaenabled/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorplugins/mimetypes/index.html delete mode 100644 files/pl/orphaned/web/api/navigatorplugins/plugins/index.html delete mode 100644 files/pl/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html delete mode 100644 files/pl/web/accessibility/aria/index.html delete mode 100644 files/pl/web/accessibility/index.html delete mode 100644 files/pl/web/api/atob/index.html delete mode 100644 files/pl/web/api/attr/index.html delete mode 100644 files/pl/web/api/audiobuffer/index.html delete mode 100644 files/pl/web/api/audioparam/index.html delete mode 100644 files/pl/web/api/audioparam/setvalueattime/index.html delete mode 100644 files/pl/web/api/baseaudiocontext/createdynamicscompressor/index.html delete mode 100644 files/pl/web/api/btoa/index.html delete mode 100644 files/pl/web/api/cache/index.html delete mode 100644 files/pl/web/api/canvas_api/index.html delete mode 100644 files/pl/web/api/canvas_api/tutorial/basic_usage/index.html delete mode 100644 files/pl/web/api/canvas_api/tutorial/drawing_shapes/index.html delete mode 100644 files/pl/web/api/canvas_api/tutorial/drawing_text/index.html delete mode 100644 files/pl/web/api/canvas_api/tutorial/index.html delete mode 100644 files/pl/web/api/canvas_api/tutorial/optimizing_canvas/index.html delete mode 100644 files/pl/web/api/clearinterval/index.html delete mode 100644 files/pl/web/api/cleartimeout/index.html delete mode 100644 files/pl/web/api/console/index.html delete mode 100644 files/pl/web/api/console/log/index.html delete mode 100644 files/pl/web/api/crypto_property/index.html delete mode 100644 files/pl/web/api/cssnumericvalue/div/index.html delete mode 100644 files/pl/web/api/cssnumericvalue/index.html delete mode 100644 files/pl/web/api/cssrule/index.html delete mode 100644 files/pl/web/api/cssrulelist/index.html delete mode 100644 files/pl/web/api/cssstylesheet/deleterule/index.html delete mode 100644 files/pl/web/api/cssstylesheet/index.html delete mode 100644 files/pl/web/api/cssstylesheet/insertrule/index.html delete mode 100644 files/pl/web/api/document/activeelement/index.html delete mode 100644 files/pl/web/api/document/alinkcolor/index.html delete mode 100644 files/pl/web/api/document/anchors/index.html delete mode 100644 files/pl/web/api/document/applets/index.html delete mode 100644 files/pl/web/api/document/bgcolor/index.html delete mode 100644 files/pl/web/api/document/body/index.html delete mode 100644 files/pl/web/api/document/characterset/index.html delete mode 100644 files/pl/web/api/document/clear/index.html delete mode 100644 files/pl/web/api/document/close/index.html delete mode 100644 files/pl/web/api/document/compatmode/index.html delete mode 100644 files/pl/web/api/document/cookie/index.html delete mode 100644 files/pl/web/api/document/createattribute/index.html delete mode 100644 files/pl/web/api/document/createdocumentfragment/index.html delete mode 100644 files/pl/web/api/document/createelement/index.html delete mode 100644 files/pl/web/api/document/createevent/index.html delete mode 100644 files/pl/web/api/document/createrange/index.html delete mode 100644 files/pl/web/api/document/createtextnode/index.html delete mode 100644 files/pl/web/api/document/defaultview/index.html delete mode 100644 files/pl/web/api/document/designmode/index.html delete mode 100644 files/pl/web/api/document/doctype/index.html delete mode 100644 files/pl/web/api/document/documentelement/index.html delete mode 100644 files/pl/web/api/document/domain/index.html delete mode 100644 files/pl/web/api/document/drag_event/index.html delete mode 100644 files/pl/web/api/document/embeds/index.html delete mode 100644 files/pl/web/api/document/execcommand/index.html delete mode 100644 files/pl/web/api/document/fgcolor/index.html delete mode 100644 files/pl/web/api/document/forms/index.html delete mode 100644 files/pl/web/api/document/getelementbyid/index.html delete mode 100644 files/pl/web/api/document/getelementsbyclassname/index.html delete mode 100644 files/pl/web/api/document/getelementsbyname/index.html delete mode 100644 files/pl/web/api/document/getelementsbytagname/index.html delete mode 100644 files/pl/web/api/document/hasfocus/index.html delete mode 100644 files/pl/web/api/document/head/index.html delete mode 100644 files/pl/web/api/document/height/index.html delete mode 100644 files/pl/web/api/document/images/index.html delete mode 100644 files/pl/web/api/document/implementation/index.html delete mode 100644 files/pl/web/api/document/importnode/index.html delete mode 100644 files/pl/web/api/document/index.html delete mode 100644 files/pl/web/api/document/lastmodified/index.html delete mode 100644 files/pl/web/api/document/linkcolor/index.html delete mode 100644 files/pl/web/api/document/links/index.html delete mode 100644 files/pl/web/api/document/location/index.html delete mode 100644 files/pl/web/api/document/open/index.html delete mode 100644 files/pl/web/api/document/plugins/index.html delete mode 100644 files/pl/web/api/document/queryselector/index.html delete mode 100644 files/pl/web/api/document/referrer/index.html delete mode 100644 files/pl/web/api/document/releasecapture/index.html delete mode 100644 files/pl/web/api/document/stylesheets/index.html delete mode 100644 files/pl/web/api/document/title/index.html delete mode 100644 files/pl/web/api/document/url/index.html delete mode 100644 files/pl/web/api/document/vlinkcolor/index.html delete mode 100644 files/pl/web/api/document/width/index.html delete mode 100644 files/pl/web/api/document/write/index.html delete mode 100644 files/pl/web/api/document/writeln/index.html delete mode 100644 files/pl/web/api/document_object_model/examples/index.html delete mode 100644 files/pl/web/api/document_object_model/index.html delete mode 100644 files/pl/web/api/document_object_model/introduction/index.html delete mode 100644 files/pl/web/api/element/attributes/index.html delete mode 100644 files/pl/web/api/element/childelementcount/index.html delete mode 100644 files/pl/web/api/element/classlist/index.html delete mode 100644 files/pl/web/api/element/classname/index.html delete mode 100644 files/pl/web/api/element/click_event/index.html delete mode 100644 files/pl/web/api/element/clientwidth/index.html delete mode 100644 files/pl/web/api/element/getattribute/index.html delete mode 100644 files/pl/web/api/element/getattributenode/index.html delete mode 100644 files/pl/web/api/element/getattributenodens/index.html delete mode 100644 files/pl/web/api/element/getattributens/index.html delete mode 100644 files/pl/web/api/element/getboundingclientrect/index.html delete mode 100644 files/pl/web/api/element/getelementsbytagnamens/index.html delete mode 100644 files/pl/web/api/element/hasattribute/index.html delete mode 100644 files/pl/web/api/element/hasattributens/index.html delete mode 100644 files/pl/web/api/element/hasattributes/index.html delete mode 100644 files/pl/web/api/element/id/index.html delete mode 100644 files/pl/web/api/element/index.html delete mode 100644 files/pl/web/api/element/innerhtml/index.html delete mode 100644 files/pl/web/api/element/insertadjacenthtml/index.html delete mode 100644 files/pl/web/api/element/keydown_event/index.html delete mode 100644 files/pl/web/api/element/keypress_event/index.html delete mode 100644 files/pl/web/api/element/keyup_event/index.html delete mode 100644 files/pl/web/api/element/localname/index.html delete mode 100644 files/pl/web/api/element/mousedown_event/index.html delete mode 100644 files/pl/web/api/element/mousemove_event/index.html delete mode 100644 files/pl/web/api/element/namespaceuri/index.html delete mode 100644 files/pl/web/api/element/prefix/index.html delete mode 100644 files/pl/web/api/element/removeattribute/index.html delete mode 100644 files/pl/web/api/element/removeattributenode/index.html delete mode 100644 files/pl/web/api/element/removeattributens/index.html delete mode 100644 files/pl/web/api/element/scrollleft/index.html delete mode 100644 files/pl/web/api/element/scrolltop/index.html delete mode 100644 files/pl/web/api/element/scrollwidth/index.html delete mode 100644 files/pl/web/api/element/setattribute/index.html delete mode 100644 files/pl/web/api/element/setattributenode/index.html delete mode 100644 files/pl/web/api/element/setattributenodens/index.html delete mode 100644 files/pl/web/api/element/setattributens/index.html delete mode 100644 files/pl/web/api/element/tagname/index.html delete mode 100644 files/pl/web/api/event/bubbles/index.html delete mode 100644 files/pl/web/api/event/cancelable/index.html delete mode 100644 files/pl/web/api/event/currenttarget/index.html delete mode 100644 files/pl/web/api/event/eventphase/index.html delete mode 100644 files/pl/web/api/event/index.html delete mode 100644 files/pl/web/api/event/initevent/index.html delete mode 100644 files/pl/web/api/event/stoppropagation/index.html delete mode 100644 files/pl/web/api/event/target/index.html delete mode 100644 files/pl/web/api/event/timestamp/index.html delete mode 100644 files/pl/web/api/event/type/index.html delete mode 100644 files/pl/web/api/eventtarget/addeventlistener/index.html delete mode 100644 files/pl/web/api/eventtarget/dispatchevent/index.html delete mode 100644 files/pl/web/api/file/file/index.html delete mode 100644 files/pl/web/api/file/index.html delete mode 100644 files/pl/web/api/geolocation_api/index.html delete mode 100644 files/pl/web/api/globaleventhandlers/index.html delete mode 100644 files/pl/web/api/htmlcanvaselement/capturestream/index.html delete mode 100644 files/pl/web/api/htmlcanvaselement/getcontext/index.html delete mode 100644 files/pl/web/api/htmlcanvaselement/height/index.html delete mode 100644 files/pl/web/api/htmlcanvaselement/index.html delete mode 100644 files/pl/web/api/htmlcanvaselement/width/index.html delete mode 100644 files/pl/web/api/htmlelement/click/index.html delete mode 100644 files/pl/web/api/htmlelement/dir/index.html delete mode 100644 files/pl/web/api/htmlelement/index.html delete mode 100644 files/pl/web/api/htmlelement/lang/index.html delete mode 100644 files/pl/web/api/htmlelement/offsetleft/index.html delete mode 100644 files/pl/web/api/htmlelement/offsetparent/index.html delete mode 100644 files/pl/web/api/htmlelement/offsetwidth/index.html delete mode 100644 files/pl/web/api/htmlformelement/acceptcharset/index.html delete mode 100644 files/pl/web/api/htmlformelement/action/index.html delete mode 100644 files/pl/web/api/htmlformelement/elements/index.html delete mode 100644 files/pl/web/api/htmlformelement/encoding/index.html delete mode 100644 files/pl/web/api/htmlformelement/enctype/index.html delete mode 100644 files/pl/web/api/htmlformelement/index.html delete mode 100644 files/pl/web/api/htmlformelement/length/index.html delete mode 100644 files/pl/web/api/htmlformelement/method/index.html delete mode 100644 files/pl/web/api/htmlformelement/name/index.html delete mode 100644 files/pl/web/api/htmlformelement/reset/index.html delete mode 100644 files/pl/web/api/htmlformelement/submit/index.html delete mode 100644 files/pl/web/api/htmlformelement/target/index.html delete mode 100644 files/pl/web/api/htmliframeelement/index.html delete mode 100644 files/pl/web/api/htmltableelement/caption/index.html delete mode 100644 files/pl/web/api/htmltableelement/index.html delete mode 100644 files/pl/web/api/htmltableelement/tfoot/index.html delete mode 100644 files/pl/web/api/htmltableelement/thead/index.html delete mode 100644 files/pl/web/api/index.html delete mode 100644 files/pl/web/api/keyboardevent/charcode/index.html delete mode 100644 files/pl/web/api/keyboardevent/keycode/index.html delete mode 100644 files/pl/web/api/location/index.html delete mode 100644 files/pl/web/api/location/reload/index.html delete mode 100644 files/pl/web/api/midiaccess/index.html delete mode 100644 files/pl/web/api/mouseevent/altkey/index.html delete mode 100644 files/pl/web/api/mouseevent/button/index.html delete mode 100644 files/pl/web/api/mouseevent/clientx/index.html delete mode 100644 files/pl/web/api/mouseevent/clienty/index.html delete mode 100644 files/pl/web/api/mouseevent/ctrlkey/index.html delete mode 100644 files/pl/web/api/mouseevent/initmouseevent/index.html delete mode 100644 files/pl/web/api/mouseevent/layerx/index.html delete mode 100644 files/pl/web/api/mouseevent/layery/index.html delete mode 100644 files/pl/web/api/mouseevent/metakey/index.html delete mode 100644 files/pl/web/api/mouseevent/pagex/index.html delete mode 100644 files/pl/web/api/mouseevent/pagey/index.html delete mode 100644 files/pl/web/api/mouseevent/relatedtarget/index.html delete mode 100644 files/pl/web/api/mouseevent/screenx/index.html delete mode 100644 files/pl/web/api/mouseevent/screeny/index.html delete mode 100644 files/pl/web/api/mouseevent/shiftkey/index.html delete mode 100644 files/pl/web/api/navigator/buildid/index.html delete mode 100644 files/pl/web/api/navigator/cookieenabled/index.html delete mode 100644 files/pl/web/api/navigator/index.html delete mode 100644 files/pl/web/api/navigator/oscpu/index.html delete mode 100644 files/pl/web/api/navigator/productsub/index.html delete mode 100644 files/pl/web/api/navigator/registerprotocolhandler/index.html delete mode 100644 files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html delete mode 100644 files/pl/web/api/node/appendchild/index.html delete mode 100644 files/pl/web/api/node/childnodes/index.html delete mode 100644 files/pl/web/api/node/clonenode/index.html delete mode 100644 files/pl/web/api/node/firstchild/index.html delete mode 100644 files/pl/web/api/node/haschildnodes/index.html delete mode 100644 files/pl/web/api/node/insertbefore/index.html delete mode 100644 files/pl/web/api/node/lastchild/index.html delete mode 100644 files/pl/web/api/node/nextsibling/index.html delete mode 100644 files/pl/web/api/node/nodename/index.html delete mode 100644 files/pl/web/api/node/nodevalue/index.html delete mode 100644 files/pl/web/api/node/normalize/index.html delete mode 100644 files/pl/web/api/node/ownerdocument/index.html delete mode 100644 files/pl/web/api/node/parentnode/index.html delete mode 100644 files/pl/web/api/node/previoussibling/index.html delete mode 100644 files/pl/web/api/node/removechild/index.html delete mode 100644 files/pl/web/api/node/replacechild/index.html delete mode 100644 files/pl/web/api/node/textcontent/index.html delete mode 100644 files/pl/web/api/nodelist/length/index.html delete mode 100644 files/pl/web/api/notification/index.html delete mode 100644 files/pl/web/api/range/index.html delete mode 100644 files/pl/web/api/screen/colordepth/index.html delete mode 100644 files/pl/web/api/screen/index.html delete mode 100644 files/pl/web/api/selection/addrange/index.html delete mode 100644 files/pl/web/api/selection/anchornode/index.html delete mode 100644 files/pl/web/api/selection/anchoroffset/index.html delete mode 100644 files/pl/web/api/selection/collapse/index.html delete mode 100644 files/pl/web/api/selection/collapsetoend/index.html delete mode 100644 files/pl/web/api/selection/collapsetostart/index.html delete mode 100644 files/pl/web/api/selection/containsnode/index.html delete mode 100644 files/pl/web/api/selection/deletefromdocument/index.html delete mode 100644 files/pl/web/api/selection/extend/index.html delete mode 100644 files/pl/web/api/selection/focusnode/index.html delete mode 100644 files/pl/web/api/selection/focusoffset/index.html delete mode 100644 files/pl/web/api/selection/getrangeat/index.html delete mode 100644 files/pl/web/api/selection/index.html delete mode 100644 files/pl/web/api/selection/iscollapsed/index.html delete mode 100644 files/pl/web/api/selection/rangecount/index.html delete mode 100644 files/pl/web/api/selection/removeallranges/index.html delete mode 100644 files/pl/web/api/selection/removerange/index.html delete mode 100644 files/pl/web/api/selection/selectallchildren/index.html delete mode 100644 files/pl/web/api/selection/tostring/index.html delete mode 100644 files/pl/web/api/setinterval/index.html delete mode 100644 files/pl/web/api/settimeout/index.html delete mode 100644 files/pl/web/api/stylesheet/disabled/index.html delete mode 100644 files/pl/web/api/stylesheet/href/index.html delete mode 100644 files/pl/web/api/stylesheet/media/index.html delete mode 100644 files/pl/web/api/stylesheet/parentstylesheet/index.html delete mode 100644 files/pl/web/api/stylesheet/title/index.html delete mode 100644 files/pl/web/api/stylesheet/type/index.html delete mode 100644 files/pl/web/api/touch_events/index.html delete mode 100644 files/pl/web/api/uievent/inituievent/index.html delete mode 100644 files/pl/web/api/uievent/ischar/index.html delete mode 100644 files/pl/web/api/uievent/view/index.html delete mode 100644 files/pl/web/api/web_storage_api/index.html delete mode 100644 files/pl/web/api/webgl_api/index.html delete mode 100644 files/pl/web/api/websockets_api/index.html delete mode 100644 files/pl/web/api/window/alert/index.html delete mode 100644 files/pl/web/api/window/applicationcache/index.html delete mode 100644 files/pl/web/api/window/blur_event/index.html delete mode 100644 files/pl/web/api/window/closed/index.html delete mode 100644 files/pl/web/api/window/controllers/index.html delete mode 100644 files/pl/web/api/window/defaultstatus/index.html delete mode 100644 files/pl/web/api/window/directories/index.html delete mode 100644 files/pl/web/api/window/document/index.html delete mode 100644 files/pl/web/api/window/dump/index.html delete mode 100644 files/pl/web/api/window/focus/index.html delete mode 100644 files/pl/web/api/window/focus_event/index.html delete mode 100644 files/pl/web/api/window/frameelement/index.html delete mode 100644 files/pl/web/api/window/frames/index.html delete mode 100644 files/pl/web/api/window/getselection/index.html delete mode 100644 files/pl/web/api/window/index.html delete mode 100644 files/pl/web/api/window/load_event/index.html delete mode 100644 files/pl/web/api/window/localstorage/index.html delete mode 100644 files/pl/web/api/window/name/index.html delete mode 100644 files/pl/web/api/window/navigator/index.html delete mode 100644 files/pl/web/api/window/open/index.html delete mode 100644 files/pl/web/api/window/opener/index.html delete mode 100644 files/pl/web/api/window/prompt/index.html delete mode 100644 files/pl/web/api/window/requestanimationframe/index.html delete mode 100644 files/pl/web/api/window/resizeby/index.html delete mode 100644 files/pl/web/api/window/resizeto/index.html delete mode 100644 files/pl/web/api/window/scroll/index.html delete mode 100644 files/pl/web/api/window/scrollbylines/index.html delete mode 100644 files/pl/web/api/window/scrollbypages/index.html delete mode 100644 files/pl/web/api/window/scrollto/index.html delete mode 100644 files/pl/web/api/windoworworkerglobalscope/index.html delete mode 100644 files/pl/web/api/xmlhttprequest/index.html delete mode 100644 files/pl/web/css/-moz-image-region/index.html delete mode 100644 files/pl/web/css/-moz-outline-radius-bottomleft/index.html delete mode 100644 files/pl/web/css/-moz-outline-radius-bottomright/index.html delete mode 100644 files/pl/web/css/-moz-outline-radius-topleft/index.html delete mode 100644 files/pl/web/css/-moz-outline-radius/index.html delete mode 100644 files/pl/web/css/@document/index.html delete mode 100644 files/pl/web/css/@import/index.html delete mode 100644 files/pl/web/css/@media/index.html delete mode 100644 files/pl/web/css/@supports/index.html delete mode 100644 files/pl/web/css/_colon_-moz-first-node/index.html delete mode 100644 files/pl/web/css/_colon_-moz-last-node/index.html delete mode 100644 files/pl/web/css/_colon_active/index.html delete mode 100644 files/pl/web/css/_colon_empty/index.html delete mode 100644 files/pl/web/css/_colon_first-child/index.html delete mode 100644 files/pl/web/css/_colon_hover/index.html delete mode 100644 files/pl/web/css/_colon_lang/index.html delete mode 100644 files/pl/web/css/_colon_last-child/index.html delete mode 100644 files/pl/web/css/_colon_link/index.html delete mode 100644 files/pl/web/css/_colon_not/index.html delete mode 100644 files/pl/web/css/_colon_root/index.html delete mode 100644 files/pl/web/css/_doublecolon_after/index.html delete mode 100644 files/pl/web/css/_doublecolon_before/index.html delete mode 100644 files/pl/web/css/_doublecolon_first-letter/index.html delete mode 100644 files/pl/web/css/appearance/index.html delete mode 100644 files/pl/web/css/background-attachment/index.html delete mode 100644 files/pl/web/css/background-color/index.html delete mode 100644 files/pl/web/css/background-image/index.html delete mode 100644 files/pl/web/css/background-origin/index.html delete mode 100644 files/pl/web/css/background-position/index.html delete mode 100644 files/pl/web/css/background/index.html delete mode 100644 files/pl/web/css/border-bottom-color/index.html delete mode 100644 files/pl/web/css/border-bottom-left-radius/index.html delete mode 100644 files/pl/web/css/border-bottom-right-radius/index.html delete mode 100644 files/pl/web/css/border-bottom-style/index.html delete mode 100644 files/pl/web/css/border-bottom-width/index.html delete mode 100644 files/pl/web/css/border-bottom/index.html delete mode 100644 files/pl/web/css/border-collapse/index.html delete mode 100644 files/pl/web/css/border-color/index.html delete mode 100644 files/pl/web/css/border-left-color/index.html delete mode 100644 files/pl/web/css/border-left-style/index.html delete mode 100644 files/pl/web/css/border-left-width/index.html delete mode 100644 files/pl/web/css/border-left/index.html delete mode 100644 files/pl/web/css/border-radius/index.html delete mode 100644 files/pl/web/css/border-right-color/index.html delete mode 100644 files/pl/web/css/border-right-style/index.html delete mode 100644 files/pl/web/css/border-right-width/index.html delete mode 100644 files/pl/web/css/border-right/index.html delete mode 100644 files/pl/web/css/border-spacing/index.html delete mode 100644 files/pl/web/css/border-style/index.html delete mode 100644 files/pl/web/css/border-top-color/index.html delete mode 100644 files/pl/web/css/border-top-left-radius/index.html delete mode 100644 files/pl/web/css/border-top-right-radius/index.html delete mode 100644 files/pl/web/css/border-top-style/index.html delete mode 100644 files/pl/web/css/border-top-width/index.html delete mode 100644 files/pl/web/css/border-top/index.html delete mode 100644 files/pl/web/css/border-width/index.html delete mode 100644 files/pl/web/css/border/index.html delete mode 100644 files/pl/web/css/bottom/index.html delete mode 100644 files/pl/web/css/box-align/index.html delete mode 100644 files/pl/web/css/box-direction/index.html delete mode 100644 files/pl/web/css/box-flex/index.html delete mode 100644 files/pl/web/css/box-orient/index.html delete mode 100644 files/pl/web/css/box-pack/index.html delete mode 100644 files/pl/web/css/box-shadow/index.html delete mode 100644 files/pl/web/css/box-sizing/index.html delete mode 100644 files/pl/web/css/class_selectors/index.html delete mode 100644 files/pl/web/css/clear/index.html delete mode 100644 files/pl/web/css/clip/index.html delete mode 100644 files/pl/web/css/color/index.html delete mode 100644 files/pl/web/css/content/index.html delete mode 100644 files/pl/web/css/counter-increment/index.html delete mode 100644 files/pl/web/css/counter-reset/index.html delete mode 100644 files/pl/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/pl/web/css/css_colors/index.html delete mode 100644 files/pl/web/css/css_columns/using_multi-column_layouts/index.html delete mode 100644 files/pl/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/pl/web/css/css_flexible_box_layout/index.html delete mode 100644 files/pl/web/css/css_fonts/index.html delete mode 100644 files/pl/web/css/css_grid_layout/index.html delete mode 100644 files/pl/web/css/css_selectors/index.html delete mode 100644 files/pl/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 files/pl/web/css/cursor/index.html delete mode 100644 files/pl/web/css/direction/index.html delete mode 100644 files/pl/web/css/display/index.html delete mode 100644 files/pl/web/css/empty-cells/index.html delete mode 100644 files/pl/web/css/float/index.html delete mode 100644 files/pl/web/css/font-family/index.html delete mode 100644 files/pl/web/css/font-size-adjust/index.html delete mode 100644 files/pl/web/css/font-size/index.html delete mode 100644 files/pl/web/css/font-stretch/index.html delete mode 100644 files/pl/web/css/font-style/index.html delete mode 100644 files/pl/web/css/font-variant/index.html delete mode 100644 files/pl/web/css/font-weight/index.html delete mode 100644 files/pl/web/css/font/index.html delete mode 100644 files/pl/web/css/grid/index.html delete mode 100644 files/pl/web/css/height/index.html delete mode 100644 files/pl/web/css/id_selectors/index.html delete mode 100644 files/pl/web/css/ime-mode/index.html delete mode 100644 files/pl/web/css/index.html delete mode 100644 files/pl/web/css/inheritance/index.html delete mode 100644 files/pl/web/css/initial/index.html delete mode 100644 files/pl/web/css/initial_value/index.html delete mode 100644 files/pl/web/css/letter-spacing/index.html delete mode 100644 files/pl/web/css/list-style-image/index.html delete mode 100644 files/pl/web/css/list-style-position/index.html delete mode 100644 files/pl/web/css/list-style-type/index.html delete mode 100644 files/pl/web/css/margin/index.html delete mode 100644 files/pl/web/css/media_queries/index.html delete mode 100644 files/pl/web/css/media_queries/testing_media_queries/index.html delete mode 100644 files/pl/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/pl/web/css/mozilla_extensions/index.html delete mode 100644 files/pl/web/css/opacity/index.html delete mode 100644 files/pl/web/css/outline-color/index.html delete mode 100644 files/pl/web/css/outline-offset/index.html delete mode 100644 files/pl/web/css/outline/index.html delete mode 100644 files/pl/web/css/page-break-after/index.html delete mode 100644 files/pl/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 files/pl/web/css/reference/index.html delete mode 100644 files/pl/web/css/right/index.html delete mode 100644 files/pl/web/css/shorthand_properties/index.html delete mode 100644 files/pl/web/css/text-transform/index.html delete mode 100644 files/pl/web/css/transform-function/index.html delete mode 100644 files/pl/web/css/transform-function/matrix/index.html delete mode 100644 files/pl/web/css/type_selectors/index.html delete mode 100644 files/pl/web/css/universal_selectors/index.html delete mode 100644 files/pl/web/css/using_css_custom_properties/index.html delete mode 100644 files/pl/web/css/vertical-align/index.html delete mode 100644 files/pl/web/css/webkit_extensions/index.html delete mode 100644 files/pl/web/css/white-space/index.html delete mode 100644 files/pl/web/css/width/index.html delete mode 100644 files/pl/web/css/word-spacing/index.html delete mode 100644 files/pl/web/css/z-index/index.html delete mode 100644 files/pl/web/exslt/index.html delete mode 100644 files/pl/web/guide/ajax/getting_started/index.html delete mode 100644 files/pl/web/guide/ajax/index.html delete mode 100644 files/pl/web/guide/api/index.html delete mode 100644 files/pl/web/guide/graphics/index.html delete mode 100644 files/pl/web/guide/index.html delete mode 100644 files/pl/web/html/block-level_elements/index.html delete mode 100644 files/pl/web/html/element/a/index.html delete mode 100644 files/pl/web/html/element/abbr/index.html delete mode 100644 files/pl/web/html/element/acronym/index.html delete mode 100644 files/pl/web/html/element/address/index.html delete mode 100644 files/pl/web/html/element/applet/index.html delete mode 100644 files/pl/web/html/element/aside/index.html delete mode 100644 files/pl/web/html/element/b/index.html delete mode 100644 files/pl/web/html/element/base/index.html delete mode 100644 files/pl/web/html/element/bdo/index.html delete mode 100644 files/pl/web/html/element/bgsound/index.html delete mode 100644 files/pl/web/html/element/big/index.html delete mode 100644 files/pl/web/html/element/blink/index.html delete mode 100644 files/pl/web/html/element/blockquote/index.html delete mode 100644 files/pl/web/html/element/body/index.html delete mode 100644 files/pl/web/html/element/br/index.html delete mode 100644 files/pl/web/html/element/center/index.html delete mode 100644 files/pl/web/html/element/cite/index.html delete mode 100644 files/pl/web/html/element/code/index.html delete mode 100644 files/pl/web/html/element/dd/index.html delete mode 100644 files/pl/web/html/element/details/index.html delete mode 100644 files/pl/web/html/element/div/index.html delete mode 100644 files/pl/web/html/element/dl/index.html delete mode 100644 files/pl/web/html/element/dt/index.html delete mode 100644 files/pl/web/html/element/em/index.html delete mode 100644 files/pl/web/html/element/head/index.html delete mode 100644 files/pl/web/html/element/hr/index.html delete mode 100644 files/pl/web/html/element/html/index.html delete mode 100644 files/pl/web/html/element/i/index.html delete mode 100644 files/pl/web/html/element/iframe/index.html delete mode 100644 files/pl/web/html/element/index.html delete mode 100644 files/pl/web/html/element/kbd/index.html delete mode 100644 files/pl/web/html/element/li/index.html delete mode 100644 files/pl/web/html/element/link/index.html delete mode 100644 files/pl/web/html/element/marquee/index.html delete mode 100644 files/pl/web/html/element/ol/index.html delete mode 100644 files/pl/web/html/element/p/index.html delete mode 100644 files/pl/web/html/element/q/index.html delete mode 100644 files/pl/web/html/element/ruby/index.html delete mode 100644 files/pl/web/html/element/s/index.html delete mode 100644 files/pl/web/html/element/samp/index.html delete mode 100644 files/pl/web/html/element/section/index.html delete mode 100644 files/pl/web/html/element/small/index.html delete mode 100644 files/pl/web/html/element/span/index.html delete mode 100644 files/pl/web/html/element/strong/index.html delete mode 100644 files/pl/web/html/element/title/index.html delete mode 100644 files/pl/web/html/element/tt/index.html delete mode 100644 files/pl/web/html/element/ul/index.html delete mode 100644 files/pl/web/html/element/video/index.html delete mode 100644 files/pl/web/html/global_attributes/index.html delete mode 100644 files/pl/web/html/global_attributes/tabindex/index.html delete mode 100644 files/pl/web/html/index.html delete mode 100644 files/pl/web/html/inline_elements/index.html delete mode 100644 files/pl/web/html/quirks_mode_and_standards_mode/index.html delete mode 100644 files/pl/web/http/basics_of_http/mime_types/index.html delete mode 100644 files/pl/web/http/cookies/index.html delete mode 100644 files/pl/web/http/headers/index.html delete mode 100644 files/pl/web/http/headers/referrer-policy/index.html delete mode 100644 files/pl/web/http/index.html delete mode 100644 files/pl/web/http/overview/index.html delete mode 100644 files/pl/web/http/status/404/index.html delete mode 100644 files/pl/web/index.html delete mode 100644 files/pl/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 files/pl/web/javascript/about_javascript/index.html delete mode 100644 files/pl/web/javascript/closures/index.html delete mode 100644 files/pl/web/javascript/eventloop/index.html delete mode 100644 files/pl/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/pl/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 files/pl/web/javascript/guide/functions/index.html delete mode 100644 files/pl/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/pl/web/javascript/guide/index.html delete mode 100644 files/pl/web/javascript/guide/introduction/index.html delete mode 100644 files/pl/web/javascript/guide/iterators_and_generators/index.html delete mode 100644 files/pl/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/pl/web/javascript/guide/regular_expressions/index.html delete mode 100644 files/pl/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/pl/web/javascript/index.html delete mode 100644 files/pl/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/pl/web/javascript/javascript_technologies_overview/index.html delete mode 100644 files/pl/web/javascript/reference/about/index.html delete mode 100644 files/pl/web/javascript/reference/classes/constructor/index.html delete mode 100644 files/pl/web/javascript/reference/classes/extends/index.html delete mode 100644 files/pl/web/javascript/reference/classes/index.html delete mode 100644 files/pl/web/javascript/reference/classes/private_class_fields/index.html delete mode 100644 files/pl/web/javascript/reference/classes/public_class_fields/index.html delete mode 100644 files/pl/web/javascript/reference/classes/static/index.html delete mode 100644 files/pl/web/javascript/reference/errors/index.html delete mode 100644 files/pl/web/javascript/reference/errors/invalid_array_length/index.html delete mode 100644 files/pl/web/javascript/reference/errors/invalid_date/index.html delete mode 100644 files/pl/web/javascript/reference/errors/json_bad_parse/index.html delete mode 100644 files/pl/web/javascript/reference/errors/missing_colon_after_property_id/index.html delete mode 100644 files/pl/web/javascript/reference/errors/missing_curly_after_function_body/index.html delete mode 100644 files/pl/web/javascript/reference/errors/missing_initializer_in_const/index.html delete mode 100644 files/pl/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html delete mode 100644 files/pl/web/javascript/reference/errors/missing_semicolon_before_statement/index.html delete mode 100644 files/pl/web/javascript/reference/errors/more_arguments_needed/index.html delete mode 100644 files/pl/web/javascript/reference/errors/not_a_function/index.html delete mode 100644 files/pl/web/javascript/reference/errors/not_defined/index.html delete mode 100644 files/pl/web/javascript/reference/errors/property_access_denied/index.html delete mode 100644 files/pl/web/javascript/reference/errors/unexpected_type/index.html delete mode 100644 files/pl/web/javascript/reference/functions/arguments/callee/index.html delete mode 100644 files/pl/web/javascript/reference/functions/arguments/index.html delete mode 100644 files/pl/web/javascript/reference/functions/arguments/length/index.html delete mode 100644 files/pl/web/javascript/reference/functions/arrow_functions/index.html delete mode 100644 files/pl/web/javascript/reference/functions/default_parameters/index.html delete mode 100644 files/pl/web/javascript/reference/functions/get/index.html delete mode 100644 files/pl/web/javascript/reference/functions/index.html delete mode 100644 files/pl/web/javascript/reference/functions/set/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/concat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/copywithin/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/entries/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/every/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/fill/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/filter/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/find/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/findindex/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/flat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/foreach/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/from/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/includes/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/indexof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/isarray/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/join/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/keys/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/lastindexof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/length/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/map/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/of/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/pop/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/push/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/reduce/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/reduceright/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/reverse/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/shift/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/slice/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/some/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/sort/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/splice/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/tolocalestring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/unshift/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/array/values/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/arraybuffer/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/bigint/asintn/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/bigint/asuintn/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/bigint/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/bigint/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/bigint/valueof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/boolean/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/boolean/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/boolean/valueof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/dataview/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getdate/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getday/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getfullyear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/gethours/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getmilliseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getminutes/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getmonth/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/gettime/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcdate/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcday/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcfullyear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutchours/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcminutes/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcmonth/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getutcseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/getyear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/now/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/parse/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setdate/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setfullyear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/sethours/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setmilliseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setminutes/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setmonth/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/settime/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutcdate/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutcfullyear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutchours/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutcminutes/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutcmonth/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setutcseconds/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/setyear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/togmtstring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/tojson/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/tolocaledatestring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/tolocalestring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/tolocaletimestring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/toutcstring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/utc/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/date/valueof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/decodeuri/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/decodeuricomponent/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/encodeuri/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/encodeuricomponent/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/columnnumber/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/filename/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/linenumber/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/message/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/name/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/stack/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/error/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/evalerror/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/apply/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/arguments/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/bind/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/caller/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/displayname/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/length/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/function/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/infinity/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/isfinite/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/isnan/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/json/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/abs/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/acos/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/asin/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/atan/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/atan2/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/ceil/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/cos/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/e/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/exp/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/floor/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/ln10/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/ln2/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/log/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/log10e/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/log2e/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/max/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/min/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/pi/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/pow/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/random/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/round/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/sign/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/sin/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/sqrt/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/sqrt1_2/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/sqrt2/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/math/tan/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/nan/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/epsilon/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/isinteger/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/isnan/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/max_value/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/min_value/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/nan/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/negative_infinity/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/positive_infinity/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/toexponential/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/tofixed/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/tolocalestring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/toprecision/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/number/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/assign/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/constructor/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/freeze/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/hasownproperty/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/proto/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/seal/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/tolocalestring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/object/valueof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/parsefloat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/parseint/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/promise/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/proxy/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/proxy/proxy/apply/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/proxy/proxy/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/rangeerror/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/exec/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/global/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/ignorecase/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/lastmatch/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/source/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/test/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/regexp/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/set/add/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/set/clear/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/set/delete/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/set/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/anchor/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/big/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/bold/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/charat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/charcodeat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/concat/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/fontcolor/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/fontsize/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/fromcharcode/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/italics/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/link/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/search/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/slice/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/small/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/strike/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/sub/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/substr/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/substring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/sup/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/tolowercase/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/tostring/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/touppercase/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/string/valueof/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/symbol/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/syntaxerror/index.html delete mode 100644 files/pl/web/javascript/reference/global_objects/undefined/index.html delete mode 100644 files/pl/web/javascript/reference/index.html delete mode 100644 files/pl/web/javascript/reference/lexical_grammar/index.html delete mode 100644 files/pl/web/javascript/reference/operators/comma_operator/index.html delete mode 100644 files/pl/web/javascript/reference/operators/conditional_operator/index.html delete mode 100644 files/pl/web/javascript/reference/operators/delete/index.html delete mode 100644 files/pl/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/pl/web/javascript/reference/operators/function/index.html delete mode 100644 files/pl/web/javascript/reference/operators/function_star_/index.html delete mode 100644 files/pl/web/javascript/reference/operators/grouping/index.html delete mode 100644 files/pl/web/javascript/reference/operators/in/index.html delete mode 100644 files/pl/web/javascript/reference/operators/index.html delete mode 100644 files/pl/web/javascript/reference/operators/new.target/index.html delete mode 100644 files/pl/web/javascript/reference/operators/new/index.html delete mode 100644 files/pl/web/javascript/reference/operators/null/index.html delete mode 100644 files/pl/web/javascript/reference/operators/nullish_coalescing_operator/index.html delete mode 100644 files/pl/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 files/pl/web/javascript/reference/operators/operator_precedence/index.html delete mode 100644 files/pl/web/javascript/reference/operators/property_accessors/index.html delete mode 100644 files/pl/web/javascript/reference/operators/spread_syntax/index.html delete mode 100644 files/pl/web/javascript/reference/operators/super/index.html delete mode 100644 files/pl/web/javascript/reference/operators/typeof/index.html delete mode 100644 files/pl/web/javascript/reference/operators/void/index.html delete mode 100644 files/pl/web/javascript/reference/operators/yield/index.html delete mode 100644 files/pl/web/javascript/reference/operators/yield_star_/index.html delete mode 100644 files/pl/web/javascript/reference/statements/async_function/index.html delete mode 100644 files/pl/web/javascript/reference/statements/block/index.html delete mode 100644 files/pl/web/javascript/reference/statements/break/index.html delete mode 100644 files/pl/web/javascript/reference/statements/class/index.html delete mode 100644 files/pl/web/javascript/reference/statements/const/index.html delete mode 100644 files/pl/web/javascript/reference/statements/continue/index.html delete mode 100644 files/pl/web/javascript/reference/statements/debugger/index.html delete mode 100644 files/pl/web/javascript/reference/statements/do...while/index.html delete mode 100644 files/pl/web/javascript/reference/statements/empty/index.html delete mode 100644 files/pl/web/javascript/reference/statements/export/index.html delete mode 100644 files/pl/web/javascript/reference/statements/for...in/index.html delete mode 100644 files/pl/web/javascript/reference/statements/for/index.html delete mode 100644 files/pl/web/javascript/reference/statements/function/index.html delete mode 100644 files/pl/web/javascript/reference/statements/function_star_/index.html delete mode 100644 files/pl/web/javascript/reference/statements/if...else/index.html delete mode 100644 files/pl/web/javascript/reference/statements/import/index.html delete mode 100644 files/pl/web/javascript/reference/statements/index.html delete mode 100644 files/pl/web/javascript/reference/statements/label/index.html delete mode 100644 files/pl/web/javascript/reference/statements/return/index.html delete mode 100644 files/pl/web/javascript/reference/statements/switch/index.html delete mode 100644 files/pl/web/javascript/reference/statements/var/index.html delete mode 100644 files/pl/web/javascript/reference/statements/while/index.html delete mode 100644 files/pl/web/javascript/shells/index.html delete mode 100644 files/pl/web/mathml/index.html delete mode 100644 files/pl/web/opensearch/index.html delete mode 100644 files/pl/web/progressive_web_apps/index.html delete mode 100644 files/pl/web/security/certificate_transparency/index.html delete mode 100644 files/pl/web/security/index.html delete mode 100644 files/pl/web/security/same-origin_policy/index.html delete mode 100644 files/pl/web/security/subresource_integrity/index.html delete mode 100644 files/pl/web/svg/element/a/index.html delete mode 100644 files/pl/web/svg/element/animatetransform/index.html delete mode 100644 files/pl/web/svg/element/circle/index.html delete mode 100644 files/pl/web/svg/element/index.html delete mode 100644 files/pl/web/svg/index.html delete mode 100644 files/pl/web/svg/other_resources/index.html delete mode 100644 files/pl/web/svg/tutorial/index.html delete mode 100644 files/pl/web/svg/tutorial/svg_and_css/index.html delete mode 100644 files/pl/web/svg/tutorial/svg_in_html_introduction/index.html delete mode 100644 files/pl/web/tutorials/index.html delete mode 100644 files/pl/web/xml/index.html delete mode 100644 files/pl/web/xml/xml_introduction/index.html delete mode 100644 files/pl/web/xpath/axes/index.html delete mode 100644 files/pl/web/xpath/functions/boolean/index.html delete mode 100644 files/pl/web/xpath/functions/ceiling/index.html delete mode 100644 files/pl/web/xpath/functions/concat/index.html delete mode 100644 files/pl/web/xpath/functions/contains/index.html delete mode 100644 files/pl/web/xpath/functions/count/index.html delete mode 100644 files/pl/web/xpath/functions/current/index.html delete mode 100644 files/pl/web/xpath/functions/document/index.html delete mode 100644 files/pl/web/xpath/functions/element-available/index.html delete mode 100644 files/pl/web/xpath/functions/false/index.html delete mode 100644 files/pl/web/xpath/functions/floor/index.html delete mode 100644 files/pl/web/xpath/functions/format-number/index.html delete mode 100644 files/pl/web/xpath/functions/function-available/index.html delete mode 100644 files/pl/web/xpath/functions/generate-id/index.html delete mode 100644 files/pl/web/xpath/functions/id/index.html delete mode 100644 files/pl/web/xpath/functions/index.html delete mode 100644 files/pl/web/xpath/functions/key/index.html delete mode 100644 files/pl/web/xpath/functions/lang/index.html delete mode 100644 files/pl/web/xpath/functions/last/index.html delete mode 100644 files/pl/web/xpath/functions/local-name/index.html delete mode 100644 files/pl/web/xpath/functions/name/index.html delete mode 100644 files/pl/web/xpath/functions/namespace-uri/index.html delete mode 100644 files/pl/web/xpath/functions/normalize-space/index.html delete mode 100644 files/pl/web/xpath/functions/not/index.html delete mode 100644 files/pl/web/xpath/functions/number/index.html delete mode 100644 files/pl/web/xpath/functions/position/index.html delete mode 100644 files/pl/web/xpath/functions/round/index.html delete mode 100644 files/pl/web/xpath/functions/starts-with/index.html delete mode 100644 files/pl/web/xpath/functions/string-length/index.html delete mode 100644 files/pl/web/xpath/functions/string/index.html delete mode 100644 files/pl/web/xpath/functions/substring-after/index.html delete mode 100644 files/pl/web/xpath/functions/substring-before/index.html delete mode 100644 files/pl/web/xpath/functions/substring/index.html delete mode 100644 files/pl/web/xpath/functions/sum/index.html delete mode 100644 files/pl/web/xpath/functions/system-property/index.html delete mode 100644 files/pl/web/xpath/functions/translate/index.html delete mode 100644 files/pl/web/xpath/functions/true/index.html delete mode 100644 files/pl/web/xpath/functions/unparsed-entity-url/index.html delete mode 100644 files/pl/web/xpath/index.html delete mode 100644 files/pl/web/xslt/element/apply-imports/index.html delete mode 100644 files/pl/web/xslt/element/apply-templates/index.html delete mode 100644 files/pl/web/xslt/element/attribute-set/index.html delete mode 100644 files/pl/web/xslt/element/attribute/index.html delete mode 100644 files/pl/web/xslt/element/call-template/index.html delete mode 100644 files/pl/web/xslt/element/choose/index.html delete mode 100644 files/pl/web/xslt/element/comment/index.html delete mode 100644 files/pl/web/xslt/element/copy-of/index.html delete mode 100644 files/pl/web/xslt/element/copy/index.html delete mode 100644 files/pl/web/xslt/element/decimal-format/index.html delete mode 100644 files/pl/web/xslt/element/element/index.html delete mode 100644 files/pl/web/xslt/element/fallback/index.html delete mode 100644 files/pl/web/xslt/element/for-each/index.html delete mode 100644 files/pl/web/xslt/element/if/index.html delete mode 100644 files/pl/web/xslt/element/import/index.html delete mode 100644 files/pl/web/xslt/element/include/index.html delete mode 100644 files/pl/web/xslt/element/index.html delete mode 100644 files/pl/web/xslt/element/key/index.html delete mode 100644 files/pl/web/xslt/element/message/index.html delete mode 100644 files/pl/web/xslt/element/namespace-alias/index.html delete mode 100644 files/pl/web/xslt/element/number/index.html delete mode 100644 files/pl/web/xslt/element/otherwise/index.html delete mode 100644 files/pl/web/xslt/element/output/index.html delete mode 100644 files/pl/web/xslt/element/param/index.html delete mode 100644 files/pl/web/xslt/element/preserve-space/index.html delete mode 100644 files/pl/web/xslt/element/processing-instruction/index.html delete mode 100644 files/pl/web/xslt/element/sort/index.html delete mode 100644 files/pl/web/xslt/element/strip-space/index.html delete mode 100644 files/pl/web/xslt/element/stylesheet/index.html delete mode 100644 files/pl/web/xslt/element/template/index.html delete mode 100644 files/pl/web/xslt/element/text/index.html delete mode 100644 files/pl/web/xslt/element/transform/index.html delete mode 100644 files/pl/web/xslt/element/value-of/index.html delete mode 100644 files/pl/web/xslt/element/variable/index.html delete mode 100644 files/pl/web/xslt/element/when/index.html delete mode 100644 files/pl/web/xslt/element/with-param/index.html delete mode 100644 files/pl/web/xslt/index.html delete mode 100644 files/pl/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html delete mode 100644 files/pl/web/xslt/transforming_xml_with_xslt/index.html delete mode 100644 files/pl/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html delete mode 100644 files/pl/webassembly/index.html diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt deleted file mode 100644 index 25fbda1a82fce0..00000000000000 --- a/files/de/_redirects.txt +++ /dev/null @@ -1,848 +0,0 @@ -# DO NOT EDIT THIS FILE MANUALLY. -# Use the CLI instead: -# -# yarn content add-redirect -# -# FROM-URL TO-URL -/de/docs/AJAX /de/docs/Web/Guide/AJAX -/de/docs/Apps/Progressiv /de/docs/Web/Progressive_web_apps -/de/docs/Barrierefreiheit/ARIA /de/docs/Web/Accessibility/ARIA -/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen /de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions -/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets /de/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -/de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) /de/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching -/de/docs/CSS /de/docs/Web/CSS -/de/docs/CSS/-moz-border-radius /de/docs/Web/CSS/border-radius -/de/docs/CSS/-moz-border-radius-bottomleft /de/docs/Web/CSS/border-bottom-left-radius -/de/docs/CSS/-moz-border-radius-bottomright /de/docs/Web/CSS/border-bottom-right-radius -/de/docs/CSS/-moz-border-radius-topleft /de/docs/Web/CSS/border-top-left-radius -/de/docs/CSS/-moz-border-radius-topright /de/docs/Web/CSS/border-top-right-radius -/de/docs/CSS/-moz-box-shadow /de/docs/Web/CSS/box-shadow -/de/docs/CSS/-moz-image-region /de/docs/Web/CSS/-moz-image-region -/de/docs/CSS/-moz-user-input /de/docs/Web/CSS/-moz-user-input -/de/docs/CSS/-moz-user-modify /de/docs/Web/CSS/user-modify -/de/docs/CSS/-moz-user-select /de/docs/Web/CSS/user-select -/de/docs/CSS/:empty /de/docs/Web/CSS/:empty -/de/docs/CSS/:lang /de/docs/Web/CSS/:lang -/de/docs/CSS/@import /de/docs/Web/CSS/@import -/de/docs/CSS/Attributselektoren /de/docs/Web/CSS/Attribute_selectors -/de/docs/CSS/Border-bottom-width /de/docs/Web/CSS/Border-bottom-width -/de/docs/CSS/Border-left-width /de/docs/Web/CSS/Border-left-width -/de/docs/CSS/Border-right-width /de/docs/Web/CSS/Border-right-width -/de/docs/CSS/Border-top-width /de/docs/Web/CSS/Border-top-width -/de/docs/CSS/Bottom /de/docs/Web/CSS/Bottom -/de/docs/CSS/Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/de/docs/CSS/CSS_Werte_Geltung /de/docs/Web/CSS -/de/docs/CSS/CSS_animated_properties /de/docs/Web/CSS -/de/docs/CSS/CSS_animierbare_Eigenschaften /de/docs/Web/CSS -/de/docs/CSS/CSS_prozentuale_werte /de/docs/Web/CSS -/de/docs/CSS/CSS_werte_syntax /de/docs/Web/CSS -/de/docs/CSS/Farben /de/docs/Web/CSS/color_value -/de/docs/CSS/Initialwert /de/docs/Web/CSS/initial_value -/de/docs/CSS/Left /de/docs/Web/CSS/Left -/de/docs/CSS/Right /de/docs/Web/CSS/Right -/de/docs/CSS/Top /de/docs/Web/CSS/Top -/de/docs/CSS/Vererbung /de/docs/Web/CSS/inheritance -/de/docs/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Value_definition_syntax -/de/docs/CSS/background /de/docs/Web/CSS/background -/de/docs/CSS/background-attachment /de/docs/Web/CSS/background-attachment -/de/docs/CSS/background-clip /de/docs/Web/CSS/background-clip -/de/docs/CSS/background-color /de/docs/Web/CSS/background-color -/de/docs/CSS/background-image /de/docs/Web/CSS/background-image -/de/docs/CSS/background-origin /de/docs/Web/CSS/background-origin -/de/docs/CSS/background-position /de/docs/Web/CSS/background-position -/de/docs/CSS/background-repeat /de/docs/Web/CSS/background-repeat -/de/docs/CSS/background-size /de/docs/Web/CSS/background-size -/de/docs/CSS/berechneter_Wert /de/docs/Web/CSS/computed_value -/de/docs/CSS/border /de/docs/Web/CSS/border -/de/docs/CSS/border-bottom /de/docs/Web/CSS/border-bottom -/de/docs/CSS/border-bottom-color /de/docs/Web/CSS/border-bottom-color -/de/docs/CSS/border-bottom-left-radius /de/docs/Web/CSS/border-bottom-left-radius -/de/docs/CSS/border-bottom-right-radius /de/docs/Web/CSS/border-bottom-right-radius -/de/docs/CSS/border-bottom-style /de/docs/Web/CSS/border-bottom-style -/de/docs/CSS/border-collapse /de/docs/Web/CSS/border-collapse -/de/docs/CSS/border-color /de/docs/Web/CSS/border-color -/de/docs/CSS/border-left /de/docs/Web/CSS/border-left -/de/docs/CSS/border-left-color /de/docs/Web/CSS/border-left-color -/de/docs/CSS/border-left-style /de/docs/Web/CSS/border-left-style -/de/docs/CSS/border-radius /de/docs/Web/CSS/border-radius -/de/docs/CSS/border-right /de/docs/Web/CSS/border-right -/de/docs/CSS/border-right-color /de/docs/Web/CSS/border-right-color -/de/docs/CSS/border-right-style /de/docs/Web/CSS/border-right-style -/de/docs/CSS/border-spacing /de/docs/Web/CSS/border-spacing -/de/docs/CSS/border-style /de/docs/Web/CSS/border-style -/de/docs/CSS/border-top /de/docs/Web/CSS/border-top -/de/docs/CSS/border-top-color /de/docs/Web/CSS/border-top-color -/de/docs/CSS/border-top-left-radius /de/docs/Web/CSS/border-top-left-radius -/de/docs/CSS/border-top-right-radius /de/docs/Web/CSS/border-top-right-radius -/de/docs/CSS/border-top-style /de/docs/Web/CSS/border-top-style -/de/docs/CSS/border-width /de/docs/Web/CSS/border-width -/de/docs/CSS/box-shadow /de/docs/Web/CSS/box-shadow -/de/docs/CSS/box-sizing /de/docs/Web/CSS/box-sizing -/de/docs/CSS/calc /de/docs/Web/CSS/calc -/de/docs/CSS/clear /de/docs/Web/CSS/clear -/de/docs/CSS/color /de/docs/Web/CSS/color -/de/docs/CSS/cursor /de/docs/Web/CSS/cursor -/de/docs/CSS/display /de/docs/Web/CSS/display -/de/docs/CSS/empty-cells /de/docs/Web/CSS/empty-cells -/de/docs/CSS/float /de/docs/Web/CSS/float -/de/docs/CSS/font /de/docs/Web/CSS/font -/de/docs/CSS/height /de/docs/Web/CSS/height -/de/docs/CSS/hyphens /de/docs/Web/CSS/hyphens -/de/docs/CSS/list-style /de/docs/Web/CSS/list-style -/de/docs/CSS/margin /de/docs/Web/CSS/margin -/de/docs/CSS/margin-bottom /de/docs/Web/CSS/margin-bottom -/de/docs/CSS/margin-left /de/docs/Web/CSS/margin-left -/de/docs/CSS/margin-right /de/docs/Web/CSS/margin-right -/de/docs/CSS/margin-top /de/docs/Web/CSS/margin-top -/de/docs/CSS/max-height /de/docs/Web/CSS/max-height -/de/docs/CSS/max-width /de/docs/Web/CSS/max-width -/de/docs/CSS/min-height /de/docs/Web/CSS/min-height -/de/docs/CSS/min-width /de/docs/Web/CSS/min-width -/de/docs/CSS/opacity /de/docs/Web/CSS/opacity -/de/docs/CSS/overflow /de/docs/Web/CSS/overflow -/de/docs/CSS/padding /de/docs/Web/CSS/padding -/de/docs/CSS/padding-bottom /de/docs/Web/CSS/padding-bottom -/de/docs/CSS/padding-left /de/docs/Web/CSS/padding-left -/de/docs/CSS/padding-right /de/docs/Web/CSS/padding-right -/de/docs/CSS/padding-top /de/docs/Web/CSS/padding-top -/de/docs/CSS/page-break-after /de/docs/Web/CSS/page-break-after -/de/docs/CSS/page-break-before /de/docs/Web/CSS/page-break-before -/de/docs/CSS/page-break-inside /de/docs/Web/CSS/page-break-inside -/de/docs/CSS/position /de/docs/Web/CSS/position -/de/docs/CSS/resize /de/docs/Web/CSS/resize -/de/docs/CSS/text-align /de/docs/Web/CSS/text-align -/de/docs/CSS/text-decoration /de/docs/Web/CSS/text-decoration -/de/docs/CSS/text-decoration-color /de/docs/Web/CSS/text-decoration-color -/de/docs/CSS/text-shadow /de/docs/Web/CSS/text-shadow -/de/docs/CSS/time /de/docs/Web/CSS/time -/de/docs/CSS/vertical-align /de/docs/Web/CSS/vertical-align -/de/docs/CSS/visibility /de/docs/Web/CSS/visibility -/de/docs/CSS/width /de/docs/Web/CSS/width -/de/docs/CSS3_Columns /de/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts -/de/docs/CSS:-moz-border-radius /de/docs/Web/CSS/border-radius -/de/docs/CSS:-moz-border-radius-bottomleft /de/docs/Web/CSS/border-bottom-left-radius -/de/docs/CSS:-moz-border-radius-bottomright /de/docs/Web/CSS/border-bottom-right-radius -/de/docs/CSS:-moz-border-radius-topleft /de/docs/Web/CSS/border-top-left-radius -/de/docs/CSS:-moz-border-radius-topright /de/docs/Web/CSS/border-top-right-radius -/de/docs/CSS:-moz-user-input /de/docs/Web/CSS/-moz-user-input -/de/docs/CSS:-moz-user-modify /de/docs/Web/CSS/user-modify -/de/docs/CSS:-moz-user-select /de/docs/Web/CSS/user-select -/de/docs/CSS::empty /de/docs/Web/CSS/:empty -/de/docs/CSS::lang /de/docs/Web/CSS/:lang -/de/docs/CSS:@import /de/docs/Web/CSS/@import -/de/docs/CSS:Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/de/docs/CSS:Farben /de/docs/Web/CSS/color_value -/de/docs/CSS:background /de/docs/Web/CSS/background -/de/docs/CSS:background-attachment /de/docs/Web/CSS/background-attachment -/de/docs/CSS:background-color /de/docs/Web/CSS/background-color -/de/docs/CSS:background-image /de/docs/Web/CSS/background-image -/de/docs/CSS:background-position /de/docs/Web/CSS/background-position -/de/docs/CSS:background-repeat /de/docs/Web/CSS/background-repeat -/de/docs/CSS:border /de/docs/Web/CSS/border -/de/docs/CSS:border-bottom /de/docs/Web/CSS/border-bottom -/de/docs/CSS:border-bottom-color /de/docs/Web/CSS/border-bottom-color -/de/docs/CSS:border-bottom-style /de/docs/Web/CSS/border-bottom-style -/de/docs/CSS:border-collapse /de/docs/Web/CSS/border-collapse -/de/docs/CSS:border-color /de/docs/Web/CSS/border-color -/de/docs/CSS:border-left /de/docs/Web/CSS/border-left -/de/docs/CSS:border-left-color /de/docs/Web/CSS/border-left-color -/de/docs/CSS:border-left-style /de/docs/Web/CSS/border-left-style -/de/docs/CSS:border-right /de/docs/Web/CSS/border-right -/de/docs/CSS:border-right-color /de/docs/Web/CSS/border-right-color -/de/docs/CSS:border-right-style /de/docs/Web/CSS/border-right-style -/de/docs/CSS:border-spacing /de/docs/Web/CSS/border-spacing -/de/docs/CSS:border-style /de/docs/Web/CSS/border-style -/de/docs/CSS:border-top /de/docs/Web/CSS/border-top -/de/docs/CSS:border-top-color /de/docs/Web/CSS/border-top-color -/de/docs/CSS:border-top-style /de/docs/Web/CSS/border-top-style -/de/docs/CSS:border-width /de/docs/Web/CSS/border-width -/de/docs/CSS:clear /de/docs/Web/CSS/clear -/de/docs/CSS:color /de/docs/Web/CSS/color -/de/docs/CSS:cursor /de/docs/Web/CSS/cursor -/de/docs/CSS:display /de/docs/Web/CSS/display -/de/docs/CSS:empty-cells /de/docs/Web/CSS/empty-cells -/de/docs/CSS:float /de/docs/Web/CSS/float -/de/docs/CSS:font /de/docs/Web/CSS/font -/de/docs/CSS:height /de/docs/Web/CSS/height -/de/docs/CSS:list-style /de/docs/Web/CSS/list-style -/de/docs/CSS:margin /de/docs/Web/CSS/margin -/de/docs/CSS:margin-bottom /de/docs/Web/CSS/margin-bottom -/de/docs/CSS:margin-left /de/docs/Web/CSS/margin-left -/de/docs/CSS:margin-right /de/docs/Web/CSS/margin-right -/de/docs/CSS:margin-top /de/docs/Web/CSS/margin-top -/de/docs/CSS:max-height /de/docs/Web/CSS/max-height -/de/docs/CSS:max-width /de/docs/Web/CSS/max-width -/de/docs/CSS:min-height /de/docs/Web/CSS/min-height -/de/docs/CSS:min-width /de/docs/Web/CSS/min-width -/de/docs/CSS:opacity /de/docs/Web/CSS/opacity -/de/docs/CSS:overflow /de/docs/Web/CSS/overflow -/de/docs/CSS:padding /de/docs/Web/CSS/padding -/de/docs/CSS:padding-bottom /de/docs/Web/CSS/padding-bottom -/de/docs/CSS:padding-left /de/docs/Web/CSS/padding-left -/de/docs/CSS:padding-right /de/docs/Web/CSS/padding-right -/de/docs/CSS:padding-top /de/docs/Web/CSS/padding-top -/de/docs/CSS:page-break-after /de/docs/Web/CSS/page-break-after -/de/docs/CSS:page-break-before /de/docs/Web/CSS/page-break-before -/de/docs/CSS:page-break-inside /de/docs/Web/CSS/page-break-inside -/de/docs/CSS:position /de/docs/Web/CSS/position -/de/docs/CSS:text-align /de/docs/Web/CSS/text-align -/de/docs/CSS:text-decoration /de/docs/Web/CSS/text-decoration -/de/docs/CSS:vertical-align /de/docs/Web/CSS/vertical-align -/de/docs/CSS:visibility /de/docs/Web/CSS/visibility -/de/docs/CSS:width /de/docs/Web/CSS/width -/de/docs/CSS_Referenz /de/docs/Web/CSS/Reference -/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen /de/docs/Web/CSS/Mozilla_Extensions -/de/docs/CSS_in_HTML_einbinden /de/docs/Web/CSS/@import -/de/docs/DOM /de/docs/Web/API/Document_Object_Model -/de/docs/DOM/File.fileSize /de/docs/Web/API/Blob/size -/de/docs/DOM/File.name /de/docs/Web/API/File/name -/de/docs/DOM/Node /en-US/docs/Web/API/Node -/de/docs/DOM/Node.childNodes /de/docs/Web/API/Node/childNodes -/de/docs/DOM/Node.firstChild /de/docs/Web/API/Node/firstChild -/de/docs/DOM/Node.lastChild /de/docs/Web/API/Node/lastChild -/de/docs/DOM/Node.nextSibling /de/docs/Web/API/Node/nextSibling -/de/docs/DOM/Node.parentNode /de/docs/Web/API/Node/parentNode -/de/docs/DOM/Node.previousSibling /de/docs/Web/API/Node/previousSibling -/de/docs/DOM/Node.replaceChild /de/docs/Web/API/Node/replaceChild -/de/docs/DOM/Node.textContent /de/docs/Web/API/Node/textContent -/de/docs/DOM/XMLHttpRequest /de/docs/Web/API/XMLHttpRequest -/de/docs/DOM/document /de/docs/Web/API/Document -/de/docs/DOM/document.createElement /de/docs/Web/API/Document/createElement -/de/docs/DOM/element /de/docs/Web/API/Element -/de/docs/DOM/window /en-US/docs/Web/API/Window -/de/docs/DOM/window.dump /de/docs/Web/API/Window/dump -/de/docs/DOM/window.openDialog /de/docs/Web/API/Window/openDialog -/de/docs/DOM/window.setTimeout /de/docs/Web/API/setTimeout -/de/docs/DragDrop /de/docs/Web/API/HTML_Drag_and_Drop_API -/de/docs/Erweiterungen_für_Firefox_3_aktualisieren /de/docs/Mozilla/Firefox/Releases/3/Updating_extensions -/de/docs/Farbverläufe_in_CSS /de/docs/Web/CSS/CSS_Images/Using_CSS_gradients -/de/docs/Firefox_1.5_Beta /de/docs/Mozilla/Firefox/Releases/1.5 -/de/docs/Firefox_1.5_für_Entwickler /de/docs/Mozilla/Firefox/Releases/1.5 -/de/docs/Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests /de/docs/Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests -/de/docs/Firefox_3.5_für_Entwickler /de/docs/Mozilla/Firefox/Releases/3.5 -/de/docs/Firefox_3_für_Entwickler /de/docs/Mozilla/Firefox/Releases/3 -/de/docs/Glossary/502 /de/docs/Web/HTTP/Status/502 -/de/docs/Glossary/Abstraktion /de/docs/Glossary/Abstraction -/de/docs/Glossary/Algorithmus /de/docs/Glossary/Algorithm -/de/docs/Glossary/Anweisung /de/docs/Glossary/Statement -/de/docs/Glossary/Asynchron /de/docs/Glossary/Asynchronous -/de/docs/Glossary/Bandbreite /de/docs/Glossary/Bandwidth -/de/docs/Glossary/CORS-zugelassener-anfrage-header /de/docs/Glossary/CORS-safelisted_request_header -/de/docs/Glossary/CSS_Praeprozessor /de/docs/Glossary/CSS_preprocessor -/de/docs/Glossary/Datenkapselung /de/docs/Glossary/Encapsulation -/de/docs/Glossary/Funktion_erster-Klasse /de/docs/Glossary/First-class_Function -/de/docs/Glossary/Herstellerpräfix /de/docs/Glossary/Vendor_Prefix -/de/docs/Glossary/Informationsarchitektur /de/docs/Glossary/Information_architecture -/de/docs/Glossary/Klasse /de/docs/Glossary/Class -/de/docs/Glossary/Konstruktor /de/docs/Glossary/Constructor -/de/docs/Glossary/Leeres_Element /de/docs/Glossary/Empty_element -/de/docs/Glossary/Objekt /de/docs/Glossary/Object -/de/docs/Glossary/Protokoll /de/docs/Glossary/Protocol -/de/docs/Glossary/Symbol /de/docs/Web/JavaScript/Reference/Global_Objects/Symbol -/de/docs/Glossary/Typ /de/docs/Glossary/Type -/de/docs/Glossary/einfache_datenelemente /de/docs/Glossary/Primitive -/de/docs/Glossary/verbotener_header_name /de/docs/Glossary/Forbidden_header_name -/de/docs/HTML /de/docs/Web/HTML -/de/docs/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elements -/de/docs/HTML/Element /de/docs/Web/HTML/Element -/de/docs/HTML/Element/Input /de/docs/Web/HTML/Element/Input -/de/docs/HTML/Element/b /de/docs/Web/HTML/Element/b -/de/docs/HTML/Element/br /de/docs/Web/HTML/Element/br -/de/docs/HTML/Element/canvas /de/docs/Web/HTML/Element/canvas -/de/docs/HTML/Element/datalist /de/docs/Web/HTML/Element/datalist -/de/docs/HTML/Element/h1 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/h1-h6 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/h2 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/h3 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/h4 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/h5 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/h6 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML/Element/head /de/docs/Web/API/HTMLHeadElement -/de/docs/HTML/Element/hr /de/docs/Web/HTML/Element/hr -/de/docs/HTML/Element/html /de/docs/Web/HTML/Element/html -/de/docs/HTML/Element/iframe /de/docs/Web/HTML/Element/iframe -/de/docs/HTML/Element/li /de/docs/Web/HTML/Element/li -/de/docs/HTML/Element/noscript /de/docs/Web/HTML/Element/noscript -/de/docs/HTML/Element/ol /de/docs/Web/HTML/Element/ol -/de/docs/HTML/Element/p /de/docs/Web/HTML/Element/p -/de/docs/HTML/Element/pre /de/docs/Web/HTML/Element/pre -/de/docs/HTML/Element/strong /de/docs/Web/HTML/Element/strong -/de/docs/HTML/Element/time /de/docs/Web/HTML/Element/time -/de/docs/HTML/Element/ul /de/docs/Web/HTML/Element/ul -/de/docs/HTML/Element/var /de/docs/Web/HTML/Element/var -/de/docs/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elements -/de/docs/HTML:Element /de/docs/Web/HTML/Element -/de/docs/HTML:Element:b /de/docs/Web/HTML/Element/b -/de/docs/HTML:Element:h1 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML:Element:h2 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML:Element:h3 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML:Element:h4 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML:Element:h5 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML:Element:h6 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/HTML:Element:head /de/docs/Web/API/HTMLHeadElement -/de/docs/HTML:Element:hr /de/docs/Web/HTML/Element/hr -/de/docs/HTML:Element:html /de/docs/Web/HTML/Element/html -/de/docs/HTML:Element:iframe /de/docs/Web/HTML/Element/iframe -/de/docs/HTML:Element:li /de/docs/Web/HTML/Element/li -/de/docs/HTML:Element:ol /de/docs/Web/HTML/Element/ol -/de/docs/HTML:Element:p /de/docs/Web/HTML/Element/p -/de/docs/HTML:Element:strong /de/docs/Web/HTML/Element/strong -/de/docs/HTML:Element:ul /de/docs/Web/HTML/Element/ul -/de/docs/HTML:Element:var /de/docs/Web/HTML/Element/var -/de/docs/Hauptseite /de/docs/Web -/de/docs/IndexedDB /de/docs/Web/API/IndexedDB_API -/de/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria /de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria -/de/docs/IndexedDB/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/Using_IndexedDB -/de/docs/JavaScript /de/docs/Web/JavaScript -/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/A_re-introduction_to_JavaScript -/de/docs/JavaScript/Guide /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators -/de/docs/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures -/de/docs/JavaScript/Guide/Funktionen /de/docs/Web/JavaScript/Guide/Functions -/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Working_with_Objects -/de/docs/JavaScript/Guide/Regular_Expressions /de/docs/Web/JavaScript/Guide/Regular_Expressions -/de/docs/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/de/docs/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/Guide/Vererbung_ueberdacht /de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/de/docs/JavaScript/Guide/Vordefinierte_Kernobjekte /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/JavaScript/Guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/Guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/Javascript_lernen_für_Anfänger /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/Reference /de/docs/Web/JavaScript/Reference -/de/docs/JavaScript/Reference/Global_Objects /de/docs/Web/JavaScript/Reference/Global_Objects -/de/docs/JavaScript/Reference/Global_Objects/Array /de/docs/Web/JavaScript/Reference/Global_Objects/Array -/de/docs/JavaScript/Reference/Global_Objects/Array/isArray /de/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray -/de/docs/JavaScript/Reference/Global_Objects/Array/pop /de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/de/docs/JavaScript/Reference/Global_Objects/Array/push /de/docs/Web/JavaScript/Reference/Global_Objects/Array/push -/de/docs/JavaScript/Reference/Global_Objects/Array/reverse /de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse -/de/docs/JavaScript/Reference/Global_Objects/Array/shift /de/docs/Web/JavaScript/Reference/Global_Objects/Array/shift -/de/docs/JavaScript/Reference/Global_Objects/Date /de/docs/Web/JavaScript/Reference/Global_Objects/Date -/de/docs/JavaScript/Reference/Global_Objects/Date/now /de/docs/Web/JavaScript/Reference/Global_Objects/Date/now -/de/docs/JavaScript/Reference/Global_Objects/NaN /de/docs/Web/JavaScript/Reference/Global_Objects/NaN -/de/docs/JavaScript/Reference/Global_Objects/Number /de/docs/Web/JavaScript/Reference/Global_Objects/Number -/de/docs/JavaScript/Reference/Global_Objects/Number/EPSILON /de/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON -/de/docs/JavaScript/Reference/Global_Objects/Object /de/docs/Web/JavaScript/Reference/Global_Objects/Object -/de/docs/JavaScript/Reference/Global_Objects/Object/constructor /de/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor -/de/docs/JavaScript/Reference/Global_Objects/Object/is /de/docs/Web/JavaScript/Reference/Global_Objects/Object/is -/de/docs/JavaScript/Reference/Global_Objects/RegExp /de/docs/Web/JavaScript/Reference/Global_Objects/RegExp -/de/docs/JavaScript/Reference/Global_Objects/String /de/docs/Web/JavaScript/Reference/Global_Objects/String -/de/docs/JavaScript/Reference/Global_Objects/String/replace /de/docs/Web/JavaScript/Reference/Global_Objects/String/replace -/de/docs/JavaScript/Speicherverwaltung /de/docs/Web/JavaScript/Memory_Management -/de/docs/JavaScript/java_guide /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/javascript_guide /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/javascript_guide/Anweisungen /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/de/docs/JavaScript/javascript_guide/Ausdrücke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators -/de/docs/JavaScript/javascript_guide/Funktionen /de/docs/Web/JavaScript/Guide/Functions -/de/docs/JavaScript/javascript_guide/Javascript_Übersicht /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Working_with_Objects -/de/docs/JavaScript/javascript_guide/Reguläre_Ausdrücke /de/docs/Web/JavaScript/Guide/Regular_Expressions -/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/javascript_guide/ueber_javascript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/javascript_guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/javascript_guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps -/de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors -/de/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/de/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators -/de/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/de/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements /en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -/de/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors -/de/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured -/de/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units -/de/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks -/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis /de/docs/Learn/Getting_started_with_the_web/JavaScript_basics -/de/docs/Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert /de/docs/Learn/Getting_started_with_the_web/How_the_Web_works -/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen /de/docs/Learn/Getting_started_with_the_web/Dealing_with_files -/de/docs/Learn/HTML/Einführung_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML -/de/docs/Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -/de/docs/Learn/HTML/Einführung_in_HTML/Document_and_website_structure /de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure -/de/docs/Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -/de/docs/Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks /de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -/de/docs/Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML -/de/docs/Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung /de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -/de/docs/Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen /de/docs/Learn/HTML/Introduction_to_HTML/Getting_started -/de/docs/Learn/HTML/Einführung_in_HTML/Marking_up_a_letter /de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -/de/docs/Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content /de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -/de/docs/Learn/HTML/Forms /de/docs/Learn/Forms -/de/docs/Learn/JavaScript/Bausteine /de/docs/Learn/JavaScript/Building_blocks -/de/docs/Learn/JavaScript/First_steps/Erster_Blick /de/docs/Learn/JavaScript/First_steps/A_first_splash -/de/docs/Learn/JavaScript/First_steps/Was_ist_JavaScript /de/docs/Learn/JavaScript/First_steps/What_is_JavaScript -/de/docs/Learn/JavaScript/First_steps/lustige_geschichten_generator /de/docs/Learn/JavaScript/First_steps/Silly_story_generator -/de/docs/Learn/JavaScript/Objects/Object-oriented_JS /de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript -/de/docs/Learn/Server-side/Erste_Schritte /de/docs/Learn/Server-side/First_steps -/de/docs/Lokalisierung /de/docs/Glossary/Localization -/de/docs/MDN/About /de/docs/MDN/Writing_guidelines -/de/docs/MDN/Contribute/Feedback /de/docs/MDN/Community -/de/docs/MDN/Contribute/Getting_started /de/docs/MDN/Community/Contributing/Getting_started -/de/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live /de/docs/MDN/Writing_guidelines/Page_structures/Live_samples -/de/docs/MDN/Contribute/Howto/Tag /de/docs/MDN/Writing_guidelines/Howto/Tag -/de/docs/MDN/Contribute/Structures /de/docs/MDN/Writing_guidelines/Page_structures -/de/docs/MDN/Erste_Schritte /de/docs/MDN/Community/Contributing/Getting_started -/de/docs/MDN/Feedback /de/docs/MDN/Community -/de/docs/MDN/Kuma /de/docs/MDN/Yari -/de/docs/MDN/Kuma/Beheben_von_KumaScript_Fehlern /de/docs/MDN/Tools/KumaScript/Troubleshooting -/de/docs/MDN/Structures /de/docs/MDN/Writing_guidelines/Page_structures -/de/docs/MDN/nutzer_leitfaden /de/docs/MDN/Tools -/de/docs/MDN/Über /de/docs/MDN/Writing_guidelines -/de/docs/MDN_at_ten /de/docs/MDN/At_ten -/de/docs/MDN_at_ten/History_of_MDN /de/docs/MDN/At_ten/History_of_MDN -/de/docs/Mozilla/Add-ons/WebExtensions/API/Lesezeich. /de/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks -/de/docs/Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API /de/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API -/de/docs/Mozilla/Add-ons/WebExtensions/Beispiele /de/docs/Mozilla/Add-ons/WebExtensions/Examples -/de/docs/Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung /de/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -/de/docs/Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung /de/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension -/de/docs/OpenSearch_Plugin_für_Firefox_erstellen /de/docs/Web/OpenSearch -/de/docs/SVG /de/docs/Web/SVG -/de/docs/SVG/Element /de/docs/Web/SVG/Element -/de/docs/SVG/Element/animate /de/docs/Web/SVG/Element/animate -/de/docs/SVG/Element/foreignObject /de/docs/Web/SVG/Element/foreignObject -/de/docs/SVG/Tutorial /de/docs/Web/SVG/Tutorial -/de/docs/SVG/Tutorial/Einführung /de/docs/Web/SVG/Tutorial/Introduction -/de/docs/Suche_Plugins /de/docs/Web/OpenSearch -/de/docs/Tools https://firefox-source-docs.mozilla.org/devtools-user/index.html -/de/docs/Tools/3D_View https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html -/de/docs/Tools/3D_untersuchung https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html -/de/docs/Tools/Accessibility_inspector https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html -/de/docs/Tools/Barrierefreiheits_inspektor https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html -/de/docs/Tools/Browser_Toolbox https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html -/de/docs/Tools/Browser_Werkzeuge https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html -/de/docs/Tools/Debugger https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html -/de/docs/Tools/Debugger/How_to https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/index.html -/de/docs/Tools/Debugger/How_to/Open_the_debugger https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/open_the_debugger/index.html -/de/docs/Tools/Debugger/Source_map_errors https://firefox-source-docs.mozilla.org/devtools-user/debugger/source_map_errors/index.html -/de/docs/Tools/JSON_viewer https://firefox-source-docs.mozilla.org/devtools-user/json_viewer/index.html -/de/docs/Tools/Keyboard_shortcuts https://firefox-source-docs.mozilla.org/devtools-user/keyboard_shortcuts/index.html -/de/docs/Tools/Network_Monitor https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html -/de/docs/Tools/Page_Inspector https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html -/de/docs/Tools/Page_Inspector/How_to https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/index.html -/de/docs/Tools/Page_Inspector/How_to/Event_Listener_untersuchen https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_event_listeners/index.html -/de/docs/Tools/Page_Inspector/How_to/Examine_event_listeners https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_event_listeners/index.html -/de/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html -/de/docs/Tools/Page_Inspector/How_to/Raster_Layout_untersuchen https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html -/de/docs/Tools/Performance https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html -/de/docs/Tools/Remote_Debugging https://firefox-source-docs.mozilla.org/devtools-user/remote_debugging/index.html -/de/docs/Tools/Remote_Debugging/Firefox_for_Android https://firefox-source-docs.mozilla.org/devtools-user/remote_debugging/firefox_for_android/index.html -/de/docs/Tools/Responsive_Design_Mode https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html -/de/docs/Tools/Seiten_Inspektor https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html -/de/docs/Tools/Seiten_Inspektor/Style_panel https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html -/de/docs/Tools/Shader-Editor https://firefox-source-docs.mozilla.org/devtools-user/shader_editor/index.html -/de/docs/Tools/Shader_Editor https://firefox-source-docs.mozilla.org/devtools-user/shader_editor/index.html -/de/docs/Tools/Storage_Inspector https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/index.html -/de/docs/Tools/Storage_Inspector/Cookies https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/cookies/index.html -/de/docs/Tools/Style_Editor https://firefox-source-docs.mozilla.org/devtools-user/style_editor/index.html -/de/docs/Tools/Web_Console https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html -/de/docs/Tools/Web_Console/Helpers https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html -/de/docs/Tools/Web_Konsole https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html -/de/docs/Tools/Web_Konsole/Hilfe https://firefox-source-docs.mozilla.org/devtools-user/web_console/helpers/index.html -/de/docs/Tools/bildschirmgroessen-testen https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html -/de/docs/Tools/netzwerkanalyse https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html -/de/docs/Updating_web_applications_for_Firefox_3 /de/docs/Mozilla/Firefox/Releases/3/Updating_web_applications -/de/docs/Verwenden_des_Cache_beim_Firefox_1.5 /de/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching -/de/docs/Web/API/AudioContext/decodeAudioData /de/docs/Web/API/BaseAudioContext/decodeAudioData -/de/docs/Web/API/CSSRule.cssText /de/docs/Web/API/CSSRule/cssText -/de/docs/Web/API/Element.querySelector /de/docs/Web/API/Element/querySelector -/de/docs/Web/API/EventListener /de/docs/Web/API/EventTarget/addEventListener -/de/docs/Web/API/File/Typ /de/docs/Web/API/File/type -/de/docs/Web/API/File/Using_files_from_web_applications /de/docs/Web/API/File_API/Using_files_from_web_applications -/de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File_API/Using_files_from_web_applications -/de/docs/Web/API/File/fileSize /de/docs/Web/API/Blob/size -/de/docs/Web/API/FileReader/onload /de/docs/Web/API/FileReader/load_event -/de/docs/Web/API/GlobalEventHandlers/onclick /de/docs/Web/API/Element/click_event -/de/docs/Web/API/GlobalEventHandlers/onresize /de/docs/Web/API/Window/resize_event -/de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/Using_IndexedDB -/de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers -/de/docs/Web/API/Node.cloneNode /de/docs/Web/API/Node/cloneNode -/de/docs/Web/API/Node/innerText /de/docs/Web/API/HTMLElement/innerText -/de/docs/Web/API/Vollbild_API /de/docs/Web/API/Fullscreen_API -/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -/de/docs/Web/API/WebGL_API/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -/de/docs/Web/API/WebGL_API/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -/de/docs/Web/API/WebSocket/onclose /de/docs/Web/API/WebSocket/close_event -/de/docs/Web/API/Window.alert /de/docs/Web/API/Window/alert -/de/docs/Web/API/Window/ondevicemotion /de/docs/Web/API/Window/devicemotion_event -/de/docs/Web/API/Window/performance /de/docs/Web/API/performance_property -/de/docs/Web/API/Window/setTimeout /de/docs/Web/API/setTimeout -/de/docs/Web/API/WindowBase64 /de/docs/Web/API/WindowOrWorkerGlobalScope -/de/docs/Web/API/WindowBase64/btoa /de/docs/Web/API/btoa -/de/docs/Web/API/WindowEventHandlers/onafterprint /de/docs/Web/API/Window/afterprint_event -/de/docs/Web/API/WindowEventHandlers/onhashchange /de/docs/Web/API/Window/hashchange_event -/de/docs/Web/API/WindowEventHandlers/onpopstate /de/docs/Web/API/Window/popstate_event -/de/docs/Web/API/WindowOrWorkerGlobalScope/btoa /de/docs/Web/API/btoa -/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /de/docs/Web/API/setTimeout -/de/docs/Web/API/WindowTimers/setTimeout /de/docs/Web/API/setTimeout -/de/docs/Web/API/document.documentElement /de/docs/Web/API/Document/documentElement -/de/docs/Web/Barrierefreiheit/ARIA /de/docs/Web/Accessibility/ARIA -/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen /de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions -/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Techniken /de/docs/Web/Accessibility/ARIA/ARIA_Techniques -/de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets /de/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -/de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten /de/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets -/de/docs/Web/CSS/-moz-alias /de/docs/Web/CSS/cursor -/de/docs/Web/CSS/-moz-appearance /de/docs/Web/CSS/appearance -/de/docs/Web/CSS/-moz-border-radius /de/docs/Web/CSS/border-radius -/de/docs/Web/CSS/-moz-border-radius-bottomleft /de/docs/Web/CSS/border-bottom-left-radius -/de/docs/Web/CSS/-moz-border-radius-bottomright /de/docs/Web/CSS/border-bottom-right-radius -/de/docs/Web/CSS/-moz-border-radius-topleft /de/docs/Web/CSS/border-top-left-radius -/de/docs/Web/CSS/-moz-border-radius-topright /de/docs/Web/CSS/border-top-right-radius -/de/docs/Web/CSS/-moz-box-flex /de/docs/Web/CSS/box-flex -/de/docs/Web/CSS/-moz-box-ordinal-group /de/docs/Web/CSS/box-ordinal-group -/de/docs/Web/CSS/-moz-box-pack /de/docs/Web/CSS/box-pack -/de/docs/Web/CSS/-moz-box-shadow /de/docs/Web/CSS/box-shadow -/de/docs/Web/CSS/-moz-context-menu /de/docs/Web/CSS/cursor -/de/docs/Web/CSS/-moz-copy /de/docs/Web/CSS/cursor -/de/docs/Web/CSS/-moz-spinning /de/docs/Web/CSS/cursor -/de/docs/Web/CSS/-moz-user-modify /de/docs/Web/CSS/user-modify -/de/docs/Web/CSS/-moz-user-select /de/docs/Web/CSS/user-select -/de/docs/Web/CSS/-webkit-mask-origin /de/docs/Web/CSS/mask-origin -/de/docs/Web/CSS/-webkit-mask-repeat /de/docs/Web/CSS/mask-repeat -/de/docs/Web/CSS/-webkit-print-color-adjust /de/docs/Web/CSS/print-color-adjust -/de/docs/Web/CSS/:-moz-placeholder /de/docs/Web/CSS/:placeholder-shown -/de/docs/Web/CSS/:-moz-ui-invalid /de/docs/Web/CSS/:user-invalid -/de/docs/Web/CSS/:-webkit-autofill /de/docs/Web/CSS/:autofill -/de/docs/Web/CSS/Adjacent_sibling_selectors /de/docs/Web/CSS/Adjacent_sibling_combinator -/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren /de/docs/Web/CSS/Adjacent_sibling_combinator -/de/docs/Web/CSS/Attributselektoren /de/docs/Web/CSS/Attribute_selectors -/de/docs/Web/CSS/Aural /de/docs/Web/CSS/@media/aural -/de/docs/Web/CSS/Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/de/docs/Web/CSS/CSS_Background_and_Borders /de/docs/Web/CSS/CSS_Backgrounds_and_Borders -/de/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator -/de/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator -/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -/de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -/de/docs/Web/CSS/CSS_Boxmodell /de/docs/Web/CSS/CSS_Box_Model -/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern /de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -/de/docs/Web/CSS/CSS_Color /de/docs/Web/CSS/CSS_Colors -/de/docs/Web/CSS/CSS_Colors/farbauswahl_werkzeug /de/docs/Web/CSS/CSS_Colors/Color_picker_tool -/de/docs/Web/CSS/CSS_Compositing_and_Blending /de/docs/Web/CSS/Compositing_and_Blending -/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items -/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden /de/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters -/de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung /de/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation -/de/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /de/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters -/de/docs/Web/CSS/CSS_Masken /de/docs/Web/CSS/CSS_Masking -/de/docs/Web/CSS/CSS_Namensräume /de/docs/Web/CSS/CSS_Namespaces -/de/docs/Web/CSS/CSS_Referenz /de/docs/Web/CSS/Reference -/de/docs/Web/CSS/CSS_Referenz/::backdrop /de/docs/Web/CSS/::backdrop -/de/docs/Web/CSS/CSS_Referenz/ /de/docs/Web/CSS/basic-shape -/de/docs/Web/CSS/CSS_Referenz/@viewport /de/docs/Web/CSS/@viewport -/de/docs/Web/CSS/CSS_Referenz/Mozilla_CSS_Erweiterungen /de/docs/Web/CSS/Mozilla_Extensions -/de/docs/Web/CSS/CSS_Referenz/Webkit_Extensions /de/docs/Web/CSS/WebKit_Extensions -/de/docs/Web/CSS/CSS_Referenz/line-break /de/docs/Web/CSS/line-break -/de/docs/Web/CSS/CSS_Referenz/mix-blend-mode /de/docs/Web/CSS/mix-blend-mode -/de/docs/Web/CSS/CSS_Textdekoration /de/docs/Web/CSS/CSS_Text_Decoration -/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden /de/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -/de/docs/Web/CSS/CSS_Typen /de/docs/Web/CSS/CSS_Types -/de/docs/Web/CSS/CSS_Werte_Geltung /de/docs/Web/CSS -/de/docs/Web/CSS/CSS_animierbare_Eigenschaften /de/docs/Web/CSS -/de/docs/Web/CSS/CSS_prozentuale_werte /de/docs/Web/CSS -/de/docs/Web/CSS/CSS_werte_syntax /de/docs/Web/CSS -/de/docs/Web/CSS/Child_selectors /de/docs/Web/CSS/Child_combinator -/de/docs/Web/CSS/Farben /de/docs/Web/CSS/color_value -/de/docs/Web/CSS/ID-Selektoren /de/docs/Web/CSS/ID_selectors -/de/docs/Web/CSS/Initialwert /de/docs/Web/CSS/initial_value -/de/docs/Web/CSS/Kindselektoren /de/docs/Web/CSS/Child_combinator -/de/docs/Web/CSS/Klassenselektoren /de/docs/Web/CSS/Class_selectors -/de/docs/Web/CSS/Motion_Path /de/docs/Web/CSS/CSS_Motion_Path -/de/docs/Web/CSS/Pseudoklasse /de/docs/Web/CSS/Pseudo-classes -/de/docs/Web/CSS/Referenz /de/docs/Web/CSS/Reference -/de/docs/Web/CSS/Spezifität /de/docs/Web/CSS/Specificity -/de/docs/Web/CSS/Vererbung /de/docs/Web/CSS/inheritance -/de/docs/Web/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Value_definition_syntax -/de/docs/Web/CSS/attr() /de/docs/Web/CSS/attr -/de/docs/Web/CSS/berechneter_Wert /de/docs/Web/CSS/computed_value -/de/docs/Web/CSS/calc() /de/docs/Web/CSS/calc -/de/docs/Web/CSS/ersetztes_Element /de/docs/Web/CSS/Replaced_element -/de/docs/Web/CSS/grid-gap /de/docs/Web/CSS/gap -/de/docs/Web/CSS/hidden /de/docs/Web/CSS/visibility -/de/docs/Web/CSS/tatsächlicher_Wert /de/docs/Web/CSS/actual_value -/de/docs/Web/CSS/transform-function/translate3d() /de/docs/Web/CSS/transform-function/translate3d -/de/docs/Web/CSS/transform-function/translateY() /de/docs/Web/CSS/transform-function/translateY -/de/docs/Web/CSS/transform-function/translateZ() /de/docs/Web/CSS/transform-function/translateZ -/de/docs/Web/CSS/url() /de/docs/Web/CSS/url -/de/docs/Web/CSS/visible /de/docs/Web/CSS/visibility -/de/docs/Web/CSS/word-wrap /de/docs/Web/CSS/overflow-wrap -/de/docs/Web/Demos_of_open_web_technologies /de/docs/Web/Demos -/de/docs/Web/Events/DOMContentLoaded /de/docs/Web/API/Window/DOMContentLoaded_event -/de/docs/Web/Events/change /de/docs/Web/API/HTMLElement/change_event -/de/docs/Web/Events/fullscreenchange /de/docs/Web/API/Document/fullscreenchange_event -/de/docs/Web/Events/load /de/docs/Web/API/Window/load_event -/de/docs/Web/Events/readystatechange /de/docs/Web/API/Document/readystatechange_event -/de/docs/Web/Events/submit /de/docs/Web/API/HTMLFormElement/submit_event -/de/docs/Web/Events/webglcontextcreationerror /de/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event -/de/docs/Web/Events/webglcontextlost /de/docs/Web/API/HTMLCanvasElement/webglcontextlost_event -/de/docs/Web/Events/webglcontextrestored /de/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event -/de/docs/Web/Guide/AJAX/Erste_Schritte /de/docs/Web/Guide/AJAX/Getting_Started -/de/docs/Web/Guide/CSS /de/docs/Learn/CSS -/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/de/docs/Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung /de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/de/docs/Web/Guide/CSS/Getting_started/Lesbares_CSS /de/docs/Learn/CSS/First_steps/How_CSS_is_structured -/de/docs/Web/Guide/CSS/Getting_started/Selektoren /de/docs/Learn/CSS/Building_blocks/Selectors -/de/docs/Web/Guide/CSS/Getting_started/Textstyles /de/docs/Learn/CSS/Styling_text/Fundamentals -/de/docs/Web/Guide/CSS/Getting_started/Was_ist_CSS /de/docs/Learn/CSS/First_steps/How_CSS_works -/de/docs/Web/Guide/CSS/Scaling_background_images /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -/de/docs/Web/Guide/DOM/Manipulating_the_browser_history /de/docs/Web/API/History_API -/de/docs/Web/Guide/HTML /de/docs/Learn/HTML -/de/docs/Web/Guide/HTML/Canvas_Tutorial /de/docs/Web/API/Canvas_API/Tutorial -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Advanced_animations /de/docs/Web/API/Canvas_API/Tutorial/Advanced_animations -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors /de/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Basic_animations /de/docs/Web/API/Canvas_API/Tutorial/Basic_animations -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Bilder /de/docs/Web/API/Canvas_API/Tutorial/Using_images -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren /de/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Drawing_text /de/docs/Web/API/Canvas_API/Tutorial/Drawing_text -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen /de/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes -/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen /de/docs/Web/API/Canvas_API/Tutorial/Basic_usage -/de/docs/Web/Guide/HTML/Content_Editable /de/docs/Web/Guide/HTML/Editable_content -/de/docs/Web/Guide/HTML/Einführung /de/docs/Learn/HTML/Introduction_to_HTML -/de/docs/Web/Guide/HTML/Inhaltskategorien /de/docs/Web/Guide/HTML/Content_categories -/de/docs/Web/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elements -/de/docs/Web/HTML/Canvas /de/docs/Web/API/Canvas_API -/de/docs/Web/HTML/Element/h1 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/h1-h6 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/h2 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/h3 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/h4 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/h5 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/h6 /de/docs/Web/HTML/Element/Heading_Elements -/de/docs/Web/HTML/Element/head /de/docs/Web/API/HTMLHeadElement -/de/docs/Web/HTML/Globale_Attribute /de/docs/Web/HTML/Global_attributes -/de/docs/Web/HTML/Globale_Attribute/accesskey /de/docs/Web/HTML/Global_attributes/accesskey -/de/docs/Web/HTML/Globale_Attribute/autocapitalize /de/docs/Web/HTML/Global_attributes/autocapitalize -/de/docs/Web/HTML/Globale_Attribute/class /de/docs/Web/HTML/Global_attributes/class -/de/docs/Web/HTML/Globale_Attribute/contenteditable /de/docs/Web/HTML/Global_attributes/contenteditable -/de/docs/Web/HTML/Globale_Attribute/dir /de/docs/Web/HTML/Global_attributes/dir -/de/docs/Web/HTML/Globale_Attribute/draggable /de/docs/Web/HTML/Global_attributes/draggable -/de/docs/Web/HTML/Globale_Attribute/hidden /de/docs/Web/HTML/Global_attributes/hidden -/de/docs/Web/HTML/Globale_Attribute/id /de/docs/Web/HTML/Global_attributes/id -/de/docs/Web/HTML/Globale_Attribute/inputmode /de/docs/Web/HTML/Global_attributes/inputmode -/de/docs/Web/HTML/Globale_Attribute/kontextmenu /de/docs/Web/HTML/Global_attributes/contextmenu -/de/docs/Web/HTML/Globale_Attribute/lang /de/docs/Web/HTML/Global_attributes/lang -/de/docs/Web/HTML/Globale_Attribute/style /de/docs/Web/HTML/Global_attributes/style -/de/docs/Web/HTML/Globale_Attribute/tabindex /de/docs/Web/HTML/Global_attributes/tabindex -/de/docs/Web/HTML/Globale_Attribute/title /de/docs/Web/HTML/Global_attributes/title -/de/docs/Web/HTML/Globale_Attribute/translate /de/docs/Web/HTML/Global_attributes/translate -/de/docs/Web/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elements -/de/docs/Web/HTML/Referenz /de/docs/Web/HTML/Reference -/de/docs/Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight /de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight -/de/docs/Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben /de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin -/de/docs/Web/HTTP/Caching_FAQ /de/docs/Web/HTTP/Caching -/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften /de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties -/de/docs/Web/JavaScript/Datenstrukturen /de/docs/Web/JavaScript/Data_structures -/de/docs/Web/JavaScript/Datenstruktures /de/docs/Web/JavaScript/Data_structures -/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/A_re-introduction_to_JavaScript -/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators -/de/docs/Web/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures -/de/docs/Web/JavaScript/Guide/Einführung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/Guide/Funktionen /de/docs/Web/JavaScript/Guide/Functions -/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Working_with_Objects -/de/docs/Web/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/de/docs/Web/JavaScript/Guide/Textformatierung /de/docs/Web/JavaScript/Guide/Text_formatting -/de/docs/Web/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/Guide/Vererbung_ueberdacht /de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/de/docs/Web/JavaScript/Guide/Vergleiche_auf_Gleichheit_und_deren_Verwendung /de/docs/Web/JavaScript/Equality_comparisons_and_sameness -/de/docs/Web/JavaScript/Guide/Vordefinierte_Kernobjekte /de/docs/Web/JavaScript/Guide -/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen /de/docs/Web/JavaScript/Guide/Loops_and_iteration -/de/docs/Web/JavaScript/Guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/Guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/JavaScript_technologieuebersicht /de/docs/Web/JavaScript/JavaScript_technologies_overview -/de/docs/Web/JavaScript/Javascript_lernen_für_Anfänger /de/docs/Web/JavaScript/Guide -/de/docs/Web/JavaScript/Reference/Anweisungen /de/docs/Web/JavaScript/Reference/Statements -/de/docs/Web/JavaScript/Reference/Anweisungen/const /de/docs/Web/JavaScript/Reference/Statements/const -/de/docs/Web/JavaScript/Reference/Anweisungen/for...in /de/docs/Web/JavaScript/Reference/Statements/for...in -/de/docs/Web/JavaScript/Reference/Anweisungen/let /de/docs/Web/JavaScript/Reference/Statements/let -/de/docs/Web/JavaScript/Reference/Anweisungen/var /de/docs/Web/JavaScript/Reference/Statements/var -/de/docs/Web/JavaScript/Reference/Fehler /de/docs/Web/JavaScript/Reference/Errors -/de/docs/Web/JavaScript/Reference/Fehler/Already_has_pragma /de/docs/Web/JavaScript/Reference/Errors/Already_has_pragma -/de/docs/Web/JavaScript/Reference/Fehler/Array_sort_argument /de/docs/Web/JavaScript/Reference/Errors/Array_sort_argument -/de/docs/Web/JavaScript/Reference/Fehler/Bad_octal /de/docs/Web/JavaScript/Reference/Errors/Bad_octal -/de/docs/Web/JavaScript/Reference/Fehler/Bad_radix /de/docs/Web/JavaScript/Reference/Errors/Bad_radix -/de/docs/Web/JavaScript/Reference/Fehler/Bad_regexp_flag /de/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag -/de/docs/Web/JavaScript/Reference/Fehler/Bad_return_or_yield /de/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield -/de/docs/Web/JavaScript/Reference/Fehler/Called_on_incompatible_type /de/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type -/de/docs/Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init /de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init -/de/docs/Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible /de/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible -/de/docs/Web/JavaScript/Reference/Fehler/Cant_delete /de/docs/Web/JavaScript/Reference/Errors/Cant_delete -/de/docs/Web/JavaScript/Reference/Fehler/Cant_redefine_property /de/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property -/de/docs/Web/JavaScript/Reference/Fehler/Cyclic_object_value /de/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value -/de/docs/Web/JavaScript/Reference/Fehler/Dead_object /de/docs/Web/JavaScript/Reference/Errors/Dead_object -/de/docs/Web/JavaScript/Reference/Fehler/Delete_in_strict_mode /de/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode -/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_String_generics /de/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics -/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage /de/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage -/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_expression_closures /de/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures -/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_octal /de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal -/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma /de/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma -/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat /de/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat -/de/docs/Web/JavaScript/Reference/Fehler/Equal_as_assign /de/docs/Web/JavaScript/Reference/Errors/Equal_as_assign -/de/docs/Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated /de/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated -/de/docs/Web/JavaScript/Reference/Fehler/Getter_only /de/docs/Web/JavaScript/Reference/Errors/Getter_only -/de/docs/Web/JavaScript/Reference/Fehler/Identifier_after_number /de/docs/Web/JavaScript/Reference/Errors/Identifier_after_number -/de/docs/Web/JavaScript/Reference/Fehler/Illegal_character /de/docs/Web/JavaScript/Reference/Errors/Illegal_character -/de/docs/Web/JavaScript/Reference/Fehler/Invalid_array_length /de/docs/Web/JavaScript/Reference/Errors/Invalid_array_length -/de/docs/Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side /de/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side -/de/docs/Web/JavaScript/Reference/Fehler/Invalid_const_assignment /de/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment -/de/docs/Web/JavaScript/Reference/Fehler/Invalid_date /de/docs/Web/JavaScript/Reference/Errors/Invalid_date -/de/docs/Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer /de/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer -/de/docs/Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer /de/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer -/de/docs/Web/JavaScript/Reference/Fehler/JSON_bad_parse /de/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse -/de/docs/Web/JavaScript/Reference/Fehler/Malformed_URI /de/docs/Web/JavaScript/Reference/Errors/Malformed_URI -/de/docs/Web/JavaScript/Reference/Fehler/Malformed_formal_parameter /de/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter -/de/docs/Web/JavaScript/Reference/Fehler/Missing_bracket_after_list /de/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list -/de/docs/Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id /de/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id -/de/docs/Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body /de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body -/de/docs/Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list /de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list -/de/docs/Web/JavaScript/Reference/Fehler/Missing_formal_parameter /de/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter -/de/docs/Web/JavaScript/Reference/Fehler/Missing_initializer_in_const /de/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const -/de/docs/Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator /de/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator -/de/docs/Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list /de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list -/de/docs/Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition /de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition -/de/docs/Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement /de/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement -/de/docs/Web/JavaScript/Reference/Fehler/More_arguments_needed /de/docs/Web/JavaScript/Reference/Errors/More_arguments_needed -/de/docs/Web/JavaScript/Reference/Fehler/Negative_repetition_count /de/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count -/de/docs/Web/JavaScript/Reference/Fehler/No_non-null_object /de/docs/Web/JavaScript/Reference/Errors/No_non-null_object -/de/docs/Web/JavaScript/Reference/Fehler/No_properties /de/docs/Web/JavaScript/Reference/Errors/No_properties -/de/docs/Web/JavaScript/Reference/Fehler/No_variable_name /de/docs/Web/JavaScript/Reference/Errors/No_variable_name -/de/docs/Web/JavaScript/Reference/Fehler/Non_configurable_array_element /de/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element -/de/docs/Web/JavaScript/Reference/Fehler/Not_a_codepoint /de/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint -/de/docs/Web/JavaScript/Reference/Fehler/Not_a_constructor /de/docs/Web/JavaScript/Reference/Errors/Not_a_constructor -/de/docs/Web/JavaScript/Reference/Fehler/Not_a_function /de/docs/Web/JavaScript/Reference/Errors/Not_a_function -/de/docs/Web/JavaScript/Reference/Fehler/Not_defined /de/docs/Web/JavaScript/Reference/Errors/Not_defined -/de/docs/Web/JavaScript/Reference/Fehler/Precision_range /de/docs/Web/JavaScript/Reference/Errors/Precision_range -/de/docs/Web/JavaScript/Reference/Fehler/Property_access_denied /de/docs/Web/JavaScript/Reference/Errors/Property_access_denied -/de/docs/Web/JavaScript/Reference/Fehler/Read-only /de/docs/Web/JavaScript/Reference/Errors/Read-only -/de/docs/Web/JavaScript/Reference/Fehler/Redeclared_parameter /de/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter -/de/docs/Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value /de/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value -/de/docs/Web/JavaScript/Reference/Fehler/Reserved_identifier /de/docs/Web/JavaScript/Reference/Errors/Reserved_identifier -/de/docs/Web/JavaScript/Reference/Fehler/Resulting_string_too_large /de/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large -/de/docs/Web/JavaScript/Reference/Fehler/Stmt_after_return /de/docs/Web/JavaScript/Reference/Errors/Stmt_after_return -/de/docs/Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params /de/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params -/de/docs/Web/JavaScript/Reference/Fehler/Too_much_recursion /de/docs/Web/JavaScript/Reference/Errors/Too_much_recursion -/de/docs/Web/JavaScript/Reference/Fehler/Undeclared_var /de/docs/Web/JavaScript/Reference/Errors/Undeclared_var -/de/docs/Web/JavaScript/Reference/Fehler/Undefined_prop /de/docs/Web/JavaScript/Reference/Errors/Undefined_prop -/de/docs/Web/JavaScript/Reference/Fehler/Unexpected_token /de/docs/Web/JavaScript/Reference/Errors/Unexpected_token -/de/docs/Web/JavaScript/Reference/Fehler/Unexpected_type /de/docs/Web/JavaScript/Reference/Errors/Unexpected_type -/de/docs/Web/JavaScript/Reference/Fehler/Unnamed_function_statement /de/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement -/de/docs/Web/JavaScript/Reference/Fehler/Unterminated_string_literal /de/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal -/de/docs/Web/JavaScript/Reference/Fehler/Var_hides_argument /de/docs/Web/JavaScript/Reference/Errors/Var_hides_argument -/de/docs/Web/JavaScript/Reference/Fehler/in_operator_no_object /de/docs/Web/JavaScript/Reference/Errors/in_operator_no_object -/de/docs/Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand /de/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand -/de/docs/Web/JavaScript/Reference/Fehler/is_not_iterable /de/docs/Web/JavaScript/Reference/Errors/is_not_iterable -/de/docs/Web/JavaScript/Reference/Functions/Methoden_Definitionen /de/docs/Web/JavaScript/Reference/Functions/Method_definitions -/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen /de/docs/Web/JavaScript/Reference/Functions/Arrow_functions -/de/docs/Web/JavaScript/Reference/Functions/rest_parameter /de/docs/Web/JavaScript/Reference/Functions/rest_parameters -/de/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten /de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat -/de/docs/Web/JavaScript/Reference/Global_Objects/Atomics/wake /de/docs/Web/JavaScript/Reference/Global_Objects/Atomics/notify -/de/docs/Web/JavaScript/Reference/Global_Objects/Collator /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator -/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/compare /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare -/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/resolvedOptions /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions -/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf -/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format -/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts -/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions -/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf -/de/docs/Web/JavaScript/Reference/Global_Objects/Math/math.random /de/docs/Web/JavaScript/Reference/Global_Objects/Math/random -/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/format /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format -/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf -/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource /de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString -/de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules -/de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf -/de/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft /de/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart -/de/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight /de/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd -/de/docs/Web/JavaScript/Reference/Global_Objects/String/suchen /de/docs/Web/JavaScript/Reference/Global_Objects/String/search -/de/docs/Web/JavaScript/Reference/Global_Objects/null /de/docs/Web/JavaScript/Reference/Operators/null -/de/docs/Web/JavaScript/Reference/Klassen /de/docs/Web/JavaScript/Reference/Classes -/de/docs/Web/JavaScript/Reference/Klassen/constructor /de/docs/Web/JavaScript/Reference/Classes/constructor -/de/docs/Web/JavaScript/Reference/Klassen/extends /de/docs/Web/JavaScript/Reference/Classes/extends -/de/docs/Web/JavaScript/Reference/Klassen/static /de/docs/Web/JavaScript/Reference/Classes/static -/de/docs/Web/JavaScript/Reference/Methods_Index /de/docs/Web/JavaScript/Reference -/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /de/docs/Web/JavaScript/Reference/Operators -/de/docs/Web/JavaScript/Reference/Operators/Dekrement /de/docs/Web/JavaScript/Reference/Operators/Decrement -/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung /de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment -/de/docs/Web/JavaScript/Reference/Operators/Inkrement /de/docs/Web/JavaScript/Reference/Operators/Increment -/de/docs/Web/JavaScript/Reference/Operators/Modulo /de/docs/Web/JavaScript/Reference/Operators/Remainder -/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer /de/docs/Web/JavaScript/Reference/Operators/Object_initializer -/de/docs/Web/JavaScript/Reference/Operators/Optionale_Verkettung /de/docs/Web/JavaScript/Reference/Operators/Optional_chaining -/de/docs/Web/JavaScript/Reference/Properties_Index /de/docs/Web/JavaScript/Reference -/de/docs/Web/JavaScript/Reference/Statements/funktion /de/docs/Web/JavaScript/Reference/Statements/function -/de/docs/Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features /de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features -/de/docs/Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol /de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol -/de/docs/Web/JavaScript/Reference/template_strings /de/docs/Web/JavaScript/Reference/Template_literals -/de/docs/Web/JavaScript/Speicherverwaltung /de/docs/Web/JavaScript/Memory_Management -/de/docs/Web/JavaScript/Tutorials /de/docs/Web/JavaScript -/de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung /de/docs/Web/JavaScript/Equality_comparisons_and_sameness -/de/docs/Web/JavaScript/java_guide /de/docs/Web/JavaScript/Guide -/de/docs/Web/JavaScript/javascript_guide /de/docs/Web/JavaScript/Guide -/de/docs/Web/JavaScript/javascript_guide/Ausdrücke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators -/de/docs/Web/JavaScript/javascript_guide/Javascript_Übersicht /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types -/de/docs/Web/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/javascript_guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/javascript_guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Web/MathML/Attribute/Werte /de/docs/Web/MathML/Attribute/Values -/de/docs/Web/MathML/Beispiele /de/docs/Web/MathML/Examples -/de/docs/Web/MathML/Beispiele/MathML_Satz_des_Pythagoras /de/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem -/de/docs/Web/MathML/Beispiele/Quadratische_Gleichung /de/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula -/de/docs/Web/SVG/Tutorial/Einführung /de/docs/Web/SVG/Tutorial/Introduction -/de/docs/Web/SVG/Tutorial/Pfade /de/docs/Web/SVG/Tutorial/Paths -/de/docs/Web/SVG/Tutorial/SVG_Schriftarten /de/docs/Web/SVG/Tutorial/SVG_fonts -/de/docs/Web/WebAPI/verwenden_von_geolocation /de/docs/Web/API/Geolocation_API -/de/docs/Web/WebGL /de/docs/Web/API/WebGL_API -/de/docs/Web/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -/de/docs/Web/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -/de/docs/Web/WebGL/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -/de/docs/Web/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -/de/docs/Web/XML/XML_Einführung /de/docs/Web/XML/XML_introduction -/de/docs/WebGL /de/docs/Web/API/WebGL_API -/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -/de/docs/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -/de/docs/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -/de/docs/WebGL/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -/de/docs/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -/de/docs/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -/de/docs/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -/de/docs/WebSockets /de/docs/Web/API/WebSockets_API -/de/docs/WebSockets/Writing_WebSocket_servers /de/docs/Web/API/WebSockets_API/Writing_WebSocket_servers -/de/docs/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers -/de/docs/Werkzeuge https://firefox-source-docs.mozilla.org/devtools-user/index.html -/de/docs/XML_Einführung /de/docs/Web/XML/XML_introduction -/de/docs/XSLT /de/docs/Web/XSLT -/de/docs/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File_API/Using_files_from_web_applications -/de/docs/en /en-US/ diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json deleted file mode 100644 index 467eebc11bb390..00000000000000 --- a/files/de/_wikihistory.json +++ /dev/null @@ -1,14070 +0,0 @@ -{ - "Games": { - "modified": "2019-09-09T15:31:03.156Z", - "contributors": [ - "SphinxKnight", - "ctexxx", - "wbamberg", - "Ja3ar", - "RewoSiedge", - "fscholz", - "Chris-CR", - "wiegels", - "sonjaka", - "F6F" - ] - }, - "Glossary": { - "modified": "2020-10-07T11:07:28.731Z", - "contributors": [ - "peterbe", - "wbamberg", - "duckymirror", - "Siphalor", - "schwemmer", - "PercyGitarrist", - "Clijsters", - "Jeremie" - ] - }, - "Glossary/AJAX": { - "modified": "2019-09-29T09:22:43.314Z", - "contributors": [ - "StuNNixX", - "SebinNyshkim", - "Johann150", - "amelzer", - "Tyrandus", - "Siphalor", - "PeterMader" - ] - }, - "Glossary/API": { - "modified": "2019-01-17T01:20:03.588Z", - "contributors": [ - "GreenPepper", - "Tyrandus" - ] - }, - "Glossary/ARIA": { - "modified": "2019-03-18T21:25:14.758Z", - "contributors": [ - "timvancleef" - ] - }, - "Glossary/ARPA": { - "modified": "2019-09-26T16:01:34.595Z", - "contributors": [ - "StuNNixX" - ] - }, - "Glossary/ASCII": { - "modified": "2019-03-23T22:12:48.337Z", - "contributors": [ - "Tyrandus", - "Siphalor" - ] - }, - "Glossary/ATAG": { - "modified": "2019-07-16T20:07:08.739Z", - "contributors": [ - "christianheinrichs", - "Tyrandus" - ] - }, - "Glossary/Abstraction": { - "modified": "2019-03-23T22:15:58.737Z", - "contributors": [ - "Sebastianz", - "ursingold", - "t1m0fej" - ] - }, - "Glossary/Accessibility": { - "modified": "2019-03-18T21:41:37.798Z", - "contributors": [ - "fhwfzfge" - ] - }, - "Glossary/Adobe_Flash": { - "modified": "2019-03-18T21:38:09.234Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/Algorithm": { - "modified": "2019-03-23T22:10:22.994Z", - "contributors": [ - "herbmaier", - "Tyrandus" - ] - }, - "Glossary/Apple_Safari": { - "modified": "2019-03-23T22:12:52.875Z", - "contributors": [ - "Siphalor" - ] - }, - "Glossary/Argument": { - "modified": "2019-07-31T17:50:44.168Z", - "contributors": [ - "DavidBarke", - "Siphalor" - ] - }, - "Glossary/Asynchronous": { - "modified": "2019-06-18T06:50:55.111Z", - "contributors": [ - "dbraun" - ] - }, - "Glossary/Attribute": { - "modified": "2019-03-23T22:12:44.567Z", - "contributors": [ - "CennoxX", - "Siphalor" - ] - }, - "Glossary/Bandwidth": { - "modified": "2019-03-23T22:08:37.747Z", - "contributors": [ - "sigoa", - "Rebecca70" - ] - }, - "Glossary/Block": { - "modified": "2019-03-23T22:10:15.560Z", - "contributors": [ - "Tyrandus" - ] - }, - "Glossary/Block/CSS": { - "modified": "2019-03-23T22:10:18.354Z", - "contributors": [ - "Tyrandus" - ] - }, - "Glossary/Block/Scripting": { - "modified": "2019-07-31T17:47:15.023Z", - "contributors": [ - "DavidBarke", - "Tyrandus" - ] - }, - "Glossary/Boolean": { - "modified": "2020-05-06T18:18:55.401Z", - "contributors": [ - "zuzuzu", - "Siphalor" - ] - }, - "Glossary/Bootstrap": { - "modified": "2020-04-26T05:37:23.217Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Browser": { - "modified": "2019-03-23T22:19:19.624Z", - "contributors": [ - "fhwfzfge", - "pixelwiese" - ] - }, - "Glossary/CDN": { - "modified": "2019-03-18T21:36:11.693Z", - "contributors": [ - "Sixl-Daniel" - ] - }, - "Glossary/CMS": { - "modified": "2019-07-09T09:57:48.292Z", - "contributors": [ - "marcelalmesberger" - ] - }, - "Glossary/CORS": { - "modified": "2019-03-18T21:25:15.532Z", - "contributors": [ - "timvancleef" - ] - }, - "Glossary/CORS-safelisted_request_header": { - "modified": "2020-01-30T18:28:06.437Z", - "contributors": [ - "TorbenKoehn" - ] - }, - "Glossary/CRLF": { - "modified": "2019-07-03T15:43:20.749Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/CSS": { - "modified": "2019-03-23T22:15:58.284Z", - "contributors": [ - "Johann150", - "42triangles", - "th1nk3th", - "Siphalor" - ] - }, - "Glossary/CSS_preprocessor": { - "modified": "2019-03-18T21:36:27.239Z", - "contributors": [ - "Sixl-Daniel" - ] - }, - "Glossary/Cache": { - "modified": "2019-03-18T21:14:43.666Z", - "contributors": [ - "inverted-hat" - ] - }, - "Glossary/CalDAV": { - "modified": "2019-07-16T22:22:01.791Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/Canvas": { - "modified": "2019-03-18T21:27:17.671Z", - "contributors": [ - "timvancleef", - "duckymirror" - ] - }, - "Glossary/Card_sorting": { - "modified": "2019-03-18T21:18:41.531Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/Character": { - "modified": "2019-07-16T20:34:30.794Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/Chrome": { - "modified": "2019-03-18T21:22:37.925Z", - "contributors": [ - "DanielNL" - ] - }, - "Glossary/Class": { - "modified": "2019-03-18T21:37:57.063Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/Codec": { - "modified": "2019-07-03T15:06:19.710Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/Compile_time": { - "modified": "2019-07-16T20:23:03.824Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/Constructor": { - "modified": "2019-03-23T22:04:35.334Z", - "contributors": [ - "klug_mario" - ] - }, - "Glossary/Cookie": { - "modified": "2019-03-18T21:14:43.300Z", - "contributors": [ - "inverted-hat" - ] - }, - "Glossary/Crawler": { - "modified": "2019-03-18T21:16:18.027Z", - "contributors": [ - "pastparty" - ] - }, - "Glossary/DHTML": { - "modified": "2019-07-16T20:42:27.987Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/DNS": { - "modified": "2019-03-23T22:12:52.961Z", - "contributors": [ - "Siphalor" - ] - }, - "Glossary/DOM": { - "modified": "2019-03-18T21:32:34.579Z", - "contributors": [ - "axelrindle" - ] - }, - "Glossary/DOS_attack": { - "modified": "2019-03-23T22:12:27.718Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/Data_structure": { - "modified": "2019-07-16T20:37:24.466Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/Denial_of_Service": { - "modified": "2019-01-17T02:56:58.052Z", - "contributors": [ - "ahmadnourallah" - ] - }, - "Glossary/Doctype": { - "modified": "2019-03-18T21:31:08.161Z", - "contributors": [ - "PlayLikeLars" - ] - }, - "Glossary/Domain_Name": { - "modified": "2019-03-23T22:09:23.052Z", - "contributors": [ - "Anonymous" - ] - }, - "Glossary/ECMA": { - "modified": "2019-03-23T22:38:22.610Z", - "contributors": [ - "Siphalor", - "manumiu" - ] - }, - "Glossary/ECMAScript": { - "modified": "2019-07-16T20:45:49.886Z", - "contributors": [ - "christianheinrichs", - "sigoa" - ] - }, - "Glossary/Element": { - "modified": "2019-03-18T21:32:38.372Z", - "contributors": [ - "axelrindle" - ] - }, - "Glossary/Empty_element": { - "modified": "2019-03-18T21:32:36.396Z", - "contributors": [ - "axelrindle" - ] - }, - "Glossary/Encapsulation": { - "modified": "2020-09-30T06:05:42.392Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/FTP": { - "modified": "2019-07-16T21:16:05.354Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/Falsy": { - "modified": "2020-04-04T11:10:35.168Z", - "contributors": [ - "axelrindle", - "Ryuno-Ki", - "sspringer82", - "Eiknheimer" - ] - }, - "Glossary/Firefox_OS": { - "modified": "2019-07-16T20:57:14.425Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/First-class_Function": { - "modified": "2019-03-18T21:30:30.219Z", - "contributors": [ - "king-tom" - ] - }, - "Glossary/Flex": { - "modified": "2020-07-03T19:19:31.495Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/Flexbox": { - "modified": "2020-04-28T14:38:18.338Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Forbidden_header_name": { - "modified": "2019-03-23T22:03:16.612Z", - "contributors": [ - "timmyRS" - ] - }, - "Glossary/GPU": { - "modified": "2019-01-17T02:50:36.393Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/GZip_compression": { - "modified": "2019-03-18T21:16:18.586Z", - "contributors": [ - "pastparty" - ] - }, - "Glossary/Git": { - "modified": "2019-03-23T22:03:45.932Z", - "contributors": [ - "PeterMader" - ] - }, - "Glossary/Graceful_degradation": { - "modified": "2019-03-18T21:18:41.082Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/Grid": { - "modified": "2019-04-30T16:22:31.119Z", - "contributors": [ - "janklaeger" - ] - }, - "Glossary/Gutters": { - "modified": "2019-06-28T17:18:01.309Z", - "contributors": [ - "hellschu" - ] - }, - "Glossary/HTML": { - "modified": "2019-03-23T22:45:13.400Z", - "contributors": [ - "ursingold", - "GerhardStingl", - "jumpball", - "22samuelk" - ] - }, - "Glossary/HTML5": { - "modified": "2019-05-21T11:16:16.898Z", - "contributors": [ - "Exblosis" - ] - }, - "Glossary/HTTP": { - "modified": "2019-03-23T22:18:56.738Z", - "contributors": [ - "jens1o", - "cob" - ] - }, - "Glossary/Hoisting": { - "modified": "2019-03-18T20:48:10.960Z", - "contributors": [ - "SebinNyshkim", - "eluchsinger" - ] - }, - "Glossary/Hyperlink": { - "modified": "2019-03-18T21:38:11.272Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/IDE": { - "modified": "2020-04-27T12:50:30.779Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/IETF": { - "modified": "2019-07-16T22:29:20.265Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/IIFE": { - "modified": "2020-08-24T06:52:59.941Z", - "contributors": [ - "anme98" - ] - }, - "Glossary/IMAP": { - "modified": "2020-06-01T13:05:53.063Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/ISO": { - "modified": "2019-03-18T21:32:20.907Z", - "contributors": [ - "axelrindle" - ] - }, - "Glossary/Identifier": { - "modified": "2019-03-18T21:32:54.530Z", - "contributors": [ - "schlagi123" - ] - }, - "Glossary/IndexedDB": { - "modified": "2019-03-23T22:25:48.301Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/Information_architecture": { - "modified": "2019-03-18T21:18:25.933Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/Internet": { - "modified": "2019-03-23T22:09:31.438Z", - "contributors": [ - "Anonymous" - ] - }, - "Glossary/JSON": { - "modified": "2019-07-31T17:39:12.065Z", - "contributors": [ - "DavidBarke", - "Siphalor" - ] - }, - "Glossary/Jank": { - "modified": "2019-03-23T22:07:46.052Z", - "contributors": [ - "sigoa", - "janakue" - ] - }, - "Glossary/JavaScript": { - "modified": "2020-01-08T09:15:04.165Z", - "contributors": [ - "pastparty", - "sigoa", - "amelzer", - "Siphalor" - ] - }, - "Glossary/Local_scope": { - "modified": "2020-04-28T14:50:32.479Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Local_variable": { - "modified": "2020-04-30T14:20:25.467Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Localization": { - "modified": "2019-03-24T00:15:25.257Z", - "contributors": [ - "taralushi", - "fscholz", - "WayneSchlegel", - "DirkS", - "maik666", - "René Schwarz", - "Ak120" - ] - }, - "Glossary/MIME_type": { - "modified": "2019-03-18T21:19:21.810Z", - "contributors": [ - "DoDecaDence" - ] - }, - "Glossary/Middleware": { - "modified": "2020-08-20T08:17:41.343Z", - "contributors": [ - "a962017" - ] - }, - "Glossary/Mixin": { - "modified": "2019-03-18T21:42:40.394Z", - "contributors": [ - "CennoxX" - ] - }, - "Glossary/Mozilla_Firefox": { - "modified": "2019-03-23T22:12:18.078Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/Namespace": { - "modified": "2020-04-25T11:20:23.323Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Node.js": { - "modified": "2019-03-23T22:25:53.895Z", - "contributors": [ - "GreenPepper", - "PercyGitarrist" - ] - }, - "Glossary/Null": { - "modified": "2019-01-17T01:09:59.257Z", - "contributors": [ - "GreenPepper", - "sfraenkel" - ] - }, - "Glossary/Number": { - "modified": "2019-03-23T22:12:46.665Z", - "contributors": [ - "GreenPepper", - "Siphalor" - ] - }, - "Glossary/OOP": { - "modified": "2019-03-18T21:31:39.740Z", - "contributors": [ - "CloudMaker97" - ] - }, - "Glossary/Object": { - "modified": "2019-03-23T22:08:37.828Z", - "contributors": [ - "LazerPhil" - ] - }, - "Glossary/Operand": { - "modified": "2020-04-28T14:20:36.934Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Operator": { - "modified": "2020-04-28T14:35:42.540Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/PHP": { - "modified": "2019-03-23T22:40:22.272Z", - "contributors": [ - "Siphalor", - "BernhardRubow" - ] - }, - "Glossary/PNG": { - "modified": "2019-03-18T21:18:26.058Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/Polyfill": { - "modified": "2019-03-18T21:18:41.266Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/Primitive": { - "modified": "2019-03-23T22:46:44.221Z", - "contributors": [ - "Siphalor", - "andreas_inkoeln" - ] - }, - "Glossary/Progressive_Enhancement": { - "modified": "2019-03-18T21:18:33.079Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/Protocol": { - "modified": "2019-03-23T22:09:31.349Z", - "contributors": [ - "Anonymous" - ] - }, - "Glossary/Prototype": { - "modified": "2020-07-08T01:49:32.204Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Prototype-based_programming": { - "modified": "2020-09-20T06:51:43.983Z", - "contributors": [ - "ThomasSpornraft", - "Klingohle" - ] - }, - "Glossary/REST": { - "modified": "2019-10-21T09:12:57.318Z", - "contributors": [ - "GR_Fuchs" - ] - }, - "Glossary/RGB": { - "modified": "2019-04-04T19:03:47.057Z", - "contributors": [ - "aaarichter" - ] - }, - "Glossary/RSS": { - "modified": "2020-04-28T03:21:36.086Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Regular_expression": { - "modified": "2019-03-23T22:32:07.829Z", - "contributors": [ - "trideon3" - ] - }, - "Glossary/Repo": { - "modified": "2019-03-23T22:22:59.067Z", - "contributors": [ - "schwemmer" - ] - }, - "Glossary/Responsive_web_design": { - "modified": "2020-04-26T12:37:06.892Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/SQL": { - "modified": "2019-03-18T21:39:17.726Z", - "contributors": [ - "Dieter2019" - ] - }, - "Glossary/SVG": { - "modified": "2019-03-23T22:07:22.255Z", - "contributors": [ - "Claas", - "th1nk3th" - ] - }, - "Glossary/Scope": { - "modified": "2020-08-21T16:14:18.225Z", - "contributors": [ - "steevn", - "jewuma" - ] - }, - "Glossary/Server": { - "modified": "2019-03-23T22:08:18.228Z", - "contributors": [ - "axelrindle", - "Siphalor" - ] - }, - "Glossary/Sloppy_mode": { - "modified": "2019-03-18T20:48:46.771Z", - "contributors": [ - "SebinNyshkim", - "sigoa" - ] - }, - "Glossary/Slug": { - "modified": "2020-04-25T11:40:48.940Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Specification": { - "modified": "2019-07-18T11:06:17.494Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/Statement": { - "modified": "2019-04-20T19:38:11.191Z", - "contributors": [ - "GreenPepper", - "Tyrandus" - ] - }, - "Glossary/String": { - "modified": "2019-03-18T20:53:19.356Z", - "contributors": [ - "GreenPepper", - "Shidigital" - ] - }, - "Glossary/TCP": { - "modified": "2019-07-16T23:18:48.078Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/TLS": { - "modified": "2019-03-18T21:46:43.987Z", - "contributors": [ - "vssn" - ] - }, - "Glossary/Tag": { - "modified": "2020-04-29T16:59:11.235Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Truthy": { - "modified": "2019-03-18T20:48:41.042Z", - "contributors": [ - "ctexxx", - "Shiryk" - ] - }, - "Glossary/Type": { - "modified": "2020-04-04T13:54:03.839Z", - "contributors": [ - "axelrindle" - ] - }, - "Glossary/Type_Conversion": { - "modified": "2020-04-04T13:56:57.290Z", - "contributors": [ - "axelrindle" - ] - }, - "Glossary/UI": { - "modified": "2020-04-25T12:00:27.819Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/URI": { - "modified": "2019-07-05T05:49:16.810Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/URL": { - "modified": "2019-09-29T13:23:24.583Z", - "contributors": [ - "StuNNixX", - "Anonymous" - ] - }, - "Glossary/UX": { - "modified": "2019-03-18T21:18:40.937Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/User_agent": { - "modified": "2020-05-06T18:06:41.662Z", - "contributors": [ - "zuzuzu", - "Laubersheini" - ] - }, - "Glossary/Validator": { - "modified": "2020-04-29T17:05:25.109Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/Value": { - "modified": "2019-03-18T20:53:19.213Z", - "contributors": [ - "GreenPepper", - "Siphalor" - ] - }, - "Glossary/Variable": { - "modified": "2019-03-23T22:12:40.993Z", - "contributors": [ - "schlagi123", - "Siphalor" - ] - }, - "Glossary/Vendor_Prefix": { - "modified": "2019-03-23T22:29:22.756Z", - "contributors": [ - "Tyrandus", - "1903Daniel" - ] - }, - "Glossary/Viewport": { - "modified": "2019-07-05T01:01:06.329Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/Visual_Viewport": { - "modified": "2019-07-05T00:40:39.361Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/VoIP": { - "modified": "2019-07-05T00:15:51.322Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Glossary/W3C": { - "modified": "2019-03-23T22:08:17.042Z", - "contributors": [ - "Johann150", - "Siphalor" - ] - }, - "Glossary/WAI": { - "modified": "2019-03-18T21:41:34.671Z", - "contributors": [ - "fhwfzfge" - ] - }, - "Glossary/WebDAV": { - "modified": "2019-07-16T22:18:47.130Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/WebRTC": { - "modified": "2020-11-06T01:48:25.235Z", - "contributors": [ - "Technikhighknee" - ] - }, - "Glossary/WebSockets": { - "modified": "2019-03-23T22:55:04.865Z", - "contributors": [ - "Siphalor", - "Clijsters", - "Nys" - ] - }, - "Glossary/Wrapper": { - "modified": "2020-04-27T17:16:28.102Z", - "contributors": [ - "Klingohle" - ] - }, - "Glossary/XML": { - "modified": "2019-03-23T22:12:27.346Z", - "contributors": [ - "duckymirror", - "Siphalor", - "PercyGitarrist" - ] - }, - "Glossary/array": { - "modified": "2019-08-22T07:09:45.701Z", - "contributors": [ - "devtarek", - "SebinNyshkim", - "Shidigital" - ] - }, - "Glossary/buffer": { - "modified": "2019-03-18T21:31:44.605Z", - "contributors": [ - "CloudMaker97" - ] - }, - "Glossary/firewall": { - "modified": "2019-07-16T21:05:22.003Z", - "contributors": [ - "christianheinrichs" - ] - }, - "Glossary/gif": { - "modified": "2019-03-18T21:38:05.982Z", - "contributors": [ - "tschach", - "duckymirror" - ] - }, - "Glossary/https": { - "modified": "2019-03-18T21:37:59.410Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/jpeg": { - "modified": "2019-03-18T21:18:26.401Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/undefined": { - "modified": "2019-03-23T22:12:50.044Z", - "contributors": [ - "Siphalor" - ] - }, - "Glossary/webm": { - "modified": "2019-03-18T21:18:37.955Z", - "contributors": [ - "tschach" - ] - }, - "Glossary/webp": { - "modified": "2019-03-18T21:18:22.556Z", - "contributors": [ - "tschach" - ] - }, - "Learn": { - "modified": "2020-08-11T06:37:37.645Z", - "contributors": [ - "Towdo", - "hrfischer1983", - "methodx", - "SphinxKnight", - "Shidigital", - "babylinda1973", - "sigoa", - "makobasuri", - "Ayaka", - "LeBasti", - "wittmern", - "kscarfone" - ] - }, - "Learn/Accessibility": { - "modified": "2020-07-16T22:39:56.105Z", - "contributors": [ - "lkreimann", - "Dschubba", - "marcschoeni" - ] - }, - "Learn/Accessibility/Accessibility_troubleshooting": { - "modified": "2020-07-16T22:40:34.377Z", - "contributors": [ - "marcelalmesberger" - ] - }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:32.758Z", - "contributors": [ - "Johann150", - "optimus-yarnspinner" - ] - }, - "Learn/CSS/Building_blocks": { - "modified": "2020-07-16T22:28:07.153Z", - "contributors": [ - "GiovanniHD201E" - ] - }, - "Learn/CSS/Building_blocks/Cascade_and_inheritance": { - "modified": "2019-03-23T22:49:16.030Z", - "contributors": [ - "spiegelp" - ] - }, - "Learn/CSS/Building_blocks/Organizing": { - "modified": "2020-11-22T15:02:52.846Z", - "contributors": [ - "hellschu" - ] - }, - "Learn/CSS/Building_blocks/Selectors": { - "modified": "2019-03-23T23:11:23.467Z", - "contributors": [ - "woiddale", - "spiegelp", - "hpkainz" - ] - }, - "Learn/CSS/CSS_layout": { - "modified": "2020-08-05T14:18:54.916Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Learn/CSS/CSS_layout/Flexbox": { - "modified": "2020-08-05T14:18:57.862Z", - "contributors": [ - "getthepoint" - ] - }, - "Learn/CSS/First_steps": { - "modified": "2020-09-03T14:11:36.912Z", - "contributors": [ - "wm75" - ] - }, - "Learn/CSS/First_steps/How_CSS_is_structured": { - "modified": "2019-03-23T22:41:33.439Z", - "contributors": [ - "spiegelp" - ] - }, - "Learn/CSS/First_steps/How_CSS_works": { - "modified": "2020-05-05T12:04:06.710Z", - "contributors": [ - "Helge-HH", - "fhwfzfge", - "msc1979", - "fscholz", - "Palmstroem", - "barning" - ] - }, - "Learn/CSS/Styling_text": { - "modified": "2020-09-05T15:36:12.926Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Learn/CSS/Styling_text/Fundamentals": { - "modified": "2019-03-23T22:49:16.242Z", - "contributors": [ - "spiegelp" - ] - }, - "Learn/Common_questions": { - "modified": "2020-07-16T22:35:21.824Z" - }, - "Learn/Common_questions/Upload_files_to_a_web_server": { - "modified": "2020-07-16T22:35:41.440Z", - "contributors": [ - "christianheinrichs", - "LH-10" - ] - }, - "Learn/Forms": { - "modified": "2020-07-16T22:20:54.604Z", - "contributors": [ - "Ryuno-Ki", - "PercyGitarrist", - "F.nn" - ] - }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-11-24T12:50:40.168Z", - "contributors": [ - "FrederikWeitz", - "GiovanniHD201E", - "DavidBarke", - "PercyGitarrist", - "Dschubba", - "cookiekoenig", - "sigoa", - "Aryx", - "Shidigital", - "sbruder", - "greasan", - "d_jan" - ] - }, - "Learn/Getting_started_with_the_web/CSS_basics": { - "modified": "2020-07-16T22:34:56.746Z", - "contributors": [ - "urewig", - "jess-e-bee", - "Aryx", - "Shidigital", - "sbruder", - "AlexanderZiegler" - ] - }, - "Learn/Getting_started_with_the_web/Dealing_with_files": { - "modified": "2020-07-16T22:34:32.214Z", - "contributors": [ - "michaelhochleitner", - "Aryx", - "vosspl", - "Shidigital", - "Bissmarc", - "janjo", - "d_jan" - ] - }, - "Learn/Getting_started_with_the_web/HTML_basics": { - "modified": "2020-11-24T12:59:37.280Z", - "contributors": [ - "FrederikWeitz", - "blopesfo", - "nitramrelpmur", - "Aryx", - "Shidigital", - "sbruder", - "Bissmarc", - "AndreasL", - "dobra", - "janjo", - "maybe" - ] - }, - "Learn/Getting_started_with_the_web/How_the_Web_works": { - "modified": "2020-07-16T22:33:59.338Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/Getting_started_with_the_web/Installing_basic_software": { - "modified": "2020-11-24T12:58:01.692Z", - "contributors": [ - "FrederikWeitz", - "Dschubba", - "Aryx", - "Shidigital", - "Oliver_Schafeld", - "spiotro", - "Fl0tallicA", - "d_jan" - ] - }, - "Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2020-07-16T22:35:08.850Z", - "contributors": [ - "jorgemontoyab", - "urewig", - "loicyondjeu", - "ilonaherr", - "SaschaHeyer", - "fxmt", - "Shidigital", - "hapeit", - "danielsimon1", - "nuracubeTranslations", - "QuaGS", - "monja-schreppel", - "Purple-Vampire" - ] - }, - "Learn/Getting_started_with_the_web/Publishing_your_website": { - "modified": "2020-07-16T22:34:23.783Z", - "contributors": [ - "KadirTopal", - "metafon", - "Shidigital" - ] - }, - "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { - "modified": "2020-11-24T12:45:53.560Z", - "contributors": [ - "FrederikWeitz", - "michaelhochleitner", - "Aryx", - "Shidigital", - "Bissmarc", - "AndreasL", - "d_jan" - ] - }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:15.700Z", - "contributors": [ - "sigoa", - "Shidigital", - "Christian2507", - "urshensler", - "Marlonzockt", - "Trollderim" - ] - }, - "Learn/HTML/Introduction_to_HTML": { - "modified": "2020-07-16T22:22:45.948Z", - "contributors": [ - "PercyGitarrist", - "mprofitl", - "LeifMensing", - "Shidigital" - ] - }, - "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { - "modified": "2020-07-16T22:23:51.933Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { - "modified": "2020-07-16T22:23:43.017Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { - "modified": "2020-07-16T22:24:11.946Z", - "contributors": [ - "LeniTastic", - "Shidigital" - ] - }, - "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { - "modified": "2020-07-16T22:24:03.053Z", - "contributors": [ - "DiscW0rld", - "fdeberle", - "Shidigital", - "Woehe2010", - "fataly01" - ] - }, - "Learn/HTML/Introduction_to_HTML/Getting_started": { - "modified": "2020-11-19T12:58:27.172Z", - "contributors": [ - "fiji-flo", - "Kometheus", - "nitramrelpmur", - "Shidigital" - ] - }, - "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { - "modified": "2020-07-16T22:23:30.695Z", - "contributors": [ - "Hofei", - "Shidigital" - ] - }, - "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { - "modified": "2020-07-16T22:23:11.514Z", - "contributors": [ - "DiscW0rld", - "LeniTastic", - "msifrt" - ] - }, - "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { - "modified": "2020-07-16T22:24:17.990Z", - "contributors": [ - "DiscW0rld" - ] - }, - "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { - "modified": "2020-07-16T22:23:17.212Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/HTML/Multimedia_and_embedding": { - "modified": "2020-10-08T13:45:43.288Z", - "contributors": [ - "Reinhard_Welsing", - "DiscW0rld" - ] - }, - "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": { - "modified": "2020-07-16T22:25:06.237Z", - "contributors": [ - "DiscW0rld" - ] - }, - "Learn/HTML/Tables": { - "modified": "2020-07-16T22:25:10.661Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "Learn/JavaScript": { - "modified": "2020-07-16T22:29:37.369Z", - "contributors": [ - "ManfredHTML", - "DrunkenTaunt" - ] - }, - "Learn/JavaScript/Building_blocks": { - "modified": "2020-07-16T22:31:06.733Z", - "contributors": [ - "Osslack" - ] - }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-16T22:29:48.847Z", - "contributors": [ - "CruzR", - "Elllenn" - ] - }, - "Learn/JavaScript/First_steps/A_first_splash": { - "modified": "2020-07-16T22:30:16.778Z", - "contributors": [ - "GiovanniHD201E", - "Thomas-Zenkel" - ] - }, - "Learn/JavaScript/First_steps/Silly_story_generator": { - "modified": "2020-07-16T22:31:00.101Z", - "contributors": [ - "Strubinator" - ] - }, - "Learn/JavaScript/First_steps/What_is_JavaScript": { - "modified": "2020-09-29T09:38:57.543Z", - "contributors": [ - "Devoryo", - "mchoeti", - "GreenPepper", - "hpawe01", - "Bissmarc", - "woiddale", - "JorisGutjahr" - ] - }, - "Learn/JavaScript/Objects": { - "modified": "2020-07-16T22:31:47.973Z", - "contributors": [ - "CloudMaker97", - "Ch0coL8te" - ] - }, - "Learn/JavaScript/Objects/Basics": { - "modified": "2020-08-25T16:52:03.284Z", - "contributors": [ - "steevn", - "Timbuktu1982", - "22tcp" - ] - }, - "Learn/JavaScript/Objects/Classes_in_JavaScript": { - "modified": "2020-07-16T22:32:04.669Z", - "contributors": [ - "Timbuktu1982", - "bluefor2" - ] - }, - "Learn/JavaScript/Objects/JSON": { - "modified": "2020-07-16T22:32:24.377Z", - "contributors": [ - "MuellerRi", - "DirkMassmann" - ] - }, - "Learn/JavaScript/Objects/Object_prototypes": { - "modified": "2020-07-16T22:32:18.828Z", - "contributors": [ - "Timbuktu1982" - ] - }, - "Learn/Server-side": { - "modified": "2020-07-16T22:35:55.694Z", - "contributors": [ - "LeifMensing", - "PercyGitarrist" - ] - }, - "Learn/Server-side/Express_Nodejs": { - "modified": "2020-07-16T22:37:51.185Z", - "contributors": [ - "Oliver_Schafeld", - "Steffen1998" - ] - }, - "Learn/Server-side/First_steps": { - "modified": "2020-07-16T22:36:07.662Z", - "contributors": [ - "LeifMensing", - "Dschubba" - ] - }, - "Learn/Tools_and_testing": { - "modified": "2020-07-16T22:38:53.810Z", - "contributors": [ - "Skasi", - "alex_hammerschmied" - ] - }, - "MDN": { - "modified": "2019-09-10T15:39:15.802Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "GeMine", - "Jeremie", - "sbarthel", - "teoli", - "fscholz", - "Sheppy" - ] - }, - "MDN/At_ten": { - "modified": "2019-03-23T22:49:50.216Z", - "contributors": [ - "1000eyes", - "stephaniehobson", - "Evotopid", - "Sheppy" - ] - }, - "MDN/At_ten/History_of_MDN": { - "modified": "2019-03-23T22:49:53.083Z", - "contributors": [ - "stephaniehobson", - "Sebastianz" - ] - }, - "MDN/Community": { - "modified": "2020-11-28T23:34:47.349Z", - "contributors": [ - "chrisdavidmills", - "jswisher", - "SphinxKnight", - "Streamities", - "wbamberg", - "Sebastianz" - ] - }, - "MDN/Community/Contributing/Getting_started": { - "modified": "2020-09-30T17:09:44.157Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Kairyon", - "matze", - "sbarthel" - ] - }, - "MDN/Contribute": { - "modified": "2019-03-23T23:20:05.396Z", - "contributors": [ - "wbamberg", - "matze", - "sbarthel", - "Sheppy" - ] - }, - "MDN/Contribute/Howto": { - "modified": "2019-03-23T23:17:41.242Z", - "contributors": [ - "wbamberg", - "sbarthel", - "Sheppy" - ] - }, - "MDN/Tools": { - "modified": "2019-03-23T22:50:19.741Z", - "contributors": [ - "wbamberg", - "jezdez", - "LeindK" - ] - }, - "MDN/Tools/KumaScript/Troubleshooting": { - "modified": "2019-01-16T21:24:01.701Z", - "contributors": [ - "wbamberg", - "rolandm" - ] - }, - "MDN/Writing_guidelines": { - "modified": "2019-09-10T08:51:50.833Z", - "contributors": [ - "SphinxKnight", - "Streamities", - "wbamberg", - "rs-github" - ] - }, - "MDN/Writing_guidelines/Howto/Tag": { - "modified": "2019-07-04T23:25:18.289Z", - "contributors": [ - "PercyGitarrist", - "wbamberg", - "Sixl-Daniel", - "vssn", - "hictox", - "ichlebelangeweb.de", - "drillmeister", - "clone" - ] - }, - "MDN/Writing_guidelines/Page_structures": { - "modified": "2020-09-30T09:04:48.225Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "SphinxKnight", - "hartmann2012" - ] - }, - "MDN/Writing_guidelines/Page_structures/Live_samples": { - "modified": "2019-01-16T23:07:11.407Z", - "contributors": [ - "wbamberg", - "lmoench", - "Tutz" - ] - }, - "MDN/Yari": { - "modified": "2020-04-22T10:45:47.041Z", - "contributors": [ - "clemens.klapp", - "SphinxKnight", - "wbamberg", - "JorisGutjahr", - "Jeremie", - "Sheppy" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:36:50.960Z", - "contributors": [ - "lucago", - "ethertank", - "ziyunfei" - ] - }, - "Mozilla/Add-ons": { - "modified": "2020-05-31T03:10:31.630Z", - "contributors": [ - "hellerdave1983", - "SphinxKnight", - "schlagi123", - "DeniseHenni", - "icarus1966", - "survivalluc", - "Trollderim", - "schenja885", - "Denise.", - "PaddyKfg", - "Croydon", - "antiphp", - "Basu8179", - "Luccie", - "ata.sah", - "Tinchen977", - "Sven2405", - "thorstochter1488", - "fscholz", - "aleks607", - "Angel", - "astoriaedde" - ] - }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2019-03-18T21:06:43.476Z", - "contributors": [ - "rs-github", - "Artist-sumo", - "SphinxKnight", - "Bodo1445", - "Clown77", - "Abro" - ] - }, - "Mozilla/Add-ons/WebExtensions/API": { - "modified": "2019-11-26T22:20:15.387Z", - "contributors": [ - "wbamberg", - "andrewtruongmoz" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/bookmarks": { - "modified": "2020-10-15T21:55:55.060Z", - "contributors": [ - "wbamberg", - "nw520", - "matschibatschi" - ] - }, - "Mozilla/Add-ons/WebExtensions/API/commands": { - "modified": "2020-10-15T22:08:08.658Z", - "contributors": [ - "wbamberg", - "Sorbzilla" - ] - }, - "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": { - "modified": "2019-03-18T21:02:49.105Z", - "contributors": [ - "Asozialist" - ] - }, - "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { - "modified": "2020-10-15T20:55:14.782Z", - "contributors": [ - "frido1973" - ] - }, - "Mozilla/Add-ons/WebExtensions/Examples": { - "modified": "2019-03-18T21:04:08.698Z", - "contributors": [ - "StefanM" - ] - }, - "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { - "modified": "2019-10-28T22:25:20.040Z", - "contributors": [ - "LoVo666" - ] - }, - "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { - "modified": "2019-03-18T21:06:04.054Z", - "contributors": [ - "Asozialist", - "SphinxKnight", - "Sebastianz", - "Artist-sumo", - "Stefanius67" - ] - }, - "Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API": { - "modified": "2019-06-11T16:28:12.442Z", - "contributors": [ - "Patrick5555" - ] - }, - "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { - "modified": "2019-07-04T07:03:49.181Z", - "contributors": [ - "trych", - "SyntaxCacao", - "HillOTech", - "Asozialist", - "twizzz", - "serv-inc", - "Draphar", - "flosommerfeld" - ] - }, - "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": { - "modified": "2019-07-04T06:11:16.199Z", - "contributors": [ - "trych", - "Draphar" - ] - }, - "Mozilla/Add-ons/WebExtensions/manifest.json": { - "modified": "2020-10-15T21:57:12.603Z", - "contributors": [ - "RaspberryPiFan", - "wbamberg", - "DaysieDuck", - "andrewtruongmoz" - ] - }, - "Mozilla/Add-ons/WebExtensions/manifest.json/commands": { - "modified": "2020-10-15T22:08:08.705Z", - "contributors": [ - "wbamberg", - "Sorbzilla" - ] - }, - "Mozilla/Firefox": { - "modified": "2020-01-18T12:42:37.514Z", - "contributors": [ - "leela52452", - "SphinxKnight", - "wbamberg", - "dario.bloch", - "Chrisgamma", - "loki", - "fscholz", - "LarsS", - "pollti", - "Timmi" - ] - }, - "Mozilla/Firefox/Releases": { - "modified": "2019-03-23T23:27:18.715Z", - "contributors": [ - "wbamberg", - "ziyunfei" - ] - }, - "Mozilla/Firefox/Releases/1.5": { - "modified": "2019-03-24T00:04:17.420Z", - "contributors": [ - "wbamberg", - "fscholz", - "Jules Papillon", - "Agoist", - "Umifa", - "Crash" - ] - }, - "Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests": { - "modified": "2019-10-30T20:00:38.264Z", - "contributors": [ - "sklicek" - ] - }, - "Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching": { - "modified": "2019-03-24T00:04:22.542Z", - "contributors": [ - "wbamberg", - "fscholz", - "-=Renegade=-", - "Doozer" - ] - }, - "Mozilla/Firefox/Releases/27": { - "modified": "2019-03-23T23:24:54.141Z", - "contributors": [ - "wbamberg", - "globalavocado", - "schlagi123", - "Micky261" - ] - }, - "Mozilla/Firefox/Releases/28": { - "modified": "2019-03-18T21:31:27.153Z", - "contributors": [ - "globalavocado" - ] - }, - "Mozilla/Firefox/Releases/3": { - "modified": "2019-03-24T00:04:33.617Z", - "contributors": [ - "wbamberg", - "fscholz", - "niels", - "Lukas Skywalker" - ] - }, - "Mozilla/Firefox/Releases/3.5": { - "modified": "2019-03-24T00:04:29.361Z", - "contributors": [ - "wbamberg", - "Timmi", - "fscholz", - "niels" - ] - }, - "Mozilla/Firefox/Releases/3/Updating_extensions": { - "modified": "2019-12-13T20:33:28.025Z", - "contributors": [ - "wbamberg", - "fscholz", - "Sheppy", - "Editmonkey", - "Jules Papillon" - ] - }, - "Mozilla/Firefox/Releases/3/Updating_web_applications": { - "modified": "2019-03-24T00:04:30.175Z", - "contributors": [ - "wbamberg", - "Sheppy", - "fscholz", - "niels" - ] - }, - "Mozilla/Firefox/Releases/34": { - "modified": "2019-03-23T23:08:51.454Z", - "contributors": [ - "wbamberg", - "schlagi123", - "barning" - ] - }, - "Mozilla/Firefox/Releases/5": { - "modified": "2020-12-11T05:30:36.741Z", - "contributors": [ - "wbamberg" - ] - }, - "Mozilla/Firefox/Releases/56": { - "modified": "2019-03-23T22:08:20.554Z", - "contributors": [ - "wbamberg", - "equakaralad04" - ] - }, - "Mozilla/Firefox/Releases/57": { - "modified": "2019-03-23T22:07:56.031Z", - "contributors": [ - "wbamberg", - "equakaralad04" - ] - }, - "Mozilla/Firefox/Releases/58": { - "modified": "2019-03-23T22:02:48.354Z", - "contributors": [ - "wbamberg", - "FredIde" - ] - }, - "Web": { - "modified": "2019-09-19T09:01:12.041Z", - "contributors": [ - "GanJix91", - "tirein", - "Ninomilani", - "schlagi123", - "Beder3004", - "Simix2017", - "AxelK", - "ascii4rt", - "axelrindle", - "sbarthel", - "j.bjbb", - "Pascal", - "petzichen", - "Sheppy" - ] - }, - "Web/API": { - "modified": "2019-03-23T23:27:33.499Z", - "contributors": [ - "schlagi123", - "jswisher", - "TheNT87", - "Novo1987", - "inselmensch", - "ethertank" - ] - }, - "Web/API/AesCbcParams": { - "modified": "2019-06-14T14:42:07.860Z", - "contributors": [ - "1siegi" - ] - }, - "Web/API/AudioDestinationNode": { - "modified": "2019-03-23T22:30:19.717Z", - "contributors": [ - "fl1p" - ] - }, - "Web/API/AudioNode": { - "modified": "2019-03-23T22:29:50.278Z", - "contributors": [ - "fl1p" - ] - }, - "Web/API/AudioTrack": { - "modified": "2020-10-15T22:12:54.347Z", - "contributors": [ - "Germling" - ] - }, - "Web/API/BaseAudioContext/decodeAudioData": { - "modified": "2019-03-23T22:38:20.001Z", - "contributors": [ - "Thalhammer" - ] - }, - "Web/API/Battery_Status_API": { - "modified": "2020-10-15T22:19:51.134Z", - "contributors": [ - "1siegi" - ] - }, - "Web/API/Blob": { - "modified": "2019-03-23T23:01:44.965Z", - "contributors": [ - "Anonymous", - "XChrome", - "HendrikRunte", - "manni66", - "omniskop", - "fscholz" - ] - }, - "Web/API/Blob/size": { - "modified": "2019-03-23T23:33:53.208Z", - "contributors": [ - "fscholz", - "nothine" - ] - }, - "Web/API/CSS": { - "modified": "2020-10-15T22:34:59.314Z", - "contributors": [ - "Wind1808" - ] - }, - "Web/API/CSS/escape": { - "modified": "2020-10-15T22:34:58.253Z", - "contributors": [ - "vssn" - ] - }, - "Web/API/CSSMediaRule": { - "modified": "2019-03-23T22:44:07.681Z", - "contributors": [ - "Sebastianz", - "HenryZeitler" - ] - }, - "Web/API/CSSPageRule": { - "modified": "2019-03-23T23:10:58.894Z", - "contributors": [ - "fscholz", - "Sebastianz" - ] - }, - "Web/API/CSSRule": { - "modified": "2019-03-23T23:01:40.917Z", - "contributors": [ - "fscholz" - ] - }, - "Web/API/CSSRule/cssText": { - "modified": "2019-03-23T23:11:11.321Z", - "contributors": [ - "fscholz", - "Sebastianz" - ] - }, - "Web/API/CSS_Painting_API": { - "modified": "2020-11-24T15:05:28.361Z", - "contributors": [ - "estelle" - ] - }, - "Web/API/CSS_Painting_API/Guide": { - "modified": "2020-11-28T04:24:11.006Z", - "contributors": [ - "FrederikWeitz" - ] - }, - "Web/API/Cache": { - "modified": "2019-03-23T22:25:01.147Z", - "contributors": [ - "jpmedley" - ] - }, - "Web/API/Cache/add": { - "modified": "2020-10-15T22:26:45.761Z", - "contributors": [ - "lucas-walter" - ] - }, - "Web/API/Cache/addAll": { - "modified": "2019-03-23T22:25:02.546Z", - "contributors": [ - "ChrisEbner" - ] - }, - "Web/API/CanvasRenderingContext2D": { - "modified": "2020-10-15T21:35:31.419Z", - "contributors": [ - "Dschubba", - "ksm2", - "Aloso", - "aisnjo" - ] - }, - "Web/API/CanvasRenderingContext2D/canvas": { - "modified": "2020-10-15T22:34:43.014Z", - "contributors": [ - "PlumChaos" - ] - }, - "Web/API/CanvasRenderingContext2D/fillRect": { - "modified": "2019-03-23T22:46:53.534Z", - "contributors": [ - "marco-a", - "t.krapp" - ] - }, - "Web/API/CanvasRenderingContext2D/getImageData": { - "modified": "2019-03-23T22:18:42.586Z", - "contributors": [ - "modev" - ] - }, - "Web/API/CanvasRenderingContext2D/isPointInPath": { - "modified": "2019-03-23T22:41:50.769Z", - "contributors": [ - "obama" - ] - }, - "Web/API/CanvasRenderingContext2D/scale": { - "modified": "2019-03-18T21:47:04.467Z", - "contributors": [ - "SimonBuxx" - ] - }, - "Web/API/CanvasRenderingContext2D/textAlign": { - "modified": "2020-10-15T22:05:18.597Z", - "contributors": [ - "marco-a" - ] - }, - "Web/API/Canvas_API": { - "modified": "2019-03-23T23:16:11.989Z", - "contributors": [ - "sigoa", - "petacat", - "Aloso", - "barning", - "andreas.remdt" - ] - }, - "Web/API/Canvas_API/Tutorial": { - "modified": "2020-07-31T10:20:16.447Z", - "contributors": [ - "mgrubinger", - "sigoa", - "surferboy250", - "GeorgKern", - "Leun4m", - "medium-endian", - "manni66", - "pixunil" - ] - }, - "Web/API/Canvas_API/Tutorial/Advanced_animations": { - "modified": "2019-03-23T22:48:52.383Z", - "contributors": [ - "teoli", - "jumpball" - ] - }, - "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors": { - "modified": "2019-10-10T16:33:46.525Z", - "contributors": [ - "Sebastianz", - "GeorgKern" - ] - }, - "Web/API/Canvas_API/Tutorial/Basic_animations": { - "modified": "2019-03-18T21:45:29.279Z", - "contributors": [ - "RmnWtnkmp" - ] - }, - "Web/API/Canvas_API/Tutorial/Basic_usage": { - "modified": "2019-10-06T12:11:53.548Z", - "contributors": [ - "I_I", - "fheckl", - "FelixLehmann", - "P5ych0", - "teoli", - "Leun4m", - "medium-endian", - "pixunil" - ] - }, - "Web/API/Canvas_API/Tutorial/Drawing_shapes": { - "modified": "2019-10-06T12:20:20.273Z", - "contributors": [ - "I_I", - "oezpeda", - "Siphalor", - "teoli", - "Leun4m", - "thedaft", - "pixunil" - ] - }, - "Web/API/Canvas_API/Tutorial/Drawing_text": { - "modified": "2019-03-18T21:38:17.565Z", - "contributors": [ - "Johann150" - ] - }, - "Web/API/Canvas_API/Tutorial/Optimizing_canvas": { - "modified": "2019-03-18T21:47:09.896Z", - "contributors": [ - "SimonBuxx" - ] - }, - "Web/API/Canvas_API/Tutorial/Using_images": { - "modified": "2019-03-23T23:12:04.746Z", - "contributors": [ - "sombrastudios", - "teoli", - "Leun4m", - "thedaft", - "pixunil" - ] - }, - "Web/API/Console": { - "modified": "2020-10-15T21:47:34.377Z", - "contributors": [ - "SebinNyshkim", - "Claas", - "nilsding" - ] - }, - "Web/API/Console/assert": { - "modified": "2020-10-15T21:53:31.494Z", - "contributors": [ - "SebinNyshkim", - "amlang" - ] - }, - "Web/API/Console/clear": { - "modified": "2020-10-15T22:03:59.269Z", - "contributors": [ - "SebinNyshkim", - "Claas" - ] - }, - "Web/API/Console/count": { - "modified": "2020-10-15T22:03:54.713Z", - "contributors": [ - "SebinNyshkim", - "Claas" - ] - }, - "Web/API/Console/debug": { - "modified": "2020-10-15T22:15:25.961Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "Web/API/Console/dir": { - "modified": "2020-10-15T21:47:32.910Z", - "contributors": [ - "SebinNyshkim", - "fl1p" - ] - }, - "Web/API/Console/log": { - "modified": "2019-03-18T21:45:58.072Z", - "contributors": [ - "mikoMK" - ] - }, - "Web/API/Console/table": { - "modified": "2019-03-23T22:03:53.765Z", - "contributors": [ - "jewuma" - ] - }, - "Web/API/Console/time": { - "modified": "2020-10-15T22:15:52.847Z", - "contributors": [ - "Drachenfrucht1" - ] - }, - "Web/API/Console/timeEnd": { - "modified": "2020-10-15T22:15:53.315Z", - "contributors": [ - "Drachenfrucht1" - ] - }, - "Web/API/Console/warn": { - "modified": "2019-03-23T22:22:21.546Z", - "contributors": [ - "occcy" - ] - }, - "Web/API/Crypto": { - "modified": "2020-10-15T22:16:58.486Z", - "contributors": [ - "MonsieurLeSuisse" - ] - }, - "Web/API/CustomElementRegistry": { - "modified": "2020-10-15T22:22:33.015Z" - }, - "Web/API/CustomElementRegistry/define": { - "modified": "2020-10-15T22:22:28.920Z", - "contributors": [ - "vssn" - ] - }, - "Web/API/DOMError": { - "modified": "2019-03-23T22:50:32.748Z", - "contributors": [ - "MatthiasRubin" - ] - }, - "Web/API/DOMParser": { - "modified": "2019-03-31T11:19:33.896Z", - "contributors": [ - "flying-sheep", - "michaeljaekel", - "wskc", - "pinguin0815" - ] - }, - "Web/API/DOMTokenList": { - "modified": "2019-03-18T20:54:26.903Z", - "contributors": [ - "WaldemarEnns", - "StevenS77" - ] - }, - "Web/API/DOMTokenList/add": { - "modified": "2020-10-15T22:14:47.337Z", - "contributors": [ - "WaldemarEnns" - ] - }, - "Web/API/DedicatedWorkerGlobalScope": { - "modified": "2020-10-15T22:07:36.059Z", - "contributors": [ - "Jonafran" - ] - }, - "Web/API/DedicatedWorkerGlobalScope/message_event": { - "modified": "2020-10-15T22:30:43.733Z", - "contributors": [ - "peterneverland" - ] - }, - "Web/API/Document": { - "modified": "2020-10-21T11:20:23.142Z", - "contributors": [ - "MooMoo1971", - "wif10", - "fscholz", - "khalid32", - "Crash" - ] - }, - "Web/API/Document/Document": { - "modified": "2020-12-03T12:10:02.784Z", - "contributors": [ - "Gismo1337" - ] - }, - "Web/API/Document/URL": { - "modified": "2019-03-18T21:19:32.388Z", - "contributors": [ - "termoyer" - ] - }, - "Web/API/Document/adoptNode": { - "modified": "2019-03-23T22:05:48.291Z", - "contributors": [ - "wbamberg", - "amelzer" - ] - }, - "Web/API/Document/alinkColor": { - "modified": "2020-10-15T22:00:36.438Z", - "contributors": [ - "SphinxKnight", - "MuellerRi" - ] - }, - "Web/API/Document/body": { - "modified": "2019-03-18T21:43:52.106Z", - "contributors": [ - "Maugo", - "MuellerRi" - ] - }, - "Web/API/Document/createAttribute": { - "modified": "2019-03-23T22:44:53.939Z", - "contributors": [ - "frhd" - ] - }, - "Web/API/Document/createDocumentFragment": { - "modified": "2019-08-29T05:25:49.142Z", - "contributors": [ - "mwallnoefer", - "n4nos", - "dennissterzenbach" - ] - }, - "Web/API/Document/createElement": { - "modified": "2020-10-15T21:21:30.716Z", - "contributors": [ - "Ryuno-Ki", - "Lyian", - "Johann150", - "jakobpack", - "StevenS77", - "Johann", - "fscholz", - "jsx", - "MikeSierra" - ] - }, - "Web/API/Document/createElementNS": { - "modified": "2019-03-23T22:05:31.821Z", - "contributors": [ - "Univream", - "mrm2m" - ] - }, - "Web/API/Document/createTextNode": { - "modified": "2019-03-23T22:13:09.431Z", - "contributors": [ - "R-Steffens" - ] - }, - "Web/API/Document/createTreeWalker": { - "modified": "2019-03-18T21:15:37.770Z", - "contributors": [ - "bbarnickel" - ] - }, - "Web/API/Document/dir": { - "modified": "2019-03-23T22:16:28.287Z", - "contributors": [ - "StevenS77" - ] - }, - "Web/API/Document/documentElement": { - "modified": "2019-03-23T23:10:21.581Z", - "contributors": [ - "Padarom", - "clemenshelm", - "kensanata", - "Okimoka", - "fscholz", - "Hasilt", - "conradk" - ] - }, - "Web/API/Document/fullscreenchange_event": { - "modified": "2019-03-23T21:59:50.017Z", - "contributors": [ - "irenesmith", - "fscholz", - "axelrindle" - ] - }, - "Web/API/Document/getElementById": { - "modified": "2019-03-23T22:48:39.836Z", - "contributors": [ - "helmrich" - ] - }, - "Web/API/Document/getElementsByClassName": { - "modified": "2019-03-23T22:39:59.051Z", - "contributors": [ - "Ctwx" - ] - }, - "Web/API/Document/head": { - "modified": "2020-10-15T22:05:22.313Z", - "contributors": [ - "Maugo" - ] - }, - "Web/API/Document/importNode": { - "modified": "2020-10-15T21:56:58.261Z", - "contributors": [ - "fscholz", - "wbamberg", - "amelzer" - ] - }, - "Web/API/Document/querySelector": { - "modified": "2020-10-15T21:34:44.215Z", - "contributors": [ - "SebinNyshkim", - "StevenS77", - "Xan2063", - "rillig", - "cqcumber" - ] - }, - "Web/API/Document/querySelectorAll": { - "modified": "2020-10-15T21:36:31.203Z", - "contributors": [ - "Cerberooo", - "SebinNyshkim", - "basteyy" - ] - }, - "Web/API/Document/readyState": { - "modified": "2019-03-23T22:50:12.472Z", - "contributors": [ - "mdnde", - "NHoeller", - "felixbarny" - ] - }, - "Web/API/Document/readystatechange_event": { - "modified": "2019-03-23T22:13:59.735Z", - "contributors": [ - "fscholz", - "mdnde", - "cussack", - "Lepstr" - ] - }, - "Web/API/Document/referrer": { - "modified": "2020-10-15T22:05:23.720Z", - "contributors": [ - "ssgl", - "Maugo" - ] - }, - "Web/API/Document/registerElement": { - "modified": "2019-03-23T22:05:54.510Z", - "contributors": [ - "istvank", - "amelzer" - ] - }, - "Web/API/Document/title": { - "modified": "2020-10-15T22:30:18.787Z", - "contributors": [ - "dmitrijkiltau" - ] - }, - "Web/API/Document/width": { - "modified": "2019-03-18T21:44:04.786Z", - "contributors": [ - "MuellerRi" - ] - }, - "Web/API/Document/write": { - "modified": "2019-03-18T21:40:02.182Z", - "contributors": [ - "Johann150", - "AlexWayhill" - ] - }, - "Web/API/Document/writeln": { - "modified": "2020-11-13T09:58:09.106Z", - "contributors": [ - "sklicek" - ] - }, - "Web/API/DocumentFragment": { - "modified": "2019-03-23T22:08:16.482Z", - "contributors": [ - "dennissterzenbach" - ] - }, - "Web/API/Document_Object_Model": { - "modified": "2019-03-24T00:03:18.662Z", - "contributors": [ - "TheNT87", - "Barfooz", - "ethertank", - "fscholz", - "Crash", - "Takenbot", - "M@d Man" - ] - }, - "Web/API/DragEvent": { - "modified": "2019-03-23T22:49:37.460Z", - "contributors": [ - "fscholz", - "ulrobin" - ] - }, - "Web/API/Element": { - "modified": "2019-03-18T21:09:00.608Z", - "contributors": [ - "fscholz", - "jsx", - "Crash" - ] - }, - "Web/API/Element/classList": { - "modified": "2020-08-13T04:39:26.061Z", - "contributors": [ - "andi-hda", - "lupus92", - "GuidoJansen", - "macjohnny", - "ygoe", - "Heblkraft", - "StevenS77" - ] - }, - "Web/API/Element/className": { - "modified": "2019-03-18T21:37:02.027Z", - "contributors": [ - "BamBamXXL", - "Frexeptabel" - ] - }, - "Web/API/Element/click_event": { - "modified": "2019-03-23T22:40:31.019Z", - "contributors": [ - "patrickGold", - "MrTroble" - ] - }, - "Web/API/Element/getBoundingClientRect": { - "modified": "2020-10-15T21:37:23.206Z", - "contributors": [ - "napengam", - "SphinxKnight", - "phlmn", - "screeny05", - "giffeler", - "danieldiekmeier", - "jens-duttke", - "ohlupo" - ] - }, - "Web/API/Element/hasAttribute": { - "modified": "2019-03-23T22:09:30.403Z", - "contributors": [ - "JhonnyJason" - ] - }, - "Web/API/Element/innerHTML": { - "modified": "2020-10-15T21:48:27.953Z", - "contributors": [ - "SebinNyshkim", - "SphinxKnight", - "StevenS77", - "sfraenkel" - ] - }, - "Web/API/Element/insertAdjacentHTML": { - "modified": "2019-03-23T22:07:41.635Z", - "contributors": [ - "Oliver_Schafeld" - ] - }, - "Web/API/Element/querySelector": { - "modified": "2019-03-23T23:07:46.285Z", - "contributors": [ - "Wombosvideo", - "fscholz", - "NikxDa" - ] - }, - "Web/API/Element/querySelectorAll": { - "modified": "2019-05-03T00:57:19.062Z", - "contributors": [ - "wbamberg", - "Wombosvideo" - ] - }, - "Web/API/Element/removeAttribute": { - "modified": "2019-03-23T22:56:58.413Z", - "contributors": [ - "Harleqin" - ] - }, - "Web/API/Element/requestFullScreen": { - "modified": "2019-03-23T22:03:55.933Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/Element/scrollIntoView": { - "modified": "2020-10-15T21:45:57.703Z", - "contributors": [ - "webwelten", - "movedoa", - "denssle", - "petacat" - ] - }, - "Web/API/Element/scrollLeft": { - "modified": "2020-10-15T21:53:34.546Z", - "contributors": [ - "SphinxKnight", - "floheller" - ] - }, - "Web/API/Element/scrollWidth": { - "modified": "2020-10-15T21:37:53.393Z", - "contributors": [ - "SphinxKnight", - "ureimers" - ] - }, - "Web/API/Element/setAttribute": { - "modified": "2019-03-23T22:57:40.120Z", - "contributors": [ - "mw76", - "ConnyOnny" - ] - }, - "Web/API/Event": { - "modified": "2020-02-29T22:13:32.369Z", - "contributors": [ - "HeroicKatora", - "rpozarickij" - ] - }, - "Web/API/Event/Event": { - "modified": "2020-10-15T21:56:14.330Z", - "contributors": [ - "fscholz", - "Sharian" - ] - }, - "Web/API/Event/bubbles": { - "modified": "2019-03-23T22:07:43.481Z", - "contributors": [ - "Sharian" - ] - }, - "Web/API/EventSource": { - "modified": "2019-09-20T07:55:13.564Z", - "contributors": [ - "Locour", - "nexus511" - ] - }, - "Web/API/EventTarget/addEventListener": { - "modified": "2019-03-23T22:39:43.594Z", - "contributors": [ - "skanne", - "StevenS77", - "Ctwx" - ] - }, - "Web/API/FederatedCredential": { - "modified": "2019-03-23T22:07:15.338Z", - "contributors": [ - "amelzer" - ] - }, - "Web/API/Fetch_API": { - "modified": "2020-10-15T22:15:21.740Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "Web/API/File": { - "modified": "2019-03-23T23:01:44.475Z", - "contributors": [ - "marjot", - "fscholz" - ] - }, - "Web/API/File/name": { - "modified": "2019-03-23T23:33:48.935Z", - "contributors": [ - "rehne93", - "fscholz", - "nothine" - ] - }, - "Web/API/File/type": { - "modified": "2020-10-15T22:20:09.678Z", - "contributors": [ - "sklicek" - ] - }, - "Web/API/FileReader": { - "modified": "2019-03-23T22:50:30.774Z", - "contributors": [ - "migg24", - "S0mmerD", - "nlang", - "MatthiasRubin" - ] - }, - "Web/API/FileReader/load_event": { - "modified": "2019-03-23T22:41:15.437Z", - "contributors": [ - "rehne93", - "Stoffo" - ] - }, - "Web/API/File_API/Using_files_from_web_applications": { - "modified": "2019-03-18T20:49:17.436Z", - "contributors": [ - "Holger.Persch", - "MatthiasApsel", - "gunnarbittersmann", - "chrisdavidmills", - "icy", - "matschu" - ] - }, - "Web/API/FormData": { - "modified": "2020-10-15T21:49:26.043Z", - "contributors": [ - "kaljak", - "niorad", - "amelzer", - "Craeckerffm", - "ageiss", - "julidau" - ] - }, - "Web/API/FormData/FormData": { - "modified": "2019-03-23T22:15:29.095Z", - "contributors": [ - "DenisSabo", - "Xerus" - ] - }, - "Web/API/FormData/get": { - "modified": "2019-03-23T22:14:12.132Z", - "contributors": [ - "ageiss" - ] - }, - "Web/API/FormData/getAll": { - "modified": "2020-10-15T22:14:40.601Z", - "contributors": [ - "marjot" - ] - }, - "Web/API/Fullscreen_API": { - "modified": "2019-07-07T13:00:37.918Z", - "contributors": [ - "wbamberg", - "lazercaveman", - "Johann150", - "axelrindle" - ] - }, - "Web/API/GainNode": { - "modified": "2019-03-23T22:30:22.800Z", - "contributors": [ - "fl1p" - ] - }, - "Web/API/Gamepad_API": { - "modified": "2020-10-15T22:22:10.242Z", - "contributors": [ - "jogemu" - ] - }, - "Web/API/Geolocation": { - "modified": "2020-10-15T22:29:39.241Z", - "contributors": [ - "sideshowbarker" - ] - }, - "Web/API/Geolocation/getCurrentPosition": { - "modified": "2020-10-15T22:29:40.838Z", - "contributors": [ - "zuzuzu" - ] - }, - "Web/API/Geolocation_API": { - "modified": "2019-03-23T22:52:49.349Z", - "contributors": [ - "shaedrich", - "42triangles", - "silend" - ] - }, - "Web/API/GlobalEventHandlers": { - "modified": "2019-03-23T22:40:26.306Z", - "contributors": [ - "matschibatschi", - "AFBarstow" - ] - }, - "Web/API/HTMLCanvasElement": { - "modified": "2019-03-23T22:34:59.417Z", - "contributors": [ - "Aloso" - ] - }, - "Web/API/HTMLCanvasElement/toDataURL": { - "modified": "2019-03-18T20:33:40.334Z", - "contributors": [ - "bubens", - "frth", - "rkeller1" - ] - }, - "Web/API/HTMLCanvasElement/webglcontextcreationerror_event": { - "modified": "2019-03-18T20:55:30.956Z", - "contributors": [ - "fscholz", - "XChrome" - ] - }, - "Web/API/HTMLCanvasElement/webglcontextlost_event": { - "modified": "2019-03-18T20:55:30.751Z", - "contributors": [ - "fscholz", - "XChrome" - ] - }, - "Web/API/HTMLCanvasElement/webglcontextrestored_event": { - "modified": "2019-03-18T20:55:30.549Z", - "contributors": [ - "fscholz", - "XChrome" - ] - }, - "Web/API/HTMLCollection": { - "modified": "2019-03-23T22:51:48.387Z", - "contributors": [ - "Dargmuesli" - ] - }, - "Web/API/HTMLElement/change_event": { - "modified": "2019-03-23T23:08:15.170Z", - "contributors": [ - "fscholz", - "spiegelp" - ] - }, - "Web/API/HTMLElement/innerText": { - "modified": "2019-03-23T22:05:48.154Z", - "contributors": [ - "dekatko" - ] - }, - "Web/API/HTMLFormElement": { - "modified": "2019-03-23T22:03:37.984Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/API/HTMLFormElement/elements": { - "modified": "2020-12-04T04:24:55.583Z", - "contributors": [ - "Gismo1337", - "grandmalovesyou" - ] - }, - "Web/API/HTMLFormElement/submit_event": { - "modified": "2019-04-12T00:15:26.183Z", - "contributors": [ - "estelle", - "fscholz", - "Silv3rFlame" - ] - }, - "Web/API/HTMLHeadElement": { - "modified": "2019-03-24T00:04:41.043Z", - "contributors": [ - "schlagi123", - "teoli", - "fscholz", - "Crash" - ] - }, - "Web/API/HTMLInputElement": { - "modified": "2020-10-15T22:24:07.999Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/API/HTMLInputElement/select": { - "modified": "2020-10-15T22:23:56.047Z", - "contributors": [ - "bluefireoly" - ] - }, - "Web/API/HTMLSlotElement": { - "modified": "2020-10-15T22:06:32.529Z", - "contributors": [ - "fscholz" - ] - }, - "Web/API/HTMLSlotElement/assignedNodes": { - "modified": "2020-10-15T22:06:32.229Z", - "contributors": [ - "td8" - ] - }, - "Web/API/HTMLTableElement": { - "modified": "2020-10-15T22:32:18.729Z", - "contributors": [ - "jyasskin" - ] - }, - "Web/API/HTMLTableElement/createCaption": { - "modified": "2020-10-15T22:32:16.249Z", - "contributors": [ - "Rolf_B" - ] - }, - "Web/API/HTMLTableElement/insertRow": { - "modified": "2020-10-15T22:32:17.952Z", - "contributors": [ - "Rolf_B" - ] - }, - "Web/API/HTMLUnknownElement": { - "modified": "2020-11-01T23:01:21.360Z", - "contributors": [ - "sgadola" - ] - }, - "Web/API/HTML_Drag_and_Drop_API": { - "modified": "2019-03-23T23:26:04.264Z", - "contributors": [ - "drewp" - ] - }, - "Web/API/History_API": { - "modified": "2019-03-23T23:28:10.854Z", - "contributors": [ - "wanst", - "NiklasMerz", - "daniel-evers", - "Adowrath", - "serv-inc", - "Oliver_Schafeld", - "BugHunter2k", - "christian314159", - "darksider3" - ] - }, - "Web/API/IndexedDB_API": { - "modified": "2020-02-19T04:36:45.707Z", - "contributors": [ - "SanQu", - "chrisdavidmills", - "Oliver_Schafeld", - "jdoose", - "syncopation", - "braeutigamj", - "senk", - "tleilax", - "NiklasMerz", - "Patrick_St.", - "Huan" - ] - }, - "Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria": { - "modified": "2020-01-13T04:47:56.415Z", - "contributors": [ - "chrisdavidmills", - "StefanSurkamp", - "grubec" - ] - }, - "Web/API/IndexedDB_API/Using_IndexedDB": { - "modified": "2020-01-13T04:47:56.201Z", - "contributors": [ - "chrisdavidmills", - "p.root", - "mdieblich", - "floheller", - "HendrikRunte", - "Nys", - "Julini" - ] - }, - "Web/API/KeyboardEvent": { - "modified": "2019-03-18T21:09:07.273Z", - "contributors": [ - "fscholz", - "wbamberg", - "th1nk3th" - ] - }, - "Web/API/KeyboardEvent/altKey": { - "modified": "2019-03-23T22:03:19.040Z", - "contributors": [ - "uki9" - ] - }, - "Web/API/KeyboardEvent/getModifierState": { - "modified": "2020-10-15T22:06:57.788Z", - "contributors": [ - "amlang" - ] - }, - "Web/API/KeyboardEvent/keyCode": { - "modified": "2020-10-15T22:11:25.377Z", - "contributors": [ - "bastiion" - ] - }, - "Web/API/MessageEvent": { - "modified": "2019-03-18T21:34:29.406Z", - "contributors": [ - "sv3m0r" - ] - }, - "Web/API/MouseEvent": { - "modified": "2019-03-18T21:46:34.463Z", - "contributors": [ - "vssn" - ] - }, - "Web/API/MutationObserver": { - "modified": "2019-10-29T08:01:54.030Z", - "contributors": [ - "Locour", - "fscholz", - "achimbode" - ] - }, - "Web/API/Navigator": { - "modified": "2019-03-23T23:01:44.074Z", - "contributors": [ - "wbamberg", - "fscholz" - ] - }, - "Web/API/Navigator/registerProtocolHandler": { - "modified": "2019-03-23T22:01:55.616Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": { - "modified": "2019-03-23T22:33:54.067Z", - "contributors": [ - "chrisdavidmills", - "Faibk" - ] - }, - "Web/API/Navigator/sendBeacon": { - "modified": "2019-03-23T22:27:50.837Z", - "contributors": [ - "Oliver_Schafeld" - ] - }, - "Web/API/Navigator/vibrate": { - "modified": "2019-05-12T10:32:06.632Z", - "contributors": [ - "jannnis", - "petzichen" - ] - }, - "Web/API/Node": { - "modified": "2019-10-07T12:42:22.118Z", - "contributors": [ - "fscholz", - "khalid32", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/appendChild": { - "modified": "2020-05-05T11:21:55.640Z", - "contributors": [ - "Coding-Boss", - "prozax", - "saldor", - "yampus", - "StevenS77" - ] - }, - "Web/API/Node/childNodes": { - "modified": "2019-03-23T23:38:40.521Z", - "contributors": [ - "fscholz", - "AshfaqHossain", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/cloneNode": { - "modified": "2019-03-23T23:21:01.873Z", - "contributors": [ - "martin_ti", - "Haftmann", - "Hativ3", - "fscholz", - "herom", - "pixunil" - ] - }, - "Web/API/Node/firstChild": { - "modified": "2019-03-23T23:38:33.888Z", - "contributors": [ - "marcows", - "fscholz", - "khalid32", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/hasChildNodes": { - "modified": "2019-03-23T22:05:54.908Z", - "contributors": [ - "dekatko" - ] - }, - "Web/API/Node/lastChild": { - "modified": "2019-03-23T23:38:33.584Z", - "contributors": [ - "fscholz", - "khalid32", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/nextSibling": { - "modified": "2019-03-23T23:38:40.167Z", - "contributors": [ - "fscholz", - "Hasilt", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/nodeValue": { - "modified": "2019-03-18T21:15:27.736Z", - "contributors": [ - "dekatko" - ] - }, - "Web/API/Node/normalize": { - "modified": "2019-03-23T22:38:55.076Z", - "contributors": [ - "jsiebern" - ] - }, - "Web/API/Node/parentNode": { - "modified": "2019-03-23T23:38:33.082Z", - "contributors": [ - "fscholz", - "khalid32", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/previousSibling": { - "modified": "2019-03-23T23:38:39.575Z", - "contributors": [ - "fscholz", - "AshfaqHossain", - "wepunkt_empunkt" - ] - }, - "Web/API/Node/removeChild": { - "modified": "2019-03-23T22:50:31.643Z", - "contributors": [ - "funkhauscreative", - "opatut" - ] - }, - "Web/API/Node/replaceChild": { - "modified": "2019-09-29T03:47:24.159Z", - "contributors": [ - "grumpy-cat", - "fscholz", - "jsx", - "Jonas" - ] - }, - "Web/API/Node/textContent": { - "modified": "2020-10-15T21:19:51.146Z", - "contributors": [ - "kaljak", - "tordans", - "user-4", - "Tar-Minyatur", - "fscholz", - "wepunkt_empunkt" - ] - }, - "Web/API/Page_Visibility_API": { - "modified": "2019-03-23T22:13:05.174Z", - "contributors": [ - "dennissterzenbach" - ] - }, - "Web/API/Performance": { - "modified": "2020-10-15T21:56:24.244Z", - "contributors": [ - "fscholz", - "Sheppy" - ] - }, - "Web/API/Performance/now": { - "modified": "2019-03-23T22:07:09.095Z", - "contributors": [ - "mknospe", - "nylki", - "lionralfs", - "amelzer" - ] - }, - "Web/API/PushManager": { - "modified": "2019-09-30T11:38:12.645Z", - "contributors": [ - "Callahad" - ] - }, - "Web/API/PushManager/subscribe": { - "modified": "2019-03-23T22:37:33.601Z", - "contributors": [ - "f0rkB0mb" - ] - }, - "Web/API/Push_API": { - "modified": "2019-03-18T21:23:15.619Z", - "contributors": [ - "aquorange" - ] - }, - "Web/API/RTCIceCandidate": { - "modified": "2019-03-23T22:06:19.046Z", - "contributors": [ - "PixelSnake" - ] - }, - "Web/API/RTCRtpTransceiver": { - "modified": "2020-10-15T22:26:06.821Z", - "contributors": [ - "Sheppy" - ] - }, - "Web/API/RTCRtpTransceiver/direction": { - "modified": "2020-10-15T22:26:02.417Z", - "contributors": [ - "NasskalteJuni" - ] - }, - "Web/API/Range": { - "modified": "2019-03-23T22:16:01.377Z", - "contributors": [ - "timdream" - ] - }, - "Web/API/Range/Range": { - "modified": "2019-03-23T22:16:05.966Z", - "contributors": [ - "StevenS77" - ] - }, - "Web/API/ReadableStream": { - "modified": "2020-10-15T21:56:17.020Z", - "contributors": [ - "Nerixyz", - "jcsahnwaldt", - "ksm2" - ] - }, - "Web/API/Response": { - "modified": "2020-10-15T22:15:25.221Z", - "contributors": [ - "dritter", - "SebinNyshkim" - ] - }, - "Web/API/Response/Response": { - "modified": "2020-10-15T22:15:23.753Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "Web/API/ServiceWorker": { - "modified": "2020-11-19T03:27:18.281Z", - "contributors": [ - "SphinxKnight", - "DieLokoMotive" - ] - }, - "Web/API/ServiceWorkerContainer": { - "modified": "2019-03-23T22:38:55.614Z", - "contributors": [ - "jsx" - ] - }, - "Web/API/ServiceWorkerContainer/register": { - "modified": "2019-03-23T22:38:49.419Z", - "contributors": [ - "Keviddle", - "SimonIT" - ] - }, - "Web/API/Service_Worker_API": { - "modified": "2020-12-02T13:46:48.121Z", - "contributors": [ - "daazb001", - "DavidVieweg", - "bitbruder", - "TobiDo", - "SimonIT" - ] - }, - "Web/API/Service_Worker_API/Using_Service_Workers": { - "modified": "2019-03-23T22:38:54.934Z", - "contributors": [ - "mattweb", - "wischi-chr", - "amelzer", - "pbdevch", - "nicam", - "sspringer82", - "SimonIT" - ] - }, - "Web/API/SharedWorker": { - "modified": "2020-10-15T22:22:26.754Z", - "contributors": [ - "ChristianReifberger" - ] - }, - "Web/API/SpeechSynthesis": { - "modified": "2020-10-15T22:08:29.021Z", - "contributors": [ - "rs-github" - ] - }, - "Web/API/Storage": { - "modified": "2019-03-23T22:16:52.557Z", - "contributors": [ - "mdnde2", - "RewoSiedge", - "mdnde" - ] - }, - "Web/API/Storage/clear": { - "modified": "2020-10-15T22:07:15.610Z", - "contributors": [ - "mdnde2" - ] - }, - "Web/API/Storage/getItem": { - "modified": "2020-10-15T22:04:15.816Z", - "contributors": [ - "mdnde2", - "RewoSiedge" - ] - }, - "Web/API/Storage/key": { - "modified": "2020-10-15T22:07:14.945Z", - "contributors": [ - "mdnde2" - ] - }, - "Web/API/Storage/length": { - "modified": "2020-10-15T22:07:13.917Z", - "contributors": [ - "mdnde2" - ] - }, - "Web/API/Storage/removeItem": { - "modified": "2020-10-15T22:07:15.302Z", - "contributors": [ - "mdnde2" - ] - }, - "Web/API/Storage/setItem": { - "modified": "2019-03-18T21:36:51.942Z", - "contributors": [ - "mdnde2", - "RewoSiedge" - ] - }, - "Web/API/Transferable": { - "modified": "2019-03-18T21:45:46.055Z", - "contributors": [ - "dennissterzenbach" - ] - }, - "Web/API/URL": { - "modified": "2019-03-23T22:53:00.444Z", - "contributors": [ - "myakura" - ] - }, - "Web/API/URL/createObjectURL": { - "modified": "2019-03-23T22:53:03.628Z", - "contributors": [ - "icy", - "mbolli", - "tuschcarsten" - ] - }, - "Web/API/URL/protocol": { - "modified": "2020-10-15T22:23:16.608Z", - "contributors": [ - "atopion" - ] - }, - "Web/API/URLSearchParams": { - "modified": "2019-03-23T22:08:03.108Z", - "contributors": [ - "Stefie", - "bendlas" - ] - }, - "Web/API/WebGLActiveInfo": { - "modified": "2019-03-23T22:35:02.340Z", - "contributors": [ - "firefligher" - ] - }, - "Web/API/WebGLProgram": { - "modified": "2019-03-23T22:35:02.729Z", - "contributors": [ - "firefligher" - ] - }, - "Web/API/WebGLRenderingContext": { - "modified": "2019-03-23T22:35:00.582Z", - "contributors": [ - "fscholz" - ] - }, - "Web/API/WebGLRenderingContext/canvas": { - "modified": "2020-10-15T22:08:19.734Z", - "contributors": [ - "JulianHilbers" - ] - }, - "Web/API/WebGLRenderingContext/getActiveAttrib": { - "modified": "2019-03-23T22:35:02.539Z", - "contributors": [ - "firefligher" - ] - }, - "Web/API/WebGLRenderingContext/getAttribLocation": { - "modified": "2020-10-15T22:08:19.909Z", - "contributors": [ - "JulianHilbers" - ] - }, - "Web/API/WebGL_API": { - "modified": "2019-03-24T00:05:46.812Z", - "contributors": [ - "XChrome", - "fscholz", - "Faldrian", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial": { - "modified": "2019-03-23T22:52:40.621Z", - "contributors": [ - "fscholz" - ] - }, - "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": { - "modified": "2019-03-18T20:49:18.784Z", - "contributors": [ - "jsinge", - "noxafy", - "fscholz", - "teoli", - "TimN", - "WNC7" - ] - }, - "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": { - "modified": "2019-03-18T21:15:16.400Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": { - "modified": "2019-03-24T00:04:47.741Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL": { - "modified": "2019-03-24T00:04:47.020Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": { - "modified": "2019-03-24T00:05:30.371Z", - "contributors": [ - "noxafy", - "Oliver_Schafeld", - "H3ndr1k", - "xhallix", - "manni66", - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL": { - "modified": "2019-03-24T00:04:49.766Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": { - "modified": "2019-03-24T00:09:11.465Z", - "contributors": [ - "fscholz", - "teoli", - "WNC7" - ] - }, - "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": { - "modified": "2019-03-24T00:04:48.015Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebSocket": { - "modified": "2019-10-02T19:29:23.339Z", - "contributors": [ - "BoyTheBoy", - "firefligher" - ] - }, - "Web/API/WebSocket/binaryType": { - "modified": "2020-10-15T22:23:15.714Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSocket/close": { - "modified": "2020-10-15T22:23:16.488Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSocket/close_event": { - "modified": "2019-10-02T19:24:05.254Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSocket/extensions": { - "modified": "2020-10-15T22:23:14.946Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSocket/protocol": { - "modified": "2020-10-15T22:23:16.820Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSocket/readyState": { - "modified": "2020-10-15T22:23:15.511Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSocket/url": { - "modified": "2020-10-15T22:23:17.351Z", - "contributors": [ - "axelrindle" - ] - }, - "Web/API/WebSockets_API": { - "modified": "2019-03-23T22:59:48.670Z", - "contributors": [ - "Johann150", - "mvb1996" - ] - }, - "Web/API/WebSockets_API/Writing_WebSocket_servers": { - "modified": "2020-08-15T02:07:04.944Z", - "contributors": [ - "otde2016" - ] - }, - "Web/API/Web_Animations_API": { - "modified": "2019-03-18T21:09:35.736Z", - "contributors": [ - "bitbruder" - ] - }, - "Web/API/Web_Storage_API": { - "modified": "2020-05-10T13:24:40.006Z", - "contributors": [ - "tobysoby", - "jswisher", - "mhash17" - ] - }, - "Web/API/Web_Workers_API": { - "modified": "2020-04-30T05:09:05.345Z", - "contributors": [ - "ustark", - "Guchen", - "daknuett" - ] - }, - "Web/API/Window": { - "modified": "2019-03-24T00:07:16.651Z", - "contributors": [ - "rowild", - "Eddcapone", - "fl1p", - "fscholz", - "khalid32", - "fryn", - "Crash" - ] - }, - "Web/API/Window/DOMContentLoaded_event": { - "modified": "2019-04-30T14:16:07.184Z", - "contributors": [ - "wbamberg", - "timvancleef", - "forrestkirby", - "fscholz", - "Sewi", - "horlabs" - ] - }, - "Web/API/Window/afterprint_event": { - "modified": "2019-03-23T22:23:55.422Z", - "contributors": [ - "maxx-dev" - ] - }, - "Web/API/Window/alert": { - "modified": "2019-03-23T23:14:26.063Z", - "contributors": [ - "Anonymous", - "fscholz", - "Fxedel" - ] - }, - "Web/API/Window/applicationCache": { - "modified": "2019-03-23T22:45:08.850Z", - "contributors": [ - "Hansschmucker" - ] - }, - "Web/API/Window/cancelAnimationFrame": { - "modified": "2020-10-15T21:37:50.737Z", - "contributors": [ - "thunderhook", - "rhulha" - ] - }, - "Web/API/Window/close": { - "modified": "2020-10-15T22:23:30.810Z", - "contributors": [ - "vssn" - ] - }, - "Web/API/Window/confirm": { - "modified": "2019-03-23T22:04:30.930Z", - "contributors": [ - "Aloso" - ] - }, - "Web/API/Window/console": { - "modified": "2019-06-13T07:23:43.074Z", - "contributors": [ - "AndreasWebdev" - ] - }, - "Web/API/Window/devicemotion_event": { - "modified": "2019-03-18T21:15:10.920Z", - "contributors": [ - "clepsydra", - "m9898" - ] - }, - "Web/API/Window/dump": { - "modified": "2019-03-23T23:34:35.263Z", - "contributors": [ - "fscholz", - "jsx", - "Jon_Deo" - ] - }, - "Web/API/Window/hashchange_event": { - "modified": "2019-03-23T22:49:53.661Z", - "contributors": [ - "flosommerfeld", - "ulrobin" - ] - }, - "Web/API/Window/history": { - "modified": "2019-03-23T22:06:44.422Z", - "contributors": [ - "kilrogg" - ] - }, - "Web/API/Window/length": { - "modified": "2020-10-15T22:10:25.849Z", - "contributors": [ - "thunderhook" - ] - }, - "Web/API/Window/load_event": { - "modified": "2019-09-11T09:06:16.530Z", - "contributors": [ - "wbamberg", - "fscholz", - "LeoDecking" - ] - }, - "Web/API/Window/localStorage": { - "modified": "2020-10-15T21:37:58.478Z", - "contributors": [ - "thunderhook", - "mdnde", - "MirkoSbr" - ] - }, - "Web/API/Window/name": { - "modified": "2020-10-15T22:10:27.977Z", - "contributors": [ - "thunderhook" - ] - }, - "Web/API/Window/navigator": { - "modified": "2020-10-15T21:36:44.039Z", - "contributors": [ - "vssn", - "Hansschmucker", - "AdamNiezielinski" - ] - }, - "Web/API/Window/openDialog": { - "modified": "2020-11-15T17:34:16.679Z", - "contributors": [ - "arndissler", - "Schepp", - "fscholz", - "xuancanh", - "nurfz", - "j3s.ch" - ] - }, - "Web/API/Window/opener": { - "modified": "2019-03-23T22:31:18.645Z", - "contributors": [ - "frickth" - ] - }, - "Web/API/Window/popstate_event": { - "modified": "2019-03-23T22:35:53.667Z", - "contributors": [ - "checkdotdot", - "Oliver_Schafeld" - ] - }, - "Web/API/Window/print": { - "modified": "2020-10-15T21:39:45.899Z", - "contributors": [ - "nopeJS", - "Hansschmucker" - ] - }, - "Web/API/Window/prompt": { - "modified": "2019-03-23T22:28:55.418Z", - "contributors": [ - "Aloso", - "G3nadi" - ] - }, - "Web/API/Window/resize_event": { - "modified": "2019-03-23T22:10:57.097Z", - "contributors": [ - "mecograph" - ] - }, - "Web/API/Window/screenX": { - "modified": "2019-03-23T22:26:08.473Z", - "contributors": [ - "baumanno" - ] - }, - "Web/API/Window/scroll": { - "modified": "2019-03-23T22:51:52.606Z", - "contributors": [ - "Hansschmucker", - "Dargmuesli" - ] - }, - "Web/API/Window/scrollTo": { - "modified": "2020-10-15T22:20:10.130Z", - "contributors": [ - "bigjilm", - "AndreasWebdev" - ] - }, - "Web/API/Window/sessionStorage": { - "modified": "2020-10-15T21:44:31.143Z", - "contributors": [ - "thunderhook", - "mdnde", - "filecage", - "HendrikRunte", - "occcy" - ] - }, - "Web/API/Window/stop": { - "modified": "2019-03-23T22:48:41.577Z", - "contributors": [ - "Dargmuesli" - ] - }, - "Web/API/WindowEventHandlers": { - "modified": "2019-03-23T22:50:03.877Z", - "contributors": [ - "teoli" - ] - }, - "Web/API/WindowOrWorkerGlobalScope": { - "modified": "2019-03-23T22:50:32.909Z", - "contributors": [ - "teoli" - ] - }, - "Web/API/Worker": { - "modified": "2019-03-18T21:45:39.485Z", - "contributors": [ - "dennissterzenbach" - ] - }, - "Web/API/XMLHttpRequest": { - "modified": "2019-05-02T20:00:09.647Z", - "contributors": [ - "wbamberg", - "sebastianroming", - "fscholz", - "Sebastianz", - "ethertank", - "paul_thomann" - ] - }, - "Web/API/btoa": { - "modified": "2019-03-23T22:50:32.544Z", - "contributors": [ - "cami" - ] - }, - "Web/API/notification": { - "modified": "2019-03-23T22:55:22.604Z", - "contributors": [ - "DonChef660", - "jukiki", - "DoomyTheFroomy", - "thomalow" - ] - }, - "Web/API/notification/permission": { - "modified": "2019-03-23T22:19:13.782Z", - "contributors": [ - "schlagi123", - "mwsh2005" - ] - }, - "Web/API/performance_property": { - "modified": "2019-03-23T22:07:15.480Z", - "contributors": [ - "amelzer" - ] - }, - "Web/API/setTimeout": { - "modified": "2019-03-23T23:36:28.621Z", - "contributors": [ - "mdnde", - "Eschon", - "fscholz", - "c0ffm3k4r", - "wartab" - ] - }, - "Web/Accessibility": { - "modified": "2019-09-09T14:09:32.470Z", - "contributors": [ - "SphinxKnight", - "alippold", - "teoli", - "fscholz", - "Mgalpha" - ] - }, - "Web/Accessibility/ARIA": { - "modified": "2019-03-23T23:21:04.985Z", - "contributors": [ - "a.lippold", - "marc-se", - "iMeta", - "eminor", - "teoli" - ] - }, - "Web/Accessibility/ARIA/ARIA_Live_Regions": { - "modified": "2019-03-23T23:15:24.210Z", - "contributors": [ - "teoli", - "eminor" - ] - }, - "Web/Accessibility/ARIA/ARIA_Techniques": { - "modified": "2019-03-18T21:43:56.504Z", - "contributors": [ - "juliankern" - ] - }, - "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": { - "modified": "2019-03-23T23:17:39.742Z", - "contributors": [ - "juliankern", - "christophfink", - "teoli", - "eminor" - ] - }, - "Web/Accessibility/Keyboard-navigable_JavaScript_widgets": { - "modified": "2019-03-23T23:11:54.393Z", - "contributors": [ - "eminor" - ] - }, - "Web/CSS": { - "modified": "2020-12-03T15:50:42.872Z", - "contributors": [ - "Johuspect", - "duckymirror", - "SphinxKnight", - "prayash", - "Sebastianz", - "fscholz", - "bee8bit", - "SJW", - "ethertank", - "DavidWalsh", - "Michael2402", - "Takenbot", - "Yor.feix" - ] - }, - "Web/CSS/-moz-float-edge": { - "modified": "2019-03-23T22:44:51.739Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/-moz-force-broken-image-icon": { - "modified": "2019-03-18T21:16:01.306Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/-moz-image-rect": { - "modified": "2019-03-23T22:43:51.533Z", - "contributors": [ - "mrstork", - "SphinxKnight", - "Sebastianz" - ] - }, - "Web/CSS/-moz-image-region": { - "modified": "2019-03-24T00:03:45.581Z", - "contributors": [ - "Sebastianz", - "teoli", - "fscholz", - "SJW", - "Lukas Skywalker" - ] - }, - "Web/CSS/-moz-orient": { - "modified": "2020-10-15T21:39:42.190Z", - "contributors": [ - "SJW", - "SphinxKnight", - "Sebastianz" - ] - }, - "Web/CSS/-moz-outline-radius": { - "modified": "2019-03-23T22:43:58.788Z", - "contributors": [ - "teoli", - "Simplexible", - "Prinz_Rana", - "Sebastianz" - ] - }, - "Web/CSS/-moz-outline-radius-bottomleft": { - "modified": "2019-03-23T22:44:02.081Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/-moz-outline-radius-bottomright": { - "modified": "2019-03-23T22:44:02.996Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/-moz-outline-radius-topleft": { - "modified": "2019-03-23T22:43:54.596Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/-moz-outline-radius-topright": { - "modified": "2019-03-23T22:43:59.421Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/-moz-user-focus": { - "modified": "2019-03-23T22:45:03.777Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-moz-user-input": { - "modified": "2019-03-24T00:03:50.218Z", - "contributors": [ - "Sebastianz", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/-webkit-box-reflect": { - "modified": "2019-03-23T22:45:19.920Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-webkit-mask-position-x": { - "modified": "2019-03-18T21:41:43.515Z", - "contributors": [ - "teoli", - "felixhaeberle" - ] - }, - "Web/CSS/-webkit-mask-position-y": { - "modified": "2019-03-18T21:41:54.720Z", - "contributors": [ - "teoli", - "felixhaeberle" - ] - }, - "Web/CSS/-webkit-mask-repeat-x": { - "modified": "2019-03-18T21:41:42.607Z", - "contributors": [ - "felixhaeberle" - ] - }, - "Web/CSS/-webkit-mask-repeat-y": { - "modified": "2019-03-18T21:41:44.223Z", - "contributors": [ - "felixhaeberle" - ] - }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2019-03-23T22:42:43.885Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-webkit-tap-highlight-color": { - "modified": "2019-03-18T21:41:41.637Z", - "contributors": [ - "felixhaeberle" - ] - }, - "Web/CSS/-webkit-text-fill-color": { - "modified": "2019-03-23T22:45:21.560Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-webkit-text-stroke": { - "modified": "2020-11-09T04:48:13.997Z", - "contributors": [ - "sideshowbarker", - "codingdudecom", - "teoli", - "cachius", - "Sebastianz" - ] - }, - "Web/CSS/-webkit-text-stroke-color": { - "modified": "2019-03-23T22:44:44.432Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-webkit-text-stroke-width": { - "modified": "2019-03-23T22:44:59.950Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-webkit-touch-callout": { - "modified": "2019-03-23T22:44:02.217Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/:-moz-broken": { - "modified": "2019-03-18T21:16:55.826Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-drag-over": { - "modified": "2019-03-23T22:45:19.500Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-first-node": { - "modified": "2019-03-23T22:45:27.549Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-focusring": { - "modified": "2019-03-23T22:45:19.298Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/:-moz-handler-blocked": { - "modified": "2019-03-23T22:45:31.823Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-handler-crashed": { - "modified": "2019-03-23T22:45:39.224Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-handler-disabled": { - "modified": "2019-03-18T21:15:58.423Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-last-node": { - "modified": "2019-03-23T22:45:38.353Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-list-bullet": { - "modified": "2019-03-23T22:45:32.268Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-list-number": { - "modified": "2019-03-23T22:45:15.840Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-loading": { - "modified": "2019-03-23T22:45:32.162Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-locale-dir(ltr)": { - "modified": "2019-03-23T22:44:58.165Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-locale-dir(rtl)": { - "modified": "2019-03-23T22:44:55.227Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-only-whitespace": { - "modified": "2019-03-23T22:45:18.314Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-submit-invalid": { - "modified": "2020-10-15T21:39:39.769Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:-moz-suppressed": { - "modified": "2019-03-23T22:45:39.319Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-user-disabled": { - "modified": "2019-03-23T22:44:53.355Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/:-moz-window-inactive": { - "modified": "2020-10-15T21:39:59.789Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/::-moz-page": { - "modified": "2019-03-23T22:44:43.530Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/::-moz-page-sequence": { - "modified": "2019-03-23T22:45:17.973Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/::-moz-progress-bar": { - "modified": "2019-03-23T22:44:41.295Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/::-moz-scrolled-page-sequence": { - "modified": "2019-03-18T21:15:12.656Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/::after": { - "modified": "2020-10-15T21:29:20.506Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/::backdrop": { - "modified": "2020-10-15T21:40:01.051Z", - "contributors": [ - "SJW", - "ExE-Boss", - "marc-se", - "Sebastianz" - ] - }, - "Web/CSS/::before": { - "modified": "2020-10-15T21:26:19.550Z", - "contributors": [ - "stephanduesterhoeft", - "jhard", - "SJW", - "LevitatingOrange", - "Sebastianz", - "tim_kraut" - ] - }, - "Web/CSS/::marker": { - "modified": "2020-12-09T15:20:46.154Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/::selection": { - "modified": "2020-10-15T21:28:39.218Z", - "contributors": [ - "SJW", - "Sebastianz", - "iGadget" - ] - }, - "Web/CSS/:active": { - "modified": "2020-10-15T21:25:36.592Z", - "contributors": [ - "SJW", - "virtusmaior", - "jwhitlock", - "yckart", - "Sebastianz", - "webtobesocial" - ] - }, - "Web/CSS/:autofill": { - "modified": "2019-03-23T22:43:43.075Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/:default": { - "modified": "2020-10-15T21:28:32.800Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:dir": { - "modified": "2020-10-15T21:40:13.117Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:disabled": { - "modified": "2020-10-15T21:29:29.796Z", - "contributors": [ - "SJW", - "Volker-E", - "klepek42", - "Sebastianz", - "gruntswilldie" - ] - }, - "Web/CSS/:empty": { - "modified": "2020-10-15T21:13:59.334Z", - "contributors": [ - "SJW", - "Sebastianz", - "Strongground", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/:enabled": { - "modified": "2020-10-15T21:40:12.250Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:first": { - "modified": "2020-10-15T21:39:40.240Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:first-child": { - "modified": "2020-10-15T21:28:28.227Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:first-of-type": { - "modified": "2020-10-15T21:28:41.905Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:focus": { - "modified": "2020-10-15T21:25:43.461Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:fullscreen": { - "modified": "2020-10-15T21:25:34.953Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:hover": { - "modified": "2020-10-15T21:30:31.117Z", - "contributors": [ - "SJW", - "Sebastianz", - "felhe", - "Hecky77" - ] - }, - "Web/CSS/:in-range": { - "modified": "2020-10-15T22:05:48.695Z", - "contributors": [ - "danieldeichfuss" - ] - }, - "Web/CSS/:indeterminate": { - "modified": "2020-10-15T21:29:20.109Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:invalid": { - "modified": "2020-10-15T21:54:12.121Z", - "contributors": [ - "SJW", - "forrestkirby" - ] - }, - "Web/CSS/:lang": { - "modified": "2020-10-15T21:13:55.617Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/:last-child": { - "modified": "2020-10-15T21:26:43.574Z", - "contributors": [ - "SJW", - "Sebastianz", - "Florian_1990" - ] - }, - "Web/CSS/:last-of-type": { - "modified": "2020-10-15T21:28:37.047Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:link": { - "modified": "2020-10-15T21:25:36.539Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:not": { - "modified": "2020-10-15T21:25:38.458Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:nth-child": { - "modified": "2020-10-15T21:37:14.005Z", - "contributors": [ - "forrestkirby", - "SJW", - "Faldrian", - "DagmarTimmreck", - "teoli", - "Sebastianz", - "antonharald" - ] - }, - "Web/CSS/:only-child": { - "modified": "2020-10-15T21:28:16.690Z", - "contributors": [ - "SJW", - "RmnWtnkmp", - "HerrSerker" - ] - }, - "Web/CSS/:optional": { - "modified": "2020-10-15T21:25:35.468Z", - "contributors": [ - "SJW", - "schlagi123", - "Sebastianz" - ] - }, - "Web/CSS/:out-of-range": { - "modified": "2020-10-15T21:28:37.407Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:placeholder-shown": { - "modified": "2019-03-23T23:11:34.619Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/:required": { - "modified": "2020-10-15T21:25:36.354Z", - "contributors": [ - "SJW", - "schlagi123", - "Sebastianz" - ] - }, - "Web/CSS/:root": { - "modified": "2020-10-15T21:29:10.328Z", - "contributors": [ - "bitbruder", - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/:user-invalid": { - "modified": "2019-03-23T22:42:35.620Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/:visited": { - "modified": "2020-10-15T21:25:40.147Z", - "contributors": [ - "SJW", - "Sebastianz", - "teoli", - "felhe" - ] - }, - "Web/CSS/@charset": { - "modified": "2020-10-15T21:29:01.737Z", - "contributors": [ - "SJW", - "Krenair", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/@document": { - "modified": "2020-10-15T21:25:35.781Z", - "contributors": [ - "SJW", - "teoli", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/@import": { - "modified": "2020-10-15T21:13:54.228Z", - "contributors": [ - "SJW", - "Guillaume-Heras", - "mrstork", - "Sebastianz", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/@keyframes": { - "modified": "2020-10-15T21:28:16.476Z", - "contributors": [ - "SJW", - "bermudaa", - "clone", - "Sebastianz", - "fscholz", - "danners", - "Sheppy", - "Fxedel" - ] - }, - "Web/CSS/@media": { - "modified": "2020-10-15T21:40:00.321Z", - "contributors": [ - "SJW", - "fscholz", - "cvrebert" - ] - }, - "Web/CSS/@media/any-pointer": { - "modified": "2020-10-15T21:39:58.352Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/@media/aural": { - "modified": "2019-03-23T22:45:45.488Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/@media/pointer": { - "modified": "2020-10-15T22:00:22.214Z", - "contributors": [ - "fscholz", - "schlesingermatthias" - ] - }, - "Web/CSS/@media/prefers-reduced-motion": { - "modified": "2020-10-15T22:33:51.417Z", - "contributors": [ - "DanielNL" - ] - }, - "Web/CSS/@media/width": { - "modified": "2020-10-15T21:46:53.407Z", - "contributors": [ - "SJW", - "HighTower79" - ] - }, - "Web/CSS/@page": { - "modified": "2020-10-15T21:39:37.782Z", - "contributors": [ - "chrisdavidmills", - "SJW", - "Prinz_Rana", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/@viewport": { - "modified": "2020-10-15T21:36:26.323Z", - "contributors": [ - "SJW", - "ExE-Boss", - "stefankahlau", - "fscholz", - "holgerjakobs" - ] - }, - "Web/CSS/Adjacent_sibling_combinator": { - "modified": "2020-10-15T21:39:56.944Z", - "contributors": [ - "ExE-Boss", - "Sebastianz" - ] - }, - "Web/CSS/Alternative_style_sheets": { - "modified": "2019-03-23T22:43:32.591Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/At-rule": { - "modified": "2019-03-23T22:44:51.883Z", - "contributors": [ - "Claas", - "Sebastianz" - ] - }, - "Web/CSS/Attribute_selectors": { - "modified": "2020-10-15T21:25:18.388Z", - "contributors": [ - "SJW", - "Sebastianz", - "hansspiess", - "fscholz", - "iGadget", - "J5lx" - ] - }, - "Web/CSS/Border-bottom-width": { - "modified": "2020-10-15T21:12:48.685Z", - "contributors": [ - "SJW", - "fscholz", - "Yuichiro", - "The Witcher" - ] - }, - "Web/CSS/Border-left-width": { - "modified": "2019-01-17T08:08:40.829Z", - "contributors": [ - "fscholz", - "Yuichiro", - "The Witcher" - ] - }, - "Web/CSS/Border-right-width": { - "modified": "2019-03-24T00:08:35.563Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "The Witcher" - ] - }, - "Web/CSS/Border-top-width": { - "modified": "2019-03-24T00:08:03.094Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "The Witcher" - ] - }, - "Web/CSS/Bottom": { - "modified": "2020-10-15T21:14:11.021Z", - "contributors": [ - "SJW", - "fscholz", - "The Witcher" - ] - }, - "Web/CSS/CSSOM_View": { - "modified": "2019-03-23T22:43:37.520Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Animations": { - "modified": "2020-10-15T21:40:15.062Z", - "contributors": [ - "SJW", - "teoli" - ] - }, - "Web/CSS/CSS_Animations/Using_CSS_animations": { - "modified": "2020-04-22T06:24:42.427Z", - "contributors": [ - "Ryuno-Ki", - "hamvocke", - "hudri", - "JorisGutjahr", - "awaigand", - "Honig", - "connexo", - "SphinxKnight", - "teoli", - "Simu" - ] - }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-23T22:44:11.176Z", - "contributors": [ - "teoli" - ] - }, - "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { - "modified": "2019-03-18T21:15:52.768Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { - "modified": "2019-03-23T22:43:49.105Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { - "modified": "2019-03-18T20:43:44.623Z", - "contributors": [ - "BychekRU", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { - "modified": "2019-03-23T23:06:19.663Z", - "contributors": [ - "sos4nt", - "mrstork", - "webwirbel" - ] - }, - "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { - "modified": "2019-03-23T23:02:41.693Z", - "contributors": [ - "terwortH", - "benmann", - "teoli", - "Sebastianz", - "srhjg" - ] - }, - "Web/CSS/CSS_Basic_User_Interface": { - "modified": "2019-03-18T21:18:47.038Z", - "contributors": [ - "SphinxKnight" - ] - }, - "Web/CSS/CSS_Box_Model": { - "modified": "2019-03-23T22:43:35.662Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { - "modified": "2019-03-24T00:03:52.006Z", - "contributors": [ - "Sebastianz", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": { - "modified": "2019-03-23T22:41:18.965Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Charsets": { - "modified": "2020-10-15T21:40:18.836Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Colors": { - "modified": "2019-03-23T22:45:11.820Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Colors/Color_picker_tool": { - "modified": "2019-03-23T22:45:05.902Z", - "contributors": [ - "22samuelk" - ] - }, - "Web/CSS/CSS_Columns": { - "modified": "2019-07-23T07:54:16.299Z", - "contributors": [ - "SphinxKnight", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Columns/Using_multi-column_layouts": { - "modified": "2019-03-24T00:05:49.925Z", - "contributors": [ - "SJW", - "fscholz", - "Mapag" - ] - }, - "Web/CSS/CSS_Conditional_Rules": { - "modified": "2019-03-23T22:41:19.119Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { - "modified": "2019-03-23T22:41:18.157Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Device_Adaptation": { - "modified": "2019-03-23T22:30:44.810Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout": { - "modified": "2019-03-23T22:43:45.116Z", - "contributors": [ - "fscholz" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": { - "modified": "2020-10-01T01:42:20.706Z", - "contributors": [ - "Gerak842" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { - "modified": "2019-03-18T21:33:01.162Z", - "contributors": [ - "prproksch", - "td8" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items": { - "modified": "2020-10-26T12:12:41.192Z", - "contributors": [ - "Raqhael" - ] - }, - "Web/CSS/CSS_Fonts": { - "modified": "2019-03-23T22:42:29.712Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Functions": { - "modified": "2020-12-11T18:04:24.641Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Generated_Content": { - "modified": "2020-10-15T21:40:53.620Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Grid_Layout": { - "modified": "2019-03-23T22:03:28.993Z", - "contributors": [ - "hellschu", - "mfluehr" - ] - }, - "Web/CSS/CSS_Images": { - "modified": "2019-03-18T21:15:48.131Z", - "contributors": [ - "wizAmit", - "mrstork", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS": { - "modified": "2019-03-23T22:41:21.256Z", - "contributors": [ - "patrick-hintermayer", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Images/Using_CSS_gradients": { - "modified": "2019-03-23T23:13:15.166Z", - "contributors": [ - "Bennyville", - "wizAmit", - "slayslot", - "Sebastianz", - "floEdelmann" - ] - }, - "Web/CSS/CSS_Lists_and_Counters": { - "modified": "2019-03-23T22:42:24.617Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": { - "modified": "2019-03-23T22:42:20.521Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Logical_Properties": { - "modified": "2019-03-23T22:42:21.102Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Masking": { - "modified": "2020-10-15T21:41:26.449Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Motion_Path": { - "modified": "2019-03-23T22:43:35.895Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Namespaces": { - "modified": "2020-10-15T21:41:25.833Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Positioning": { - "modified": "2020-11-24T17:04:06.334Z", - "contributors": [ - "wbamberg" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index": { - "modified": "2020-12-10T13:32:14.587Z", - "contributors": [ - "Johuspect", - "mfuji09" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": { - "modified": "2020-12-10T18:46:56.681Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float": { - "modified": "2020-12-10T18:56:56.347Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1": { - "modified": "2020-12-10T18:36:47.336Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2": { - "modified": "2020-12-10T18:39:09.863Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3": { - "modified": "2020-12-10T18:39:48.187Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index": { - "modified": "2020-12-10T18:49:10.751Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": { - "modified": "2020-12-10T18:55:30.818Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/CSS_Ruby": { - "modified": "2019-03-23T22:43:34.576Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Selectors": { - "modified": "2019-08-13T05:55:17.230Z", - "contributors": [ - "vaxul", - "ExE-Boss", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Shapes": { - "modified": "2019-03-23T22:41:19.731Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Table": { - "modified": "2019-03-23T22:41:17.252Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Text": { - "modified": "2019-03-18T21:16:59.183Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Text_Decoration": { - "modified": "2019-07-23T07:57:58.435Z", - "contributors": [ - "SphinxKnight", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Transforms": { - "modified": "2019-03-23T22:43:34.303Z", - "contributors": [ - "Sebastianz", - "Prinz_Rana", - "teoli" - ] - }, - "Web/CSS/CSS_Transforms/Using_CSS_transforms": { - "modified": "2020-12-14T10:35:58.609Z", - "contributors": [ - "Johuspect", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Transitions": { - "modified": "2019-03-23T22:43:32.259Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Types": { - "modified": "2020-04-21T12:32:32.615Z", - "contributors": [ - "kleinesfilmroellchen", - "Claas" - ] - }, - "Web/CSS/CSS_Writing_Modes": { - "modified": "2019-03-23T22:44:48.500Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Child_combinator": { - "modified": "2020-10-15T21:41:20.031Z", - "contributors": [ - "SJW", - "iCON", - "Sebastianz" - ] - }, - "Web/CSS/Class_selectors": { - "modified": "2020-10-15T21:41:19.898Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/Compositing_and_Blending": { - "modified": "2019-03-23T22:41:20.151Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/ID_selectors": { - "modified": "2020-10-15T21:41:21.317Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/Layout_mode": { - "modified": "2019-03-23T22:43:30.465Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Left": { - "modified": "2020-10-15T21:14:00.888Z", - "contributors": [ - "SJW", - "fscholz", - "Simplexible", - "Prinz_Rana", - "Sebastianz", - "The Witcher" - ] - }, - "Web/CSS/Media_Queries": { - "modified": "2020-12-14T11:37:45.643Z", - "contributors": [ - "Johuspect", - "SJW", - "teoli" - ] - }, - "Web/CSS/Mozilla_Extensions": { - "modified": "2019-03-24T00:14:14.332Z", - "contributors": [ - "ExE-Boss", - "Sebastianz", - "Prinz_Rana", - "Saschlong", - "SJW", - "fscholz", - "ethertank", - "tregagnon" - ] - }, - "Web/CSS/Paged_Media": { - "modified": "2020-12-03T15:47:57.918Z", - "contributors": [ - "Johuspect", - "Sebastianz" - ] - }, - "Web/CSS/Pseudo-classes": { - "modified": "2019-03-23T23:23:46.291Z", - "contributors": [ - "Claas", - "Sebastianz", - "SJW" - ] - }, - "Web/CSS/Pseudo-elements": { - "modified": "2019-03-23T23:23:47.421Z", - "contributors": [ - "Sebastianz", - "nilssolanki", - "SJW" - ] - }, - "Web/CSS/Reference": { - "modified": "2019-03-24T00:14:12.141Z", - "contributors": [ - "SJW", - "plathub", - "Claas", - "condottiero1985", - "Sebastianz", - "fscholz", - "tregagnon", - "Jürgen Jeka", - "The Witcher", - "Michael2402", - "Jech", - "Nathymig" - ] - }, - "Web/CSS/Replaced_element": { - "modified": "2019-03-23T22:00:32.824Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Right": { - "modified": "2020-10-15T21:08:55.796Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz", - "FredB", - "The Witcher" - ] - }, - "Web/CSS/Specificity": { - "modified": "2019-03-23T23:11:49.533Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Tools/Linear-gradient_Generator": { - "modified": "2019-03-23T22:43:38.482Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Top": { - "modified": "2020-10-15T21:14:05.827Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "The Witcher" - ] - }, - "Web/CSS/Tutorials": { - "modified": "2019-03-18T21:41:12.646Z", - "contributors": [ - "fhwfzfge" - ] - }, - "Web/CSS/Type_selectors": { - "modified": "2020-10-15T21:39:36.648Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/Universal_selectors": { - "modified": "2020-10-15T21:39:37.486Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/Value_definition_syntax": { - "modified": "2019-03-23T23:11:56.504Z", - "contributors": [ - "Sebastianz", - "Prinz_Rana", - "Krenair", - "prayash" - ] - }, - "Web/CSS/WebKit_Extensions": { - "modified": "2019-03-23T23:23:45.505Z", - "contributors": [ - "ExE-Boss", - "jlnr", - "SJW" - ] - }, - "Web/CSS/actual_value": { - "modified": "2019-03-23T22:43:32.481Z", - "contributors": [ - "schlagi123", - "Sebastianz" - ] - }, - "Web/CSS/align-content": { - "modified": "2020-10-15T21:29:16.776Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/align-items": { - "modified": "2020-10-15T21:29:16.055Z", - "contributors": [ - "SJW", - "d4rkne55", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/align-self": { - "modified": "2020-10-15T21:29:18.265Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/all": { - "modified": "2020-10-15T21:29:17.609Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "levito" - ] - }, - "Web/CSS/angle": { - "modified": "2020-10-15T21:25:35.659Z", - "contributors": [ - "kleinesfilmroellchen", - "SJW", - "JankingDE", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/angle-percentage": { - "modified": "2020-10-15T22:29:17.516Z", - "contributors": [ - "kleinesfilmroellchen" - ] - }, - "Web/CSS/animation": { - "modified": "2020-10-15T21:25:41.266Z", - "contributors": [ - "SJW", - "mrstork", - "Sebastianz" - ] - }, - "Web/CSS/animation-delay": { - "modified": "2020-10-15T21:28:29.055Z", - "contributors": [ - "SJW", - "beachespecially", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/animation-direction": { - "modified": "2020-10-15T21:28:33.320Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/animation-duration": { - "modified": "2020-10-15T21:25:38.068Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/animation-fill-mode": { - "modified": "2020-10-15T21:25:33.173Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz", - "maxn" - ] - }, - "Web/CSS/animation-iteration-count": { - "modified": "2020-10-15T21:25:43.696Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/animation-name": { - "modified": "2020-10-15T21:25:41.797Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/animation-play-state": { - "modified": "2020-11-03T09:19:42.618Z", - "contributors": [ - "keckelt", - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/animation-timing-function": { - "modified": "2020-10-15T21:29:19.438Z", - "contributors": [ - "AlexWayhill", - "SJW", - "mrstork", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/appearance": { - "modified": "2019-03-23T23:20:00.251Z", - "contributors": [ - "ExE-Boss", - "wbamberg", - "teoli", - "Sebastianz", - "bee8bit" - ] - }, - "Web/CSS/attr": { - "modified": "2020-11-04T08:51:28.043Z", - "contributors": [ - "chrisdavidmills", - "SJW", - "DerAppelt", - "mrstork", - "prayash", - "Sebastianz", - "screeny05" - ] - }, - "Web/CSS/backdrop-filter": { - "modified": "2020-10-15T21:39:39.277Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/backface-visibility": { - "modified": "2020-10-15T21:29:19.302Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/background": { - "modified": "2020-12-04T17:14:04.407Z", - "contributors": [ - "Johuspect", - "fscholz", - "SphinxKnight", - "Sebastianz", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/background-attachment": { - "modified": "2020-12-04T17:12:16.200Z", - "contributors": [ - "Johuspect", - "SphinxKnight", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/background-blend-mode": { - "modified": "2020-12-04T16:41:14.228Z", - "contributors": [ - "Johuspect", - "ExE-Boss", - "SJW", - "mrstork", - "Sebastianz", - "fscholz", - "kapep" - ] - }, - "Web/CSS/background-clip": { - "modified": "2019-05-01T09:47:01.419Z", - "contributors": [ - "fscholz", - "SJW", - "AickeSchulz" - ] - }, - "Web/CSS/background-color": { - "modified": "2020-10-15T21:12:31.914Z", - "contributors": [ - "Paulb-dev", - "SJW", - "Sebastianz", - "SphinxKnight", - "fscholz", - "ethertank", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/background-image": { - "modified": "2019-03-24T00:05:41.878Z", - "contributors": [ - "Oliver_Schafeld", - "splendid_twd", - "SphinxKnight", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/background-origin": { - "modified": "2019-03-24T00:05:06.053Z", - "contributors": [ - "fscholz" - ] - }, - "Web/CSS/background-position": { - "modified": "2019-03-24T00:05:05.700Z", - "contributors": [ - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/background-repeat": { - "modified": "2019-03-24T00:05:04.054Z", - "contributors": [ - "SphinxKnight", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/background-size": { - "modified": "2020-10-15T21:25:02.569Z", - "contributors": [ - "SJW", - "HolgerJeromin", - "fscholz", - "Simplexible", - "Prinz_Rana", - "Sebastianz", - "mikoMK", - "tyler" - ] - }, - "Web/CSS/basic-shape": { - "modified": "2020-10-15T21:28:55.443Z", - "contributors": [ - "kleinesfilmroellchen", - "SJW", - "ExE-Boss", - "Prinz_Rana", - "Simplexible", - "mrstork", - "Sebastianz" - ] - }, - "Web/CSS/border": { - "modified": "2020-10-15T21:12:38.393Z", - "contributors": [ - "SJW", - "schlagi123", - "Sebastianz", - "fscholz", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-bottom": { - "modified": "2020-10-15T21:12:37.622Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-bottom-color": { - "modified": "2020-10-15T21:12:47.340Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-bottom-left-radius": { - "modified": "2020-10-15T21:09:26.025Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "FredB", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-bottom-right-radius": { - "modified": "2020-10-15T21:12:51.045Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-bottom-style": { - "modified": "2020-10-15T21:12:48.275Z", - "contributors": [ - "SJW", - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-collapse": { - "modified": "2020-11-24T04:57:52.157Z", - "contributors": [ - "Johuspect", - "SJW", - "fscholz", - "MattDiMu", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-color": { - "modified": "2020-10-15T21:12:46.664Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-image": { - "modified": "2020-10-15T21:28:30.192Z", - "contributors": [ - "SJW", - "d4rkne55", - "teoli", - "Sebastianz", - "tyrann0us" - ] - }, - "Web/CSS/border-image-outset": { - "modified": "2020-10-15T21:28:40.542Z", - "contributors": [ - "SJW", - "Simplexible", - "Sebastianz", - "Prinz_Rana", - "teoli" - ] - }, - "Web/CSS/border-image-repeat": { - "modified": "2020-10-15T21:29:19.620Z", - "contributors": [ - "SJW", - "iGadget", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/border-image-slice": { - "modified": "2020-10-15T21:28:59.381Z", - "contributors": [ - "SJW", - "d4rkne55", - "Sebastianz", - "fscholz", - "Simplexible", - "Prinz_Rana", - "tilman" - ] - }, - "Web/CSS/border-image-source": { - "modified": "2020-10-15T21:29:22.891Z", - "contributors": [ - "SJW", - "wizAmit", - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/border-image-width": { - "modified": "2020-10-15T21:29:19.294Z", - "contributors": [ - "SJW", - "d4rkne55", - "Sebastianz", - "fscholz", - "supermueller" - ] - }, - "Web/CSS/border-left": { - "modified": "2019-03-24T00:08:38.506Z", - "contributors": [ - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-left-color": { - "modified": "2019-03-18T21:16:13.487Z", - "contributors": [ - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-left-style": { - "modified": "2019-03-24T00:08:38.236Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-radius": { - "modified": "2020-10-15T21:07:23.981Z", - "contributors": [ - "SJW", - "iGadget", - "Sebastianz", - "Prinz_Rana", - "fscholz", - "Matthias.Apsel", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-right": { - "modified": "2019-03-24T00:08:39.783Z", - "contributors": [ - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-right-color": { - "modified": "2019-03-18T21:16:13.299Z", - "contributors": [ - "fscholz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-right-style": { - "modified": "2019-03-24T00:08:32.792Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-spacing": { - "modified": "2020-12-04T16:23:27.298Z", - "contributors": [ - "Johuspect", - "jdus", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/border-style": { - "modified": "2020-11-06T10:11:26.500Z", - "contributors": [ - "tim-we", - "SJW", - "fscholz", - "serv-inc", - "Sebastianz", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-top": { - "modified": "2019-03-24T00:07:48.019Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-top-color": { - "modified": "2019-03-24T00:08:39.066Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-top-left-radius": { - "modified": "2020-10-15T21:09:25.403Z", - "contributors": [ - "SJW", - "fscholz", - "FredB", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-top-right-radius": { - "modified": "2020-10-15T21:09:23.128Z", - "contributors": [ - "SJW", - "fscholz", - "FredB", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/border-top-style": { - "modified": "2019-03-24T00:08:34.497Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/border-width": { - "modified": "2019-03-24T00:08:32.950Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/box-flex": { - "modified": "2020-10-15T21:40:01.205Z", - "contributors": [ - "chrisdavidmills", - "SJW", - "teoli", - "crasher666", - "Sebastianz" - ] - }, - "Web/CSS/box-ordinal-group": { - "modified": "2019-03-23T22:45:29.807Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/box-pack": { - "modified": "2020-10-15T21:39:56.493Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/box-shadow": { - "modified": "2020-10-15T21:13:28.481Z", - "contributors": [ - "SJW", - "wiegels", - "Sebastianz", - "Prinz_Rana", - "Eschon", - "supermueller", - "fscholz", - "Jürgen Jeka", - "The Witcher" - ] - }, - "Web/CSS/box-sizing": { - "modified": "2020-12-04T16:21:46.208Z", - "contributors": [ - "Johuspect", - "SJW", - "Volker-E", - "Sebastianz", - "tronsha", - "fscholz", - "maxstrebel" - ] - }, - "Web/CSS/break-after": { - "modified": "2020-10-15T21:38:17.962Z", - "contributors": [ - "SJW", - "tobias47n9e", - "fscholz", - "Sebastianz", - "spiegelp" - ] - }, - "Web/CSS/break-inside": { - "modified": "2020-10-15T22:19:22.072Z", - "contributors": [ - "bershanskiy", - "tonra" - ] - }, - "Web/CSS/calc": { - "modified": "2020-11-04T09:07:46.370Z", - "contributors": [ - "chrisdavidmills", - "zuzuzu", - "SJW", - "giffeler", - "mrstork", - "prayash", - "teoli", - "hansspiess", - "dominikschreiber", - "fscholz" - ] - }, - "Web/CSS/caption-side": { - "modified": "2020-12-04T16:19:59.716Z", - "contributors": [ - "Johuspect", - "SJW", - "fscholz", - "Sebastianz", - "Sheppy" - ] - }, - "Web/CSS/clear": { - "modified": "2020-11-24T16:51:40.305Z", - "contributors": [ - "Johuspect", - "SJW", - "wbamberg", - "fscholz", - "Sebastianz", - "Michael2402" - ] - }, - "Web/CSS/clip": { - "modified": "2020-10-15T21:29:22.068Z", - "contributors": [ - "SJW", - "mrstork", - "Sebastianz" - ] - }, - "Web/CSS/clip-path": { - "modified": "2020-10-15T21:28:31.008Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/color": { - "modified": "2020-10-15T21:13:28.890Z", - "contributors": [ - "SJW", - "Sebastianz", - "wizAmit", - "slayslot", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/color_value": { - "modified": "2020-10-15T21:14:08.521Z", - "contributors": [ - "Borgitowner", - "SJW", - "Sebastianz", - "Simplexible", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/column-count": { - "modified": "2019-03-23T23:22:21.773Z", - "contributors": [ - "Sebastianz", - "fscholz", - "vaupeh", - "SJW" - ] - }, - "Web/CSS/column-fill": { - "modified": "2020-10-15T21:25:38.904Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/column-gap": { - "modified": "2020-10-15T21:25:43.274Z", - "contributors": [ - "SJW", - "Sebastianz", - "Prinz_Rana", - "fscholz" - ] - }, - "Web/CSS/column-rule": { - "modified": "2020-10-15T21:28:37.320Z", - "contributors": [ - "SJW", - "Sebastianz", - "Prinz_Rana", - "fscholz" - ] - }, - "Web/CSS/column-rule-color": { - "modified": "2020-10-15T21:28:41.960Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/column-rule-style": { - "modified": "2020-10-15T21:28:36.751Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/column-rule-width": { - "modified": "2020-10-15T21:28:34.842Z", - "contributors": [ - "duduindo", - "SJW", - "Prinz_Rana", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/column-span": { - "modified": "2020-10-15T21:25:41.497Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/column-width": { - "modified": "2020-10-15T21:25:50.342Z", - "contributors": [ - "SJW", - "Prinz_Rana", - "teoli", - "Sebastianz", - "eseifert" - ] - }, - "Web/CSS/columns": { - "modified": "2020-12-04T17:15:37.070Z", - "contributors": [ - "Johuspect", - "SJW", - "Sebastianz", - "Prinz_Rana", - "fscholz" - ] - }, - "Web/CSS/computed_value": { - "modified": "2019-03-23T23:13:10.466Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/content": { - "modified": "2020-10-15T21:29:22.645Z", - "contributors": [ - "escattone", - "Editmonkey", - "SJW", - "Sebastianz", - "webdesignberlin" - ] - }, - "Web/CSS/counter-increment": { - "modified": "2020-10-15T21:29:17.920Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/counter-reset": { - "modified": "2020-10-15T21:29:21.512Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/cursor": { - "modified": "2020-10-15T21:13:40.945Z", - "contributors": [ - "nikcani", - "SJW", - "R0bin", - "Sebastianz", - "bee8bit", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/custom-ident": { - "modified": "2019-03-23T22:44:45.016Z", - "contributors": [ - "schlagi123", - "Guillaume-Heras", - "Sebastianz" - ] - }, - "Web/CSS/direction": { - "modified": "2020-10-15T21:42:48.562Z", - "contributors": [ - "SJW", - "Dev201" - ] - }, - "Web/CSS/display": { - "modified": "2020-10-15T21:14:06.910Z", - "contributors": [ - "felixhaeberle", - "SJW", - "Sebastianz", - "Volker-E", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/empty-cells": { - "modified": "2020-10-15T21:14:02.728Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/filter": { - "modified": "2020-10-15T21:28:35.076Z", - "contributors": [ - "SJW", - "Univream", - "Sebastianz", - "Prinz_Rana", - "teoli" - ] - }, - "Web/CSS/flex-flow": { - "modified": "2020-10-15T21:25:37.797Z", - "contributors": [ - "SJW", - "udvlp", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/flex-grow": { - "modified": "2020-10-15T21:25:37.976Z", - "contributors": [ - "vssn", - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/flex-shrink": { - "modified": "2020-10-15T21:29:17.989Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/flex-wrap": { - "modified": "2020-10-15T21:25:39.113Z", - "contributors": [ - "SJW", - "brainscript", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/float": { - "modified": "2020-12-10T05:33:01.851Z", - "contributors": [ - "Johuspect", - "SJW", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/font": { - "modified": "2019-03-25T11:07:06.420Z", - "contributors": [ - "KaiVolland", - "tim_kraut", - "MI5", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/font-family": { - "modified": "2020-10-15T21:28:35.462Z", - "contributors": [ - "SJW", - "fscholz", - "dio", - "Sebastianz", - "timbernasley" - ] - }, - "Web/CSS/font-feature-settings": { - "modified": "2020-10-15T21:26:12.551Z", - "contributors": [ - "SJW", - "Guillaume-Heras", - "fscholz", - "Volker-E", - "elomatreb" - ] - }, - "Web/CSS/font-size": { - "modified": "2020-10-15T21:55:36.707Z", - "contributors": [ - "SJW", - "Anonymous" - ] - }, - "Web/CSS/font-style": { - "modified": "2020-10-15T22:29:43.767Z", - "contributors": [ - "zuzuzu" - ] - }, - "Web/CSS/font-variant": { - "modified": "2020-10-15T21:25:39.056Z", - "contributors": [ - "zuzuzu", - "cgebel", - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/font-weight": { - "modified": "2020-10-15T21:25:38.147Z", - "contributors": [ - "zuzuzu", - "kaljak", - "SphinxKnight", - "fscholz", - "Sebastianz", - "dio", - "SJW" - ] - }, - "Web/CSS/frequency": { - "modified": "2019-03-23T23:23:30.111Z", - "contributors": [ - "Sebastianz", - "fscholz", - "SJW" - ] - }, - "Web/CSS/gap": { - "modified": "2020-10-15T22:00:43.740Z", - "contributors": [ - "AlexWayhill", - "Craeckerffm" - ] - }, - "Web/CSS/gradient": { - "modified": "2019-03-23T23:23:41.931Z", - "contributors": [ - "Sebastianz", - "fscholz", - "SJW" - ] - }, - "Web/CSS/grid": { - "modified": "2020-10-15T21:52:44.744Z", - "contributors": [ - "SJW", - "ksm2" - ] - }, - "Web/CSS/grid-template-areas": { - "modified": "2020-10-15T22:02:47.559Z", - "contributors": [ - "hutattedonmyarm" - ] - }, - "Web/CSS/height": { - "modified": "2020-10-15T21:14:22.159Z", - "contributors": [ - "SJW", - "mrstork", - "Sebastianz", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/hyphens": { - "modified": "2020-10-15T21:23:04.048Z", - "contributors": [ - "michelbalzer", - "SJW", - "tobias47n9e", - "julianhirt", - "SphinxKnight", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/image": { - "modified": "2020-10-15T21:28:54.360Z", - "contributors": [ - "SJW", - "slayslot", - "mrstork", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/image-orientation": { - "modified": "2020-10-15T21:36:43.065Z", - "contributors": [ - "fscholz", - "prayash", - "Sebastianz", - "Dargmuesli" - ] - }, - "Web/CSS/image-rendering": { - "modified": "2020-10-15T21:32:42.453Z", - "contributors": [ - "SJW", - "Djfe", - "Sebastianz", - "Sheppy", - "robinboening", - "vale981" - ] - }, - "Web/CSS/inherit": { - "modified": "2020-10-15T21:29:21.425Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/inheritance": { - "modified": "2019-03-23T23:13:09.412Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/initial": { - "modified": "2019-03-23T23:22:15.583Z", - "contributors": [ - "ralfstx", - "ansgar", - "SJW" - ] - }, - "Web/CSS/initial_value": { - "modified": "2019-03-23T22:18:48.927Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/integer": { - "modified": "2020-10-15T21:25:43.258Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/justify-content": { - "modified": "2020-10-15T21:29:14.742Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/length": { - "modified": "2020-10-15T21:25:36.832Z", - "contributors": [ - "zuzuzu", - "kleinesfilmroellchen", - "SJW", - "mdnde", - "Sebastianz", - "supermueller", - "fscholz", - "Lucky42" - ] - }, - "Web/CSS/letter-spacing": { - "modified": "2020-10-15T21:40:15.968Z", - "contributors": [ - "SJW", - "tyrann0us", - "Prinz_Rana", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/line-break": { - "modified": "2020-10-15T21:39:35.382Z", - "contributors": [ - "SJW", - "ExE-Boss", - "Sebastianz" - ] - }, - "Web/CSS/list-style": { - "modified": "2019-03-24T00:03:48.208Z", - "contributors": [ - "hansspiess", - "SphinxKnight", - "Aryx", - "teoli", - "screeny05", - "fscholz", - "SJW", - "ethertank", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/list-style-image": { - "modified": "2020-10-15T21:29:20.423Z", - "contributors": [ - "SJW", - "wizAmit", - "SphinxKnight", - "Sebastianz" - ] - }, - "Web/CSS/list-style-position": { - "modified": "2020-10-15T21:29:19.736Z", - "contributors": [ - "SJW", - "SphinxKnight", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/list-style-type": { - "modified": "2020-10-15T21:28:59.236Z", - "contributors": [ - "SJW", - "mdnde", - "Guillaume-Heras", - "Sebastianz", - "SphinxKnight" - ] - }, - "Web/CSS/margin": { - "modified": "2019-03-24T00:08:49.174Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/margin-bottom": { - "modified": "2019-03-24T00:08:42.855Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/margin-left": { - "modified": "2019-03-23T23:18:57.876Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/margin-right": { - "modified": "2019-03-24T00:08:48.817Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/margin-top": { - "modified": "2019-03-23T23:13:12.430Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/mask": { - "modified": "2020-10-15T21:29:04.125Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/mask-origin": { - "modified": "2019-03-23T22:44:52.161Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/mask-repeat": { - "modified": "2019-03-23T22:45:10.485Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/max-height": { - "modified": "2020-10-15T21:14:01.543Z", - "contributors": [ - "SJW", - "Simplexible", - "Sebastianz", - "Prinz_Rana", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/max-width": { - "modified": "2019-03-18T21:16:49.107Z", - "contributors": [ - "fscholz", - "SJW", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/min-height": { - "modified": "2019-03-24T00:03:51.575Z", - "contributors": [ - "fscholz", - "SJW", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/min-width": { - "modified": "2019-03-24T00:03:50.944Z", - "contributors": [ - "fscholz", - "SJW", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/mix-blend-mode": { - "modified": "2020-10-15T21:37:36.115Z", - "contributors": [ - "ExE-Boss", - "SJW", - "Vainamo", - "Oliver_Schafeld", - "mrstork", - "Sebastianz", - "MaxKoehler" - ] - }, - "Web/CSS/number": { - "modified": "2020-10-15T21:25:33.936Z", - "contributors": [ - "duduindo", - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/object-fit": { - "modified": "2020-10-15T21:31:57.582Z", - "contributors": [ - "sp1r1t", - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/opacity": { - "modified": "2020-10-15T21:09:12.150Z", - "contributors": [ - "SJW", - "MaxValue", - "Sebastianz", - "fscholz", - "FredB", - "Jürgen Jeka", - "j.j.", - "Michael2402" - ] - }, - "Web/CSS/order": { - "modified": "2020-10-15T21:29:16.145Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/orphans": { - "modified": "2020-12-04T16:16:08.297Z", - "contributors": [ - "Johuspect", - "SebinNyshkim" - ] - }, - "Web/CSS/outline": { - "modified": "2020-12-04T16:15:02.597Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/outline-color": { - "modified": "2019-03-23T22:19:25.777Z", - "contributors": [ - "jmartsch" - ] - }, - "Web/CSS/overflow": { - "modified": "2020-10-15T21:13:53.383Z", - "contributors": [ - "SJW", - "KittMedia", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/overflow-wrap": { - "modified": "2020-10-15T21:38:14.535Z", - "contributors": [ - "SJW", - "ksuess", - "screeny05", - "Clubfan22", - "fscholz", - "Sebastianz", - "spiegelp" - ] - }, - "Web/CSS/overscroll-behavior": { - "modified": "2020-10-15T22:17:19.963Z", - "contributors": [ - "PPElite" - ] - }, - "Web/CSS/overscroll-behavior-y": { - "modified": "2020-10-15T22:24:50.460Z", - "contributors": [ - "jewuma" - ] - }, - "Web/CSS/padding": { - "modified": "2020-10-15T21:12:30.556Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz", - "Yuichiro", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/padding-bottom": { - "modified": "2019-03-24T00:08:49.006Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/padding-left": { - "modified": "2019-03-24T00:08:45.424Z", - "contributors": [ - "dio", - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/padding-right": { - "modified": "2019-03-24T00:08:45.285Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/padding-top": { - "modified": "2019-03-24T00:08:43.442Z", - "contributors": [ - "fscholz", - "SJW", - "Yuichiro", - "Michael2402" - ] - }, - "Web/CSS/page-break-after": { - "modified": "2019-03-24T00:04:28.971Z", - "contributors": [ - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/page-break-before": { - "modified": "2019-03-24T00:04:28.120Z", - "contributors": [ - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/page-break-inside": { - "modified": "2019-03-24T00:04:23.699Z", - "contributors": [ - "sibbl", - "wbamberg", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/percentage": { - "modified": "2020-10-15T21:28:53.357Z", - "contributors": [ - "SJW", - "Sebastianz", - "Prinz_Rana", - "fscholz" - ] - }, - "Web/CSS/pointer-events": { - "modified": "2019-03-23T22:46:26.785Z", - "contributors": [ - "burnaDLX", - "avalanche", - "HendrikRunte", - "OppaHeinz" - ] - }, - "Web/CSS/position": { - "modified": "2020-10-15T21:10:31.814Z", - "contributors": [ - "MeiKatz", - "SJW", - "rimace", - "Sebastianz", - "lfuelling", - "fscholz", - "facial", - "Michael2402" - ] - }, - "Web/CSS/position_value": { - "modified": "2020-10-15T21:41:09.046Z", - "contributors": [ - "SJW", - "mrstork", - "Sebastianz" - ] - }, - "Web/CSS/print-color-adjust": { - "modified": "2019-03-23T22:42:45.125Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/quotes": { - "modified": "2020-10-15T21:28:32.529Z", - "contributors": [ - "SJW", - "Krenair", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/ratio": { - "modified": "2020-10-15T21:25:37.478Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/resize": { - "modified": "2020-12-04T15:35:06.800Z", - "contributors": [ - "Johuspect", - "SJW", - "SphinxKnight", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/resolution": { - "modified": "2019-03-23T23:13:45.403Z", - "contributors": [ - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/row-gap": { - "modified": "2020-12-07T11:33:06.603Z", - "contributors": [ - "Borgitowner", - "hellschu" - ] - }, - "Web/CSS/ruby-align": { - "modified": "2020-10-15T21:39:35.553Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/scroll-behavior": { - "modified": "2020-10-15T22:01:09.546Z", - "contributors": [ - "Ryuno-Ki", - "jmartsch", - "diverent2", - "Goldfischpeter" - ] - }, - "Web/CSS/shape": { - "modified": "2020-10-15T21:28:32.233Z", - "contributors": [ - "SJW", - "Sebastianz", - "Prinz_Rana", - "fscholz" - ] - }, - "Web/CSS/string": { - "modified": "2020-10-15T21:39:38.004Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/tab-size": { - "modified": "2020-10-15T21:25:37.063Z", - "contributors": [ - "SJW", - "Sebastianz", - "Prinz_Rana" - ] - }, - "Web/CSS/table-layout": { - "modified": "2020-12-04T16:11:25.312Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/text-align": { - "modified": "2020-12-04T16:04:32.676Z", - "contributors": [ - "Johuspect", - "SJW", - "wbamberg", - "Sebastianz", - "fscholz", - "Michael2402" - ] - }, - "Web/CSS/text-align-last": { - "modified": "2020-10-15T22:20:45.740Z", - "contributors": [ - "MichaelGellings" - ] - }, - "Web/CSS/text-decoration": { - "modified": "2020-10-15T21:14:00.052Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/text-decoration-color": { - "modified": "2019-03-23T23:33:25.614Z", - "contributors": [ - "Sebastianz", - "fscholz", - "Fxedel", - "ethertank", - "TheRojam" - ] - }, - "Web/CSS/text-decoration-line": { - "modified": "2020-10-15T21:28:36.449Z", - "contributors": [ - "SJW", - "teoli", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/text-indent": { - "modified": "2020-10-15T21:34:09.488Z", - "contributors": [ - "SJW", - "fscholz", - "Simplexible", - "Prinz_Rana", - "Sebastianz", - "nVentis" - ] - }, - "Web/CSS/text-justify": { - "modified": "2020-10-15T22:20:47.319Z", - "contributors": [ - "MichaelGellings" - ] - }, - "Web/CSS/text-overflow": { - "modified": "2020-10-15T21:27:57.701Z", - "contributors": [ - "SJW", - "Glogau", - "Guillaume-Heras", - "Sebastianz", - "DavidArndt" - ] - }, - "Web/CSS/text-rendering": { - "modified": "2020-10-15T21:27:06.900Z", - "contributors": [ - "SJW", - "Sebastianz", - "powerswitch" - ] - }, - "Web/CSS/text-shadow": { - "modified": "2020-10-15T21:13:25.181Z", - "contributors": [ - "SJW", - "Prinz_Rana", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/text-transform": { - "modified": "2019-10-21T08:20:30.891Z", - "contributors": [ - "decay42", - "fscholz", - "Sebastianz", - "nVentis", - "julian.weinert" - ] - }, - "Web/CSS/text-underline-position": { - "modified": "2020-10-15T21:28:31.332Z", - "contributors": [ - "SJW", - "Sebastianz", - "fscholz", - "Lucky42" - ] - }, - "Web/CSS/time": { - "modified": "2020-10-15T21:23:00.694Z", - "contributors": [ - "SJW", - "Sebastianz", - "Prinz_Rana", - "fscholz" - ] - }, - "Web/CSS/touch-action": { - "modified": "2020-10-15T21:34:13.763Z", - "contributors": [ - "SJW", - "fscholz", - "teoli", - "Sebastianz", - "fboes", - "chrros" - ] - }, - "Web/CSS/transform": { - "modified": "2020-12-14T07:33:49.335Z", - "contributors": [ - "Johuspect", - "LoVo666", - "SJW", - "wilmaedd", - "Sebastianz", - "fscholz", - "MatzeMarcel" - ] - }, - "Web/CSS/transform-function": { - "modified": "2020-12-14T07:34:53.250Z", - "contributors": [ - "Johuspect", - "ramiy" - ] - }, - "Web/CSS/transform-function/translate3d": { - "modified": "2020-12-11T16:32:16.509Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/transform-function/translateY": { - "modified": "2020-12-11T16:48:39.299Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/transform-function/translateZ": { - "modified": "2020-12-11T16:58:23.802Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/transform-origin": { - "modified": "2020-10-15T22:00:48.518Z", - "contributors": [ - "mack3457", - "spotbot2k" - ] - }, - "Web/CSS/transition": { - "modified": "2020-10-15T21:57:36.200Z", - "contributors": [ - "Ryuno-Ki", - "SJW", - "Kairyon" - ] - }, - "Web/CSS/transition-property": { - "modified": "2020-10-15T21:33:33.457Z", - "contributors": [ - "SJW", - "Sebastianz", - "felhe", - "StephenJB" - ] - }, - "Web/CSS/translate": { - "modified": "2020-12-11T18:09:01.798Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/unicode-bidi": { - "modified": "2020-10-15T21:42:38.107Z", - "contributors": [ - "SJW", - "Dev201" - ] - }, - "Web/CSS/unset": { - "modified": "2020-10-15T21:37:37.480Z", - "contributors": [ - "SJW", - "seemann", - "Sebastianz" - ] - }, - "Web/CSS/url": { - "modified": "2020-10-15T22:01:29.787Z", - "contributors": [ - "valentinprotiuc" - ] - }, - "Web/CSS/user-modify": { - "modified": "2019-03-24T00:04:27.330Z", - "contributors": [ - "teoli", - "Sebastianz", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/user-select": { - "modified": "2019-03-24T00:03:51.678Z", - "contributors": [ - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/vertical-align": { - "modified": "2020-12-14T03:38:21.570Z", - "contributors": [ - "Johuspect", - "nw520", - "iGadget", - "Artjom", - "fscholz", - "SJW", - "patpir", - "Michael2402" - ] - }, - "Web/CSS/visibility": { - "modified": "2020-10-15T21:14:04.715Z", - "contributors": [ - "SJW", - "fscholz", - "Sebastianz", - "Michael2402" - ] - }, - "Web/CSS/white-space": { - "modified": "2020-12-04T16:00:27.642Z", - "contributors": [ - "Johuspect", - "SJW", - "fscholz", - "Sebastianz", - "kelunik", - "bee8bit", - "Unity" - ] - }, - "Web/CSS/widows": { - "modified": "2020-12-11T11:05:21.509Z", - "contributors": [ - "Johuspect", - "SebinNyshkim", - "SJW", - "Sebastianz", - "fscholz" - ] - }, - "Web/CSS/width": { - "modified": "2020-10-15T21:14:05.278Z", - "contributors": [ - "PPElite", - "SJW", - "Simplexible", - "Prinz_Rana", - "Sebastianz", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/word-break": { - "modified": "2020-10-15T21:37:33.900Z", - "contributors": [ - "SJW", - "okj579", - "teoli", - "fscholz", - "Sebastianz" - ] - }, - "Web/CSS/word-spacing": { - "modified": "2020-10-15T21:39:36.068Z", - "contributors": [ - "SJW", - "Prinz_Rana", - "Sebastianz" - ] - }, - "Web/CSS/z-index": { - "modified": "2020-12-11T11:04:07.765Z", - "contributors": [ - "Johuspect", - "SJW", - "chrisdavidmills", - "steve-stnhbr", - "Sebastianz", - "fscholz", - "rwetzlmayr", - "axlwaii" - ] - }, - "Web/Demos": { - "modified": "2019-03-23T22:39:34.270Z", - "contributors": [ - "sigoa", - "pixelwiese", - "Dev201" - ] - }, - "Web/Events": { - "modified": "2019-09-15T10:58:54.372Z", - "contributors": [ - "grumpy-cat", - "wbamberg", - "StevenS77", - "teoli" - ] - }, - "Web/Guide": { - "modified": "2019-03-23T23:28:10.493Z", - "contributors": [ - "olhaar", - "loki", - "Sheppy" - ] - }, - "Web/Guide/AJAX": { - "modified": "2019-03-24T00:04:53.836Z", - "contributors": [ - "chrisdavidmills", - "DineshMv", - "fscholz", - "hrctelekom", - "DavidWalsh", - "Locke", - "M@d Man" - ] - }, - "Web/Guide/AJAX/Getting_Started": { - "modified": "2020-08-11T10:37:53.338Z", - "contributors": [ - "merlincom" - ] - }, - "Web/Guide/Graphics": { - "modified": "2019-03-23T23:05:58.536Z", - "contributors": [ - "mdschweda", - "Aloso", - "Cginybetty" - ] - }, - "Web/Guide/HTML/Content_categories": { - "modified": "2020-07-16T11:12:55.534Z", - "contributors": [ - "matthiasulrich", - "Sebastianz", - "jumpball" - ] - }, - "Web/Guide/HTML/Editable_content": { - "modified": "2020-02-12T02:09:56.043Z", - "contributors": [ - "blackjack4494", - "lxdiamond" - ] - }, - "Web/HTML": { - "modified": "2019-09-10T15:19:11.194Z", - "contributors": [ - "SphinxKnight", - "NoldoArnion", - "Darkterror45", - "sigoa", - "lumberplumber", - "Draussenduscher", - "VJSchneid", - "skl", - "alippold", - "fscholz", - "kklein", - "LexAndreessen", - "Henry-usa", - "Timmi" - ] - }, - "Web/HTML/Block-level_elements": { - "modified": "2020-05-07T06:16:30.382Z", - "contributors": [ - "zuzuzu", - "Loilo", - "mdschweda", - "drgn", - "VJSchneid", - "teoli", - "lukas.oppermann" - ] - }, - "Web/HTML/Element": { - "modified": "2020-01-27T05:32:14.694Z", - "contributors": [ - "lucas-walter", - "PascalKlassen", - "SJW", - "schlagi123", - "denis.zygann@gmail.com", - "teoli", - "ethertank", - "adrianfischer", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/Frame": { - "modified": "2020-10-15T22:10:35.778Z", - "contributors": [ - "thunderhook" - ] - }, - "Web/HTML/Element/Heading_Elements": { - "modified": "2019-03-24T00:04:35.426Z", - "contributors": [ - "schlagi123", - "teoli", - "fscholz" - ] - }, - "Web/HTML/Element/Input": { - "modified": "2020-03-21T07:28:26.249Z", - "contributors": [ - "Ryuno-Ki", - "evayde", - "accessabilly", - "Skasi", - "JorisGutjahr", - "chrillek", - "yannick_versley", - "Sebastianz", - "dio", - "teoli", - "thaddeus" - ] - }, - "Web/HTML/Element/Input/checkbox": { - "modified": "2020-10-15T22:29:32.835Z", - "contributors": [ - "clemens.klapp" - ] - }, - "Web/HTML/Element/Shadow": { - "modified": "2019-04-09T10:21:03.813Z", - "contributors": [ - "nnscr", - "AndreasSchantl" - ] - }, - "Web/HTML/Element/a": { - "modified": "2019-03-23T23:13:37.609Z", - "contributors": [ - "dio", - "dhcgn", - "Abro", - "omicron81", - "Type-Style", - "Sebastianz", - "skl", - "Lucky42" - ] - }, - "Web/HTML/Element/abbr": { - "modified": "2020-10-15T21:28:46.526Z", - "contributors": [ - "SebinNyshkim", - "Sebastianz", - "fscholz" - ] - }, - "Web/HTML/Element/acronym": { - "modified": "2020-10-15T21:28:43.905Z", - "contributors": [ - "SebinNyshkim", - "kklein" - ] - }, - "Web/HTML/Element/address": { - "modified": "2019-03-23T23:13:25.598Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/applet": { - "modified": "2019-03-23T23:13:28.644Z", - "contributors": [ - "kklein" - ] - }, - "Web/HTML/Element/area": { - "modified": "2020-10-15T21:34:00.314Z", - "contributors": [ - "fscholz", - "Sebastianz", - "spiegelp" - ] - }, - "Web/HTML/Element/article": { - "modified": "2020-10-15T21:28:44.586Z", - "contributors": [ - "SebinNyshkim", - "eluchsinger", - "Sebastianz" - ] - }, - "Web/HTML/Element/aside": { - "modified": "2020-10-15T21:28:45.868Z", - "contributors": [ - "fscholz", - "Qowyn", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/b": { - "modified": "2019-03-24T00:12:26.873Z", - "contributors": [ - "Maugo", - "schlagi123", - "tobiasfabian", - "teoli", - "DD0101", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/base": { - "modified": "2019-03-18T20:55:12.966Z", - "contributors": [ - "nerdbeere", - "fabsenet", - "marymar", - "Sebastianz", - "xomz", - "SJW" - ] - }, - "Web/HTML/Element/bdi": { - "modified": "2019-03-23T22:05:29.691Z", - "contributors": [ - "grandmalovesyou", - "Leun4m" - ] - }, - "Web/HTML/Element/bdo": { - "modified": "2019-03-23T23:13:23.713Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/bgsound": { - "modified": "2019-03-23T23:08:23.063Z", - "contributors": [ - "MorningCrafter" - ] - }, - "Web/HTML/Element/big": { - "modified": "2019-03-23T23:13:20.974Z", - "contributors": [ - "kklein" - ] - }, - "Web/HTML/Element/blink": { - "modified": "2019-03-23T23:13:22.754Z", - "contributors": [ - "Aryx", - "kklein" - ] - }, - "Web/HTML/Element/blockquote": { - "modified": "2019-03-23T23:13:24.036Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/body": { - "modified": "2019-03-23T23:06:05.733Z", - "contributors": [ - "Sebastianz", - "felhe", - "loki" - ] - }, - "Web/HTML/Element/br": { - "modified": "2019-03-23T23:37:55.770Z", - "contributors": [ - "schlagi123", - "dio", - "teoli", - "Sprottenwels" - ] - }, - "Web/HTML/Element/canvas": { - "modified": "2019-03-24T00:07:16.201Z", - "contributors": [ - "benediktp", - "teoli", - "pixunil", - "xaky", - "iab" - ] - }, - "Web/HTML/Element/caption": { - "modified": "2019-03-18T21:14:29.827Z", - "contributors": [ - "JustAnotherJavaProgrammer", - "RmnWtnkmp" - ] - }, - "Web/HTML/Element/center": { - "modified": "2019-03-23T23:13:30.135Z", - "contributors": [ - "kklein" - ] - }, - "Web/HTML/Element/cite": { - "modified": "2019-03-23T23:13:24.867Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/code": { - "modified": "2019-09-16T08:58:23.052Z", - "contributors": [ - "ThomasSpornraft", - "Sebastianz", - "Slashcat", - "kklein" - ] - }, - "Web/HTML/Element/col": { - "modified": "2020-10-15T21:58:35.643Z", - "contributors": [ - "RmnWtnkmp", - "dio", - "grandmalovesyou" - ] - }, - "Web/HTML/Element/data": { - "modified": "2019-03-23T22:03:47.937Z", - "contributors": [ - "grandmalovesyou" - ] - }, - "Web/HTML/Element/datalist": { - "modified": "2020-10-15T21:21:57.425Z", - "contributors": [ - "rivalitaet", - "fscholz", - "mfranzke", - "Sebastianz", - "SJW", - "teoli", - "nothine" - ] - }, - "Web/HTML/Element/dd": { - "modified": "2019-03-23T23:13:01.544Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/del": { - "modified": "2019-03-23T23:13:03.883Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/details": { - "modified": "2020-10-15T21:28:48.213Z", - "contributors": [ - "chrisdavidmills", - "SJW", - "wbamberg", - "flying-sheep", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/dialog": { - "modified": "2019-03-23T22:49:25.564Z", - "contributors": [ - "webD97", - "Sebastianz", - "kiloalphaindia" - ] - }, - "Web/HTML/Element/dir": { - "modified": "2019-03-23T23:13:01.665Z", - "contributors": [ - "kklein" - ] - }, - "Web/HTML/Element/div": { - "modified": "2020-05-07T06:47:07.777Z", - "contributors": [ - "zuzuzu", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/dl": { - "modified": "2019-03-23T23:13:02.194Z", - "contributors": [ - "schlagi123", - "Sebastianz", - "ThomasLandauer", - "idmean", - "wtw", - "kklein" - ] - }, - "Web/HTML/Element/dt": { - "modified": "2019-03-23T23:12:59.924Z", - "contributors": [ - "tyrann0us", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/em": { - "modified": "2019-03-23T22:44:49.981Z", - "contributors": [ - "grandmalovesyou", - "dio" - ] - }, - "Web/HTML/Element/embed": { - "modified": "2019-03-23T22:03:35.260Z", - "contributors": [ - "grandmalovesyou" - ] - }, - "Web/HTML/Element/fieldset": { - "modified": "2019-03-23T22:03:44.029Z", - "contributors": [ - "duncancumming", - "Cerberooo", - "grandmalovesyou" - ] - }, - "Web/HTML/Element/font": { - "modified": "2019-03-18T21:17:40.865Z", - "contributors": [ - "RmnWtnkmp" - ] - }, - "Web/HTML/Element/footer": { - "modified": "2020-10-15T21:28:59.142Z", - "contributors": [ - "fscholz", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/header": { - "modified": "2019-03-23T23:12:58.526Z", - "contributors": [ - "Sebastianz", - "supermueller", - "kklein" - ] - }, - "Web/HTML/Element/hr": { - "modified": "2019-03-24T00:04:16.306Z", - "contributors": [ - "schlagi123", - "Shidigital", - "dio", - "teoli", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/html": { - "modified": "2019-04-01T00:07:49.772Z", - "contributors": [ - "ToBeFree", - "giffeler", - "Sebastianz", - "Slashcat", - "AickeSchulz", - "teoli", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/i": { - "modified": "2019-03-23T22:30:02.803Z", - "contributors": [ - "RmnWtnkmp" - ] - }, - "Web/HTML/Element/iframe": { - "modified": "2019-03-24T00:04:37.363Z", - "contributors": [ - "schlagi123", - "teoli", - "fscholz", - "Crocki" - ] - }, - "Web/HTML/Element/image": { - "modified": "2020-10-15T22:02:53.775Z", - "contributors": [ - "teoli", - "jackyscript" - ] - }, - "Web/HTML/Element/img": { - "modified": "2019-03-23T22:44:40.885Z", - "contributors": [ - "emanpresu", - "mdnde", - "jumpball" - ] - }, - "Web/HTML/Element/ins": { - "modified": "2019-03-23T23:10:24.798Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/legend": { - "modified": "2020-10-15T22:04:07.283Z", - "contributors": [ - "annivin" - ] - }, - "Web/HTML/Element/li": { - "modified": "2019-06-06T11:33:12.993Z", - "contributors": [ - "humbapa", - "Sebastianz", - "jumpball", - "dio", - "teoli", - "Aybee", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/link": { - "modified": "2019-03-23T23:03:06.561Z", - "contributors": [ - "hagbard42", - "Sebastianz", - "Rudi3" - ] - }, - "Web/HTML/Element/main": { - "modified": "2019-03-23T23:02:25.206Z", - "contributors": [ - "marymar", - "Sebastianz", - "MarauderXtreme", - "Slashcat", - "dennis_sari" - ] - }, - "Web/HTML/Element/map": { - "modified": "2020-10-15T21:31:08.460Z", - "contributors": [ - "fscholz", - "Sebastianz", - "RmnWtnkmp", - "nathankuechler" - ] - }, - "Web/HTML/Element/marquee": { - "modified": "2019-04-01T09:05:38.364Z", - "contributors": [ - "trollkotze", - "Scurch" - ] - }, - "Web/HTML/Element/nav": { - "modified": "2020-10-15T22:14:07.749Z", - "contributors": [ - "NoldoArnion" - ] - }, - "Web/HTML/Element/noembed": { - "modified": "2020-10-15T22:15:59.878Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "Web/HTML/Element/noscript": { - "modified": "2020-10-15T21:24:04.151Z", - "contributors": [ - "schlagi123", - "Sebastianz", - "greiner", - "teoli", - "G_hi3" - ] - }, - "Web/HTML/Element/object": { - "modified": "2019-03-23T23:11:21.869Z", - "contributors": [ - "Sebastianz", - "isaraystanz" - ] - }, - "Web/HTML/Element/ol": { - "modified": "2019-03-24T00:04:15.805Z", - "contributors": [ - "somaGFX", - "schlagi123", - "dio", - "teoli", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/optgroup": { - "modified": "2019-03-23T23:12:58.044Z", - "contributors": [ - "scherii", - "Sebastianz" - ] - }, - "Web/HTML/Element/option": { - "modified": "2019-03-23T23:05:53.035Z", - "contributors": [ - "Sebastianz", - "hschieck" - ] - }, - "Web/HTML/Element/p": { - "modified": "2020-10-15T21:13:54.778Z", - "contributors": [ - "zuzuzu", - "schlagi123", - "FlorianBrinkmann", - "dio", - "teoli", - "fscholz", - "ethertank", - "Crash" - ] - }, - "Web/HTML/Element/picture": { - "modified": "2020-10-15T21:41:41.688Z", - "contributors": [ - "SJW", - "tobias47n9e", - "tobiasfabian", - "ViciousPecan" - ] - }, - "Web/HTML/Element/pre": { - "modified": "2019-03-23T23:37:55.984Z", - "contributors": [ - "born2webdesign", - "schlagi123", - "teoli", - "Sprottenwels" - ] - }, - "Web/HTML/Element/progress": { - "modified": "2020-04-22T07:16:43.825Z", - "contributors": [ - "Breaker222", - "thuhh", - "Volker-E", - "wbamberg", - "phlppn", - "DrMabuse23", - "Sebastianz", - "teoli", - "Slashcat" - ] - }, - "Web/HTML/Element/q": { - "modified": "2019-03-18T21:14:29.591Z", - "contributors": [ - "JustAnotherJavaProgrammer", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/s": { - "modified": "2019-03-23T23:11:49.678Z", - "contributors": [ - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/section": { - "modified": "2020-03-22T16:15:05.047Z", - "contributors": [ - "GiovanniHD201E", - "lkreimann", - "Sebastianz", - "wolfrabe" - ] - }, - "Web/HTML/Element/strong": { - "modified": "2019-03-24T00:04:39.876Z", - "contributors": [ - "schlagi123", - "Slashcat", - "teoli", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/summary": { - "modified": "2020-10-15T21:28:58.977Z", - "contributors": [ - "SJW", - "wbamberg", - "kklein" - ] - }, - "Web/HTML/Element/table": { - "modified": "2019-03-23T23:17:42.079Z", - "contributors": [ - "Dev201", - "fscholz", - "Jublo-Solutions" - ] - }, - "Web/HTML/Element/td": { - "modified": "2020-10-15T22:21:01.174Z", - "contributors": [ - "colsceg" - ] - }, - "Web/HTML/Element/template": { - "modified": "2019-03-23T22:54:16.252Z", - "contributors": [ - "Metaa", - "Sebastianz", - "phil-schreiber" - ] - }, - "Web/HTML/Element/time": { - "modified": "2019-03-23T23:21:37.890Z", - "contributors": [ - "Sebastianz", - "dennis_sari", - "teoli", - "tim_kraut" - ] - }, - "Web/HTML/Element/title": { - "modified": "2019-09-11T09:06:33.827Z", - "contributors": [ - "podarcis", - "Sebastianz", - "kklein" - ] - }, - "Web/HTML/Element/tr": { - "modified": "2019-03-23T23:03:57.305Z", - "contributors": [ - "Martin.Kraft", - "schlagi123", - "dio", - "skl" - ] - }, - "Web/HTML/Element/tt": { - "modified": "2019-03-23T23:09:07.482Z", - "contributors": [ - "RmnWtnkmp", - "mkuhn" - ] - }, - "Web/HTML/Element/u": { - "modified": "2019-03-23T23:02:37.406Z", - "contributors": [ - "skl" - ] - }, - "Web/HTML/Element/ul": { - "modified": "2019-03-24T00:04:22.186Z", - "contributors": [ - "dio", - "teoli", - "fscholz", - "ethertank", - "Crash" - ] - }, - "Web/HTML/Element/var": { - "modified": "2019-03-24T00:04:40.794Z", - "contributors": [ - "schlagi123", - "teoli", - "fscholz", - "ethertank", - "Crash" - ] - }, - "Web/HTML/Element/video": { - "modified": "2019-03-23T22:58:58.710Z", - "contributors": [ - "nylki", - "marc-se", - "Sebastianz", - "spiegelp" - ] - }, - "Web/HTML/Global_attributes": { - "modified": "2020-10-15T21:26:14.135Z", - "contributors": [ - "LoVo666", - "qjubic", - "pixunil" - ] - }, - "Web/HTML/Global_attributes/accesskey": { - "modified": "2020-10-15T22:03:59.818Z", - "contributors": [ - "Claas" - ] - }, - "Web/HTML/Global_attributes/autocapitalize": { - "modified": "2020-10-15T22:05:02.265Z", - "contributors": [ - "alaskaa" - ] - }, - "Web/HTML/Global_attributes/class": { - "modified": "2019-03-23T22:53:31.655Z", - "contributors": [ - "sigoa", - "lxdiamond" - ] - }, - "Web/HTML/Global_attributes/contenteditable": { - "modified": "2019-03-18T21:36:35.603Z", - "contributors": [ - "4223", - "Claas" - ] - }, - "Web/HTML/Global_attributes/contextmenu": { - "modified": "2020-03-26T16:11:41.701Z", - "contributors": [ - "MarcusRiemer", - "SphinxKnight", - "ctexxx" - ] - }, - "Web/HTML/Global_attributes/dir": { - "modified": "2020-10-15T22:05:39.463Z", - "contributors": [ - "RewoSiedge" - ] - }, - "Web/HTML/Global_attributes/draggable": { - "modified": "2019-03-23T22:47:23.466Z", - "contributors": [ - "schlagi123", - "RmnWtnkmp", - "rstarke-dd" - ] - }, - "Web/HTML/Global_attributes/hidden": { - "modified": "2020-10-15T21:38:08.779Z", - "contributors": [ - "fscholz", - "Oliver_Schafeld", - "RmnWtnkmp", - "skl" - ] - }, - "Web/HTML/Global_attributes/id": { - "modified": "2019-03-18T21:47:05.388Z", - "contributors": [ - "BlaM", - "skl" - ] - }, - "Web/HTML/Global_attributes/inputmode": { - "modified": "2020-10-15T22:14:49.189Z", - "contributors": [ - "sklicek" - ] - }, - "Web/HTML/Global_attributes/lang": { - "modified": "2020-10-15T21:51:21.501Z", - "contributors": [ - "kaljak", - "RmnWtnkmp" - ] - }, - "Web/HTML/Global_attributes/style": { - "modified": "2020-08-18T11:36:01.283Z", - "contributors": [ - "FelixSchwarz", - "tairt", - "RmnWtnkmp" - ] - }, - "Web/HTML/Global_attributes/tabindex": { - "modified": "2020-10-15T22:17:29.883Z", - "contributors": [ - "Michael-1", - "vssn" - ] - }, - "Web/HTML/Global_attributes/title": { - "modified": "2019-03-23T22:32:47.288Z", - "contributors": [ - "alaskaa", - "klausinger", - "eluchsinger" - ] - }, - "Web/HTML/Global_attributes/translate": { - "modified": "2019-10-21T21:28:23.890Z", - "contributors": [ - "LoVo666" - ] - }, - "Web/HTML/Inline_elements": { - "modified": "2019-03-23T23:18:01.940Z", - "contributors": [ - "Aryx", - "petergloor", - "teoli", - "lukas.oppermann" - ] - }, - "Web/HTML/Reference": { - "modified": "2019-09-09T07:16:32.387Z", - "contributors": [ - "SphinxKnight", - "mprofitl", - "wbamberg", - "legalbit" - ] - }, - "Web/HTML/Using_the_application_cache": { - "modified": "2019-03-23T23:31:27.651Z", - "contributors": [ - "petzichen", - "freimuth82", - "fscholz", - "gr2m", - "teoli", - "fiona89" - ] - }, - "Web/HTTP": { - "modified": "2020-10-17T06:15:21.236Z", - "contributors": [ - "hpkainz", - "rs-github", - "stef4412", - "Claas", - "fscholz", - "Anoian", - "fulle81", - "groovecoder" - ] - }, - "Web/HTTP/Basics_of_HTTP": { - "modified": "2019-09-15T04:45:42.906Z" - }, - "Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": { - "modified": "2019-09-15T13:08:30.896Z", - "contributors": [ - "reyemDarnok" - ] - }, - "Web/HTTP/CORS": { - "modified": "2020-10-15T22:10:02.077Z", - "contributors": [ - "Dschubba", - "htlvil-paulk", - "MauTauReen", - "ghayth.mkh" - ] - }, - "Web/HTTP/CORS/Errors": { - "modified": "2019-03-18T21:24:22.309Z", - "contributors": [ - "nchevobbe" - ] - }, - "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { - "modified": "2019-05-16T11:43:09.527Z", - "contributors": [ - "vaupeh", - "scherii", - "quicksanddiver" - ] - }, - "Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight": { - "modified": "2020-03-31T09:46:01.871Z", - "contributors": [ - "cradloff" - ] - }, - "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { - "modified": "2019-07-24T08:48:05.259Z", - "contributors": [ - "kai-oswald", - "SAvB" - ] - }, - "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { - "modified": "2019-05-21T09:09:00.472Z", - "contributors": [ - "EastFreezian" - ] - }, - "Web/HTTP/Caching": { - "modified": "2019-03-23T23:05:15.113Z", - "contributors": [ - "jugmac00", - "Johann150", - "VoodooDS" - ] - }, - "Web/HTTP/Headers": { - "modified": "2019-05-30T17:47:25.618Z", - "contributors": [ - "King2500", - "SebinNyshkim", - "fl1p" - ] - }, - "Web/HTTP/Headers/Accept": { - "modified": "2020-10-15T22:26:49.610Z", - "contributors": [ - "TorbenKoehn" - ] - }, - "Web/HTTP/Headers/Age": { - "modified": "2020-10-15T21:59:14.135Z", - "contributors": [ - "zuzuzu", - "TimHi" - ] - }, - "Web/HTTP/Headers/Cache-Control": { - "modified": "2020-10-15T22:02:19.949Z", - "contributors": [ - "King2500", - "Univream", - "fawei" - ] - }, - "Web/HTTP/Headers/Cookie": { - "modified": "2020-10-15T22:00:20.631Z", - "contributors": [ - "Wipster" - ] - }, - "Web/HTTP/Headers/DNT": { - "modified": "2020-10-15T21:58:41.249Z", - "contributors": [ - "timmyRS" - ] - }, - "Web/HTTP/Headers/Expect-CT": { - "modified": "2020-10-15T22:29:47.313Z", - "contributors": [ - "dennissterzenbach" - ] - }, - "Web/HTTP/Headers/Expires": { - "modified": "2020-10-15T22:09:33.622Z", - "contributors": [ - "ThomasHartz" - ] - }, - "Web/HTTP/Headers/Referer": { - "modified": "2020-10-15T22:13:36.881Z", - "contributors": [ - "bsotodo", - "Megamezzomixer" - ] - }, - "Web/HTTP/Headers/Server": { - "modified": "2020-10-15T21:58:46.872Z", - "contributors": [ - "timmyRS" - ] - }, - "Web/HTTP/Headers/Tk": { - "modified": "2019-03-23T22:03:12.387Z", - "contributors": [ - "timmyRS" - ] - }, - "Web/HTTP/Headers/X-Content-Type-Options": { - "modified": "2020-11-30T18:36:23.304Z", - "contributors": [ - "Johuspect", - "claui", - "AnthyG", - "peschuster", - "Joeatc" - ] - }, - "Web/HTTP/Headers/X-Frame-Options": { - "modified": "2020-10-15T21:53:15.450Z", - "contributors": [ - "fscholz", - "javafrog", - "Lars-Wunderlich" - ] - }, - "Web/HTTP/Methods": { - "modified": "2020-10-15T22:09:56.258Z", - "contributors": [ - "aichbauer" - ] - }, - "Web/HTTP/Methods/CONNECT": { - "modified": "2020-10-15T22:09:55.098Z", - "contributors": [ - "td8" - ] - }, - "Web/HTTP/Methods/DELETE": { - "modified": "2020-10-15T22:10:04.775Z", - "contributors": [ - "Dschubba", - "td8" - ] - }, - "Web/HTTP/Methods/GET": { - "modified": "2020-10-15T22:24:06.028Z", - "contributors": [ - "sklicek" - ] - }, - "Web/HTTP/Status": { - "modified": "2020-11-15T16:45:22.616Z", - "contributors": [ - "1elf-me", - "fscholz" - ] - }, - "Web/HTTP/Status/100": { - "modified": "2020-10-15T21:50:37.477Z", - "contributors": [ - "markobr", - "Marenthyu", - "SebinNyshkim" - ] - }, - "Web/HTTP/Status/200": { - "modified": "2020-10-15T22:09:04.712Z", - "contributors": [ - "markobr", - "Saebbi" - ] - }, - "Web/HTTP/Status/201": { - "modified": "2020-11-15T16:56:37.808Z", - "contributors": [ - "1elf-me" - ] - }, - "Web/HTTP/Status/302": { - "modified": "2020-10-15T21:56:04.030Z", - "contributors": [ - "markobr", - "RaisingAgent", - "DanielR92" - ] - }, - "Web/HTTP/Status/304": { - "modified": "2020-10-15T21:57:39.598Z", - "contributors": [ - "markobr", - "MGoelles24", - "TheHater21" - ] - }, - "Web/HTTP/Status/400": { - "modified": "2019-07-10T16:01:00.065Z", - "contributors": [ - "markobr", - "liltv.media" - ] - }, - "Web/HTTP/Status/401": { - "modified": "2020-10-15T22:09:12.130Z", - "contributors": [ - "markobr", - "liltv.media" - ] - }, - "Web/HTTP/Status/403": { - "modified": "2020-10-15T22:11:03.536Z", - "contributors": [ - "markobr", - "Meisterfuchs" - ] - }, - "Web/HTTP/Status/404": { - "modified": "2020-10-15T21:50:37.640Z", - "contributors": [ - "markobr", - "liltv.media", - "SebinNyshkim" - ] - }, - "Web/HTTP/Status/409": { - "modified": "2019-09-15T04:47:27.346Z", - "contributors": [ - "reyemDarnok" - ] - }, - "Web/HTTP/Status/410": { - "modified": "2020-10-15T21:50:37.425Z", - "contributors": [ - "markobr", - "Marenthyu", - "SebinNyshkim" - ] - }, - "Web/HTTP/Status/414": { - "modified": "2019-07-12T06:43:55.384Z", - "contributors": [ - "markobr" - ] - }, - "Web/HTTP/Status/418": { - "modified": "2020-10-15T22:11:00.109Z", - "contributors": [ - "markobr", - "Meisterfuchs" - ] - }, - "Web/HTTP/Status/500": { - "modified": "2020-10-15T21:50:37.325Z", - "contributors": [ - "markobr", - "SebinNyshkim" - ] - }, - "Web/HTTP/Status/502": { - "modified": "2019-03-23T22:25:51.694Z", - "contributors": [ - "Siphalor", - "PercyGitarrist" - ] - }, - "Web/HTTP/Status/503": { - "modified": "2020-10-15T22:21:06.347Z", - "contributors": [ - "markobr" - ] - }, - "Web/HTTP/Status/504": { - "modified": "2020-10-15T22:21:06.738Z", - "contributors": [ - "markobr" - ] - }, - "Web/HTTP/Status/505": { - "modified": "2019-07-10T13:40:21.212Z", - "contributors": [ - "markobr" - ] - }, - "Web/HTTP/Status/511": { - "modified": "2019-07-10T13:54:20.094Z", - "contributors": [ - "markobr" - ] - }, - "Web/JavaScript": { - "modified": "2020-09-16T15:12:04.337Z", - "contributors": [ - "steevn", - "Jonydaboy19", - "SphinxKnight", - "chrisdavidmills", - "ivan-pan", - "tirein", - "rs-github", - "schlagi123", - "dontbyte", - "Sixl-Daniel", - "sigoa", - "gjungb", - "Old-Lady", - "tieftoener", - "fscholz", - "Patrick_St.", - "mcweba", - "omniskop", - "loki", - "Airblader", - "eminor", - "ethertank", - "shapeshifta", - "Philipp" - ] - }, - "Web/JavaScript/A_re-introduction_to_JavaScript": { - "modified": "2020-05-19T18:28:46.915Z", - "contributors": [ - "AlexanderLaska", - "Timbuktu1982", - "Dusty4848", - "Meiqian", - "Nikolai_Kucksdorf", - "kisjoke91", - "Space42", - "Univream", - "tomscholz", - "schlagi123", - "PinheadLarry", - "sigoa", - "acetous", - "martinhoffmann", - "Coke_and_Pepsi", - "ibafluss", - "creitiv", - "fscholz", - "eminor" - ] - }, - "Web/JavaScript/About_JavaScript": { - "modified": "2020-03-12T19:39:49.162Z", - "contributors": [ - "schlagi123", - "judy55", - "loki" - ] - }, - "Web/JavaScript/Closures": { - "modified": "2020-08-14T08:33:52.378Z", - "contributors": [ - "ManuelKiessling", - "m4con", - "tirein", - "MehrzahlVonKorn", - "_trng", - "schlagi123", - "cami", - "ChriBack", - "JohannesDienst", - "mbelas", - "Oliver_Schafeld", - "maybe", - "fscholz", - "AickeSchulz", - "eminor" - ] - }, - "Web/JavaScript/Data_structures": { - "modified": "2020-03-12T19:40:01.103Z", - "contributors": [ - "BenjHawk", - "GR_Fuchs", - "fL03", - "schlagi123", - "twarncke", - "yampus", - "ChristianLuxem", - "nodexo", - "fscholz", - "siggi-heltau", - "FabianBeiner", - "spiegelp" - ] - }, - "Web/JavaScript/Enumerability_and_ownership_of_properties": { - "modified": "2020-05-27T07:04:55.127Z", - "contributors": [ - "zuzuzu" - ] - }, - "Web/JavaScript/Equality_comparisons_and_sameness": { - "modified": "2020-03-12T19:40:00.637Z", - "contributors": [ - "schlagi123", - "outverness", - "kdex", - "fscholz", - "spiegelp" - ] - }, - "Web/JavaScript/EventLoop": { - "modified": "2020-03-12T19:41:21.053Z", - "contributors": [ - "chrkhl", - "schlagi123", - "HaayeHenricus", - "marymar", - "pkleindienst", - "clemens", - "Broetchen1234" - ] - }, - "Web/JavaScript/Guide": { - "modified": "2020-03-12T19:35:23.827Z", - "contributors": [ - "mschleeweiss", - "schlagi123", - "tieftoener", - "fscholz", - "eminor", - "teoli", - "marc971" - ] - }, - "Web/JavaScript/Guide/Control_flow_and_error_handling": { - "modified": "2020-03-12T19:37:55.717Z", - "contributors": [ - "cami", - "deklesen", - "woiddale", - "schlagi123", - "SaschaHeyer", - "PreCodeEU", - "StevenS77", - "jwhitlock", - "KarolineCat", - "fscholz", - "vsenol", - "eminor" - ] - }, - "Web/JavaScript/Guide/Expressions_and_Operators": { - "modified": "2020-03-12T19:38:40.241Z", - "contributors": [ - "occcy", - "stefboll", - "HaayeHenricus", - "schlagi123", - "MelanieVeigl", - "Kevinci", - "fscholz", - "DavidWalsh", - "eminor" - ] - }, - "Web/JavaScript/Guide/Functions": { - "modified": "2020-03-12T19:38:37.078Z", - "contributors": [ - "dmho", - "cami", - "loicyondjeu", - "stefboll", - "woiddale", - "schlagi123", - "b-lack", - "vetoCode", - "fscholz", - "eminor" - ] - }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-09-16T18:03:08.891Z", - "contributors": [ - "FFFutureflo", - "Tionran", - "schlagi123", - "TomasRiker", - "aldec-dv", - "SaschaHeyer", - "yampus", - "FocusCookie", - "Randomfinger", - "NedNisW", - "vetoCode", - "didierCH", - "baxstar", - "fscholz", - "siggi-heltau", - "eminor", - "NickRussler", - "Hans_Mueller" - ] - }, - "Web/JavaScript/Guide/Indexed_collections": { - "modified": "2020-03-12T19:46:38.832Z", - "contributors": [ - "G_hi3" - ] - }, - "Web/JavaScript/Guide/Introduction": { - "modified": "2020-03-12T19:40:52.952Z", - "contributors": [ - "woiddale", - "schlagi123", - "aldec-dv", - "NedNisW", - "janjo", - "Chtheile", - "miniemuff", - "fscholz", - "Sir.Codewright" - ] - }, - "Web/JavaScript/Guide/Keyed_collections": { - "modified": "2020-07-15T01:51:42.838Z", - "contributors": [ - "kre", - "Cerberooo", - "cami", - "Julian-B90", - "schlagi123" - ] - }, - "Web/JavaScript/Guide/Loops_and_iteration": { - "modified": "2020-03-12T19:43:05.832Z", - "contributors": [ - "schlagi123", - "j0ck", - "moreadrenalin" - ] - }, - "Web/JavaScript/Guide/Meta_programming": { - "modified": "2020-03-12T19:47:40.641Z", - "contributors": [ - "mschleeweiss", - "schlagi123" - ] - }, - "Web/JavaScript/Guide/Numbers_and_dates": { - "modified": "2020-03-12T19:43:42.890Z", - "contributors": [ - "mrmoree", - "schlagi123", - "kdex" - ] - }, - "Web/JavaScript/Guide/Regular_Expressions": { - "modified": "2020-03-12T19:37:54.891Z", - "contributors": [ - "woiddale", - "SphinxKnight", - "0xflotus", - "hinzundcode", - "nextlevelshit", - "ddBenny", - "schlagi123", - "tyrasd", - "fscholz", - "eminor" - ] - }, - "Web/JavaScript/Guide/Text_formatting": { - "modified": "2020-03-12T19:46:53.213Z", - "contributors": [ - "schlagi123", - "patpir", - "SEBv15" - ] - }, - "Web/JavaScript/Guide/Using_promises": { - "modified": "2020-07-30T16:41:03.762Z", - "contributors": [ - "venven-de", - "scarcloud", - "matze19831211" - ] - }, - "Web/JavaScript/Guide/Working_with_Objects": { - "modified": "2020-03-12T19:38:32.446Z", - "contributors": [ - "schlagi123", - "Dr-Oetker", - "SphinxKnight", - "papper371", - "timosperisen", - "serv-inc", - "fw-zirkusdigitalo", - "fscholz", - "DavidWalsh", - "stephaniehobson", - "cyclodev", - "eminor" - ] - }, - "Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-03-12T19:41:37.015Z", - "contributors": [ - "Meiqian", - "trollkotze", - "sigoa", - "schlagi123", - "kdex", - "Semnodime", - "rocco", - "neekibo", - "antonharald" - ] - }, - "Web/JavaScript/JavaScript_technologies_overview": { - "modified": "2020-03-12T19:39:42.418Z", - "contributors": [ - "lesch", - "fl1p", - "spiegelp" - ] - }, - "Web/JavaScript/Memory_Management": { - "modified": "2020-03-12T19:38:43.251Z", - "contributors": [ - "FERNman", - "fscholz", - "Mitja", - "eminor" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:38:00.390Z", - "contributors": [ - "schlagi123", - "Deppenapostroph", - "rbarisic", - "RaymondFleck", - "timbernasley", - "fscholz", - "ethertank" - ] - }, - "Web/JavaScript/Reference/About": { - "modified": "2020-03-12T19:39:52.145Z", - "contributors": [ - "schlagi123", - "andrehuf", - "Morbid2903", - "timbernasley" - ] - }, - "Web/JavaScript/Reference/Classes": { - "modified": "2020-03-12T19:41:32.478Z", - "contributors": [ - "schlagi123", - "Daniel_Sixl", - "Husi012", - "dehenne", - "DPangerl", - "jaller94", - "chiborg", - "akumagamo", - "neutr0nis", - "LevitatingOrange" - ] - }, - "Web/JavaScript/Reference/Classes/constructor": { - "modified": "2020-03-12T19:43:34.404Z", - "contributors": [ - "kdex", - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Classes/extends": { - "modified": "2020-03-12T19:43:31.080Z", - "contributors": [ - "hporten", - "kdex", - "buboh", - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Classes/static": { - "modified": "2020-10-15T21:45:38.442Z", - "contributors": [ - "kdex", - "schlagi123", - "Nimelrian", - "jahe", - "marvhock", - "kannix", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { - "modified": "2020-03-12T19:43:15.969Z", - "contributors": [ - "PointedEars", - "jumpball" - ] - }, - "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": { - "modified": "2020-03-12T19:48:53.999Z", - "contributors": [ - "ctexxx" - ] - }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:43:41.868Z", - "contributors": [ - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Already_has_pragma": { - "modified": "2020-03-12T19:47:20.172Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Array_sort_argument": { - "modified": "2020-03-12T19:47:33.148Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Bad_octal": { - "modified": "2020-03-12T19:47:25.600Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Bad_radix": { - "modified": "2020-03-12T19:47:40.678Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { - "modified": "2020-03-12T19:47:43.378Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { - "modified": "2020-03-12T19:47:36.755Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": { - "modified": "2020-03-12T19:47:23.087Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { - "modified": "2020-03-12T19:47:39.951Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible": { - "modified": "2020-03-12T19:47:37.913Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Cant_delete": { - "modified": "2020-03-12T19:47:33.700Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Cant_redefine_property": { - "modified": "2020-03-12T19:47:33.994Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Cyclic_object_value": { - "modified": "2020-03-12T19:47:32.067Z", - "contributors": [ - "martinr1604", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Dead_object": { - "modified": "2020-03-12T19:47:34.842Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { - "modified": "2020-03-12T19:47:47.727Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_String_generics": { - "modified": "2020-03-12T19:47:17.153Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { - "modified": "2020-03-12T19:47:44.593Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_expression_closures": { - "modified": "2020-03-12T19:47:23.525Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { - "modified": "2020-03-12T19:47:46.456Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { - "modified": "2020-03-12T19:47:46.265Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat": { - "modified": "2020-03-12T19:47:24.103Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Equal_as_assign": { - "modified": "2020-03-12T19:47:33.976Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated": { - "modified": "2020-03-12T19:47:22.797Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Getter_only": { - "modified": "2020-03-12T19:47:33.589Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Identifier_after_number": { - "modified": "2020-03-12T19:47:39.577Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Illegal_character": { - "modified": "2020-03-12T19:47:40.583Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_array_length": { - "modified": "2020-03-12T19:43:36.993Z", - "contributors": [ - "schlagi123", - "yampus", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { - "modified": "2020-03-12T19:46:39.233Z", - "contributors": [ - "schlagi123", - "Cripi" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_const_assignment": { - "modified": "2020-03-12T19:47:33.651Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_date": { - "modified": "2020-03-12T19:47:16.548Z", - "contributors": [ - "schlagi123", - "fire-stone" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { - "modified": "2020-03-12T19:47:50.395Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { - "modified": "2020-03-12T19:47:46.412Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/JSON_bad_parse": { - "modified": "2020-03-12T19:47:34.652Z", - "contributors": [ - "schlagi123", - "Jannik99" - ] - }, - "Web/JavaScript/Reference/Errors/Malformed_URI": { - "modified": "2020-05-11T08:04:02.475Z", - "contributors": [ - "Skasi", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { - "modified": "2020-03-12T19:43:43.986Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { - "modified": "2020-03-12T19:46:42.895Z", - "contributors": [ - "schlagi123", - "Stolzenhain" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { - "modified": "2020-03-12T19:47:39.916Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_function_body": { - "modified": "2020-03-12T19:47:34.109Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { - "modified": "2020-03-12T19:45:33.319Z", - "contributors": [ - "schlagi123", - "fire-stone" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { - "modified": "2020-03-12T19:47:38.482Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { - "modified": "2020-03-12T19:47:35.587Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { - "modified": "2020-03-12T19:47:35.523Z", - "contributors": [ - "sicLotus", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { - "modified": "2020-03-12T19:44:04.052Z", - "contributors": [ - "schlagi123", - "iimog", - "rolandbgd", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { - "modified": "2020-03-12T19:47:39.363Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:44:24.631Z", - "contributors": [ - "flufflepuff91", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/More_arguments_needed": { - "modified": "2020-03-12T19:47:35.019Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Negative_repetition_count": { - "modified": "2020-03-12T19:47:46.475Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/No_non-null_object": { - "modified": "2020-03-12T19:47:33.684Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/No_properties": { - "modified": "2020-03-12T19:46:21.338Z", - "contributors": [ - "schlagi123", - "timosperisen" - ] - }, - "Web/JavaScript/Reference/Errors/No_variable_name": { - "modified": "2020-03-12T19:47:35.139Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Non_configurable_array_element": { - "modified": "2020-03-12T19:47:37.860Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_codepoint": { - "modified": "2020-03-12T19:44:01.592Z", - "contributors": [ - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_constructor": { - "modified": "2020-03-12T19:46:54.349Z", - "contributors": [ - "NiklasMerz", - "schlagi123", - "klug_mario" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_function": { - "modified": "2020-03-12T19:45:23.396Z", - "contributors": [ - "flufflepuff91", - "schlagi123", - "fire-stone" - ] - }, - "Web/JavaScript/Reference/Errors/Not_defined": { - "modified": "2020-03-12T19:44:11.129Z", - "contributors": [ - "flufflepuff91", - "schlagi123", - "BennoKieselstein", - "Bernd_L", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Precision_range": { - "modified": "2020-03-12T19:44:05.096Z", - "contributors": [ - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Property_access_denied": { - "modified": "2020-03-12T19:44:01.071Z", - "contributors": [ - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Read-only": { - "modified": "2020-03-12T19:47:33.685Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Redeclared_parameter": { - "modified": "2020-03-12T19:47:37.067Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { - "modified": "2020-03-12T19:47:39.369Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Reserved_identifier": { - "modified": "2020-03-12T19:47:46.391Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { - "modified": "2020-03-12T19:47:46.172Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Stmt_after_return": { - "modified": "2020-03-12T19:43:39.489Z", - "contributors": [ - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { - "modified": "2020-03-12T19:47:45.620Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Too_much_recursion": { - "modified": "2020-03-12T19:43:58.453Z", - "contributors": [ - "schlagi123", - "olhaar", - "yampus", - "julmot", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Undeclared_var": { - "modified": "2020-03-12T19:47:43.541Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:44:10.591Z", - "contributors": [ - "schlagi123", - "ThomasFe", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Errors/Unexpected_token": { - "modified": "2020-03-12T19:45:02.701Z", - "contributors": [ - "schlagi123", - "albasiba" - ] - }, - "Web/JavaScript/Reference/Errors/Unexpected_type": { - "modified": "2020-03-12T19:45:54.249Z", - "contributors": [ - "schlagi123", - "thegeg", - "SusiHutzler", - "fire-stone", - "netalp" - ] - }, - "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { - "modified": "2020-03-12T19:47:45.907Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Unterminated_string_literal": { - "modified": "2020-03-12T19:47:34.534Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/Var_hides_argument": { - "modified": "2020-03-12T19:47:33.618Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/in_operator_no_object": { - "modified": "2020-03-12T19:47:34.037Z", - "contributors": [ - "matthias85", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand": { - "modified": "2020-03-12T19:47:33.003Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Errors/is_not_iterable": { - "modified": "2020-03-12T19:48:02.116Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:32:23.734Z", - "contributors": [ - "steevn", - "ibiBgOR", - "julianpollmann", - "schlagi123", - "P0lip" - ] - }, - "Web/JavaScript/Reference/Functions/Arrow_functions": { - "modified": "2020-10-15T21:50:51.602Z", - "contributors": [ - "schlagi123", - "Sixl-Daniel", - "kdex", - "sja", - "Eiknheimer", - "GuidoSchweizer", - "mhash17" - ] - }, - "Web/JavaScript/Reference/Functions/Default_parameters": { - "modified": "2020-10-15T21:51:29.730Z", - "contributors": [ - "schlagi123", - "Eiknheimer", - "serv-inc", - "StevenS77", - "kdex", - "leonschwanitz" - ] - }, - "Web/JavaScript/Reference/Functions/Method_definitions": { - "modified": "2020-03-12T19:40:25.737Z", - "contributors": [ - "kdex", - "schlagi123", - "siggi-heltau" - ] - }, - "Web/JavaScript/Reference/Functions/arguments": { - "modified": "2020-10-15T21:32:34.952Z", - "contributors": [ - "tonitone", - "StefKrie", - "haveyaseen", - "schlagi123", - "niorad", - "a-ctor", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { - "modified": "2020-10-15T22:04:50.730Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Functions/arguments/callee": { - "modified": "2020-10-15T21:32:40.831Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Functions/arguments/length": { - "modified": "2020-10-15T21:32:35.168Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Functions/get": { - "modified": "2020-10-15T22:04:49.671Z", - "contributors": [ - "schlagi123", - "JPeer264" - ] - }, - "Web/JavaScript/Reference/Functions/rest_parameters": { - "modified": "2020-10-15T21:56:07.951Z", - "contributors": [ - "sonicdoe", - "schlagi123", - "Simmarith" - ] - }, - "Web/JavaScript/Reference/Functions/set": { - "modified": "2020-10-15T22:04:49.802Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:38:16.835Z", - "contributors": [ - "jazevo", - "schlagi123", - "Deppenapostroph", - "SphinxKnight", - "timbernasley", - "fscholz", - "ziyunfei" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:25:30.625Z", - "contributors": [ - "grumpy-cat", - "SebinNyshkim", - "schlagi123", - "henje", - "JayEn84", - "Eiknheimer", - "StevenS77", - "kdex", - "antonharald", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { - "modified": "2020-10-15T22:01:02.252Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { - "modified": "2020-10-15T22:01:02.767Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { - "modified": "2020-10-15T22:01:03.125Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { - "modified": "2020-10-15T21:52:43.889Z", - "contributors": [ - "duckymirror", - "isnot2bad", - "NiklasMerz", - "schlagi123", - "molerat619", - "LeisureLarry", - "sol-idsnake", - "istvank", - "StevenS77" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { - "modified": "2020-10-15T21:52:47.826Z", - "contributors": [ - "schlagi123", - "StevenS77" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2020-10-15T21:34:08.129Z", - "contributors": [ - "schlagi123", - "ghost23", - "pecoes", - "oliver-j", - "FelixSebastianLange" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { - "modified": "2020-10-15T21:38:19.886Z", - "contributors": [ - "schlagi123", - "GR_Fuchs", - "Flummi", - "oliver-j" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2020-10-15T21:38:18.243Z", - "contributors": [ - "Tharkun86", - "schlagi123", - "oliver-j", - "AndyTheDandy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T21:47:07.289Z", - "contributors": [ - "schlagi123", - "orion-z", - "longstone" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/fill": { - "modified": "2020-10-15T21:38:18.545Z", - "contributors": [ - "schlagi123", - "Andreas_Dyballa", - "oliver-j", - "AndyTheDandy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-12-01T06:41:38.166Z", - "contributors": [ - "Gismo1337", - "caca123-nz", - "SebinNyshkim", - "michelgotta", - "schlagi123", - "xdevs23", - "midnightmare", - "oliver-j", - "occcy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:34:07.173Z", - "contributors": [ - "SebinNyshkim", - "schlagi123", - "mrkosim", - "psychotammi", - "mreu", - "db6edr", - "oliver-j", - "MelanieVeigl" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T21:50:45.238Z", - "contributors": [ - "SebinNyshkim", - "schlagi123", - "psychotammi", - "sosnet", - "labcode-de" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/flat": { - "modified": "2020-10-15T22:01:54.920Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { - "modified": "2020-10-15T22:02:19.086Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T21:31:37.392Z", - "contributors": [ - "SebinNyshkim", - "schlagi123", - "Martin.Kraft", - "Anonymous", - "StevenS77", - "L15t3", - "langco", - "sudave", - "olastor" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2020-10-15T21:38:18.396Z", - "contributors": [ - "manfredkogler", - "schlagi123", - "Maugo", - "odysseuscm", - "kdex", - "oliver-j", - "stehefan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:39:40.373Z", - "contributors": [ - "oliver-gramberg", - "MichelBahl", - "mikakruschel", - "schlagi123", - "adabru" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2020-10-15T21:39:59.907Z", - "contributors": [ - "SebinNyshkim", - "schlagi123", - "Athyrion" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2020-10-15T21:26:02.361Z", - "contributors": [ - "schlagi123", - "oliver-j", - "fscholz", - "yacchatta" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T21:32:45.888Z", - "contributors": [ - "SebinNyshkim", - "timlg07", - "schlagi123", - "wattafot", - "Saschlong", - "mieth" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/keys": { - "modified": "2020-10-15T21:55:10.261Z", - "contributors": [ - "jfi", - "schlagi123", - "Arlind" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { - "modified": "2020-10-15T21:55:15.610Z", - "contributors": [ - "schlagi123", - "Arlind" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2020-10-15T21:38:16.165Z", - "contributors": [ - "jfi", - "schlagi123", - "AndyTheDandy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T21:32:29.489Z", - "contributors": [ - "mwiehl", - "felix_geenen", - "SebinNyshkim", - "MerlindlH", - "schlagi123", - "kdex", - "FNGR2911", - "annnoo", - "StevenS77", - "schellmax", - "justb81", - "mexn", - "leMaik", - "derhagen", - "Arminmsg" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T21:38:18.269Z", - "contributors": [ - "schlagi123", - "dennissterzenbach", - "almai", - "mormahr", - "oliver-j" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:25:28.942Z", - "contributors": [ - "schlagi123", - "maoberlehner", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2020-10-15T21:25:28.923Z", - "contributors": [ - "SebinNyshkim", - "schlagi123", - "k7sleeper", - "marzepani", - "yacchatta", - "Arminmsg", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T21:25:28.957Z", - "contributors": [ - "schlagi123", - "cepharum", - "vog", - "mieth", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T21:25:29.071Z", - "contributors": [ - "schlagi123", - "OlegBr", - "HendrikRunte", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-10-15T21:38:17.986Z", - "contributors": [ - "DATADEER", - "schlagi123", - "wiegels", - "OlegBr", - "oliver-j" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/some": { - "modified": "2020-10-15T21:51:10.415Z", - "contributors": [ - "schlagi123", - "Jumace", - "ddBenny", - "MaxKr", - "StevenS77", - "ThorstenHans" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T21:50:45.209Z", - "contributors": [ - "SebinNyshkim", - "schlagi123", - "xerox", - "Huargh" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T21:30:49.791Z", - "contributors": [ - "montapro", - "Huegelkoenig", - "SebinNyshkim", - "leon-jasper", - "GateKeeper", - "Horitsu", - "Breaker222", - "schlagi123", - "ndresx", - "n4nos", - "valentinmanthei", - "Andorxor", - "rillke", - "cepharum", - "TMR", - "BlaM", - "shentschel", - "casarock", - "depoulo", - "rhulha" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { - "modified": "2020-10-15T21:59:23.526Z", - "contributors": [ - "schlagi123", - "SphinxKnight", - "vssn" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T21:55:07.803Z", - "contributors": [ - "schlagi123", - "Arlind" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T21:47:41.247Z", - "contributors": [ - "schlagi123", - "stefanwimmer128" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T21:47:50.418Z", - "contributors": [ - "schlagi123", - "Semnodime" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2020-10-15T21:54:09.221Z", - "contributors": [ - "schlagi123", - "bpaetzold", - "Steinweber", - "ionree" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { - "modified": "2020-10-15T22:01:09.595Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { - "modified": "2020-10-15T22:01:09.711Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { - "modified": "2020-10-15T22:01:15.297Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { - "modified": "2020-10-15T22:01:09.307Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T22:01:12.299Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics": { - "modified": "2020-10-15T22:01:14.609Z", - "contributors": [ - "Cortys", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/add": { - "modified": "2020-10-15T22:01:23.490Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/and": { - "modified": "2020-10-15T22:01:14.178Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": { - "modified": "2020-10-15T22:01:23.524Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": { - "modified": "2020-10-15T22:01:23.804Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": { - "modified": "2020-10-15T22:01:23.367Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/load": { - "modified": "2020-10-15T22:01:23.437Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/notify": { - "modified": "2020-10-15T22:01:24.441Z", - "contributors": [ - "Cortys", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/or": { - "modified": "2020-10-15T22:01:12.332Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/store": { - "modified": "2020-10-15T22:01:23.350Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/sub": { - "modified": "2020-10-15T22:01:23.514Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/wait": { - "modified": "2020-10-15T22:01:24.450Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Atomics/xor": { - "modified": "2020-10-15T22:01:13.324Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T21:34:05.047Z", - "contributors": [ - "schlagi123", - "FatihSyrox", - "rbarisic" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T21:45:27.278Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { - "modified": "2020-10-15T21:45:25.930Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView": { - "modified": "2020-10-15T21:46:54.170Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/buffer": { - "modified": "2020-10-15T21:46:47.193Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": { - "modified": "2020-10-15T21:47:07.178Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": { - "modified": "2020-10-15T21:47:08.642Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": { - "modified": "2020-10-15T21:47:06.658Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": { - "modified": "2020-10-15T21:47:05.154Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": { - "modified": "2020-10-15T21:47:04.973Z", - "contributors": [ - "Univream", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": { - "modified": "2020-10-15T21:47:05.070Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": { - "modified": "2020-10-15T21:47:04.948Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": { - "modified": "2020-10-15T21:47:05.220Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": { - "modified": "2020-10-15T21:47:05.094Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": { - "modified": "2020-10-15T21:47:05.304Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": { - "modified": "2020-10-15T21:47:06.918Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": { - "modified": "2020-10-15T21:47:05.889Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": { - "modified": "2020-10-15T21:47:06.130Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": { - "modified": "2020-10-15T21:47:06.080Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": { - "modified": "2020-10-15T21:47:06.022Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": { - "modified": "2020-10-15T21:47:06.573Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": { - "modified": "2020-10-15T21:47:07.408Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": { - "modified": "2020-10-15T21:47:06.396Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-15T21:26:50.406Z", - "contributors": [ - "Coding-Boss", - "pop1989bb", - "1siegi", - "Streamities", - "herbmaier", - "schlagi123", - "tweini", - "mreu", - "JohannesStadler", - "cedisupersoccer", - "xhronos", - "decatur", - "fscholz", - "teoli", - "IchMoritz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { - "modified": "2020-10-15T21:45:49.430Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/UTC": { - "modified": "2020-10-15T21:46:03.247Z", - "contributors": [ - "herbmaier", - "schlagi123", - "jaller94" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getDay": { - "modified": "2020-10-15T21:45:27.743Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { - "modified": "2020-10-15T21:45:26.276Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getHours": { - "modified": "2020-10-15T21:45:25.193Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { - "modified": "2020-10-15T21:45:26.861Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { - "modified": "2020-10-15T21:45:26.279Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { - "modified": "2020-10-15T21:45:28.693Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { - "modified": "2020-10-15T21:45:29.298Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getTime": { - "modified": "2020-10-15T21:45:29.479Z", - "contributors": [ - "schlagi123", - "davidwittenbrink" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { - "modified": "2020-10-15T21:45:28.937Z", - "contributors": [ - "schlagi123", - "douira", - "ozcelebi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { - "modified": "2020-10-15T21:45:20.226Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { - "modified": "2020-10-15T21:45:21.504Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { - "modified": "2020-10-15T21:45:23.446Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { - "modified": "2020-10-15T21:45:19.205Z", - "contributors": [ - "dotperinch", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { - "modified": "2020-10-15T21:45:30.061Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { - "modified": "2020-10-15T21:45:24.536Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { - "modified": "2020-10-15T21:45:18.574Z", - "contributors": [ - "schlagi123", - "Artenuvielle" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { - "modified": "2020-10-15T21:45:22.596Z", - "contributors": [ - "schlagi123", - "HendrikRunte" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getYear": { - "modified": "2020-10-15T21:45:31.158Z", - "contributors": [ - "danieldiekmeier", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/now": { - "modified": "2020-10-15T21:29:19.444Z", - "contributors": [ - "Khazl", - "schlagi123", - "J000S", - "gurix", - "fscholz", - "LOK" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/parse": { - "modified": "2020-10-15T21:30:28.964Z", - "contributors": [ - "BuZZ-T", - "schlagi123", - "PapaBravo", - "GottZ", - "TheSuspiciousWombat", - "MrMartiniMo", - "danieldiekmeier", - "Drasive" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setDate": { - "modified": "2020-10-15T21:45:35.204Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { - "modified": "2020-10-15T21:45:37.723Z", - "contributors": [ - "dritter", - "schlagi123", - "derhofbauer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setHours": { - "modified": "2020-10-15T21:45:35.032Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { - "modified": "2020-10-15T21:45:36.061Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { - "modified": "2020-10-15T21:45:36.748Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { - "modified": "2020-10-15T21:45:38.160Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { - "modified": "2020-10-15T21:45:36.906Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setTime": { - "modified": "2020-10-15T21:33:01.056Z", - "contributors": [ - "schlagi123", - "jhnnslschnr" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { - "modified": "2020-10-15T21:45:41.852Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { - "modified": "2020-10-15T21:45:48.630Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { - "modified": "2020-10-15T21:45:48.619Z", - "contributors": [ - "schlagi123", - "stephtr" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { - "modified": "2020-10-15T21:45:41.573Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { - "modified": "2020-10-15T21:45:41.649Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { - "modified": "2020-10-15T21:45:41.116Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { - "modified": "2020-10-15T21:45:41.484Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/setYear": { - "modified": "2020-10-15T21:45:41.405Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { - "modified": "2020-10-15T21:45:49.664Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": { - "modified": "2020-10-15T21:45:51.459Z", - "contributors": [ - "schlagi123", - "bentzibentz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { - "modified": "2020-10-15T21:45:50.222Z", - "contributors": [ - "NiklasMerz", - "schnellboot", - "botic", - "schlagi123", - "WikiMarc" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { - "modified": "2020-10-15T21:42:32.875Z", - "contributors": [ - "schlagi123", - "Chips100" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { - "modified": "2020-10-15T21:45:58.511Z", - "contributors": [ - "schlagi123", - "gunnarbittersmann" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { - "modified": "2020-10-15T21:45:59.947Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { - "modified": "2020-10-15T21:46:02.185Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T21:45:57.842Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { - "modified": "2020-10-15T21:45:50.302Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { - "modified": "2020-10-15T21:45:55.020Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { - "modified": "2020-10-15T21:45:55.002Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T21:46:20.812Z", - "contributors": [ - "Flur3x", - "nnals", - "schlagi123", - "jens1o", - "shaedrich", - "andreasf", - "AlexanderFradiani" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/Stack": { - "modified": "2020-10-15T21:48:37.021Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": { - "modified": "2020-10-15T21:46:22.573Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/fileName": { - "modified": "2020-10-15T21:46:29.467Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { - "modified": "2020-10-15T21:46:24.762Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/message": { - "modified": "2020-10-15T21:46:22.605Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/name": { - "modified": "2020-10-15T21:46:26.394Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Error/toString": { - "modified": "2020-10-15T21:46:20.003Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T22:01:27.828Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Float32Array": { - "modified": "2020-10-15T22:01:33.350Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Float64Array": { - "modified": "2020-10-15T22:01:34.687Z", - "contributors": [ - "pastparty", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T21:30:33.103Z", - "contributors": [ - "woiddale", - "schlagi123", - "TDesjardins", - "StevenS77", - "Mingun" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2020-10-15T21:47:39.222Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2020-10-15T22:01:34.868Z", - "contributors": [ - "rossler123", - "trollkotze", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/bind": { - "modified": "2020-10-15T21:37:23.019Z", - "contributors": [ - "axelrindle", - "chikovanreuden", - "rendner", - "matz3", - "schlagi123", - "Leitschiff", - "roman.seidelsohn", - "sepastian" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:30:32.549Z", - "contributors": [ - "ffriedl89", - "alexander-heimbuch", - "schlagi123", - "Oekel", - "Abro", - "haryl", - "loki", - "nelf" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/caller": { - "modified": "2020-10-15T22:01:48.453Z", - "contributors": [ - "buschco", - "Obiwahn", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/displayName": { - "modified": "2020-10-15T22:01:52.215Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/length": { - "modified": "2020-10-15T21:34:09.689Z", - "contributors": [ - "schlagi123", - "Eiknheimer", - "timoweiss" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/name": { - "modified": "2020-10-15T21:37:34.115Z", - "contributors": [ - "BoyTheBoy", - "schlagi123", - "Eiknheimer", - "MoritzKn", - "DavidVollmers" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Function/toString": { - "modified": "2020-10-15T22:01:46.451Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2020-10-15T22:01:57.503Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/next": { - "modified": "2020-10-15T22:01:55.076Z", - "contributors": [ - "GarfieldKlon", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/return": { - "modified": "2020-10-15T22:01:56.757Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Generator/throw": { - "modified": "2020-10-15T22:01:58.175Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T22:02:04.667Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-15T21:32:07.008Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Int16Array": { - "modified": "2020-10-15T22:01:32.923Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Int32Array": { - "modified": "2020-10-15T22:01:33.440Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Int8Array": { - "modified": "2020-10-15T22:01:34.152Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2020-10-15T22:02:06.176Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl": { - "modified": "2020-10-15T22:02:07.140Z", - "contributors": [ - "TorstenDittmann", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator": { - "modified": "2020-10-15T22:02:08.820Z", - "contributors": [ - "fscholz", - "schlagi123", - "wbamberg" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare": { - "modified": "2020-10-15T22:02:10.077Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions": { - "modified": "2020-10-15T22:02:19.729Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf": { - "modified": "2020-10-15T22:02:18.509Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { - "modified": "2020-10-15T21:45:59.649Z", - "contributors": [ - "fscholz", - "gunnarbittersmann", - "BuZZ-T", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format": { - "modified": "2020-10-15T22:02:19.143Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts": { - "modified": "2020-10-15T22:02:19.130Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions": { - "modified": "2020-10-15T22:03:23.205Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf": { - "modified": "2020-10-15T22:02:43.009Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { - "modified": "2020-10-15T21:45:21.440Z", - "contributors": [ - "fscholz", - "nw520", - "schlagi123", - "sdeitmer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": { - "modified": "2020-10-15T22:03:25.553Z", - "contributors": [ - "fscholz", - "apfelbox", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf": { - "modified": "2020-10-15T22:02:57.962Z", - "contributors": [ - "fscholz", - "SebastianSpeitel", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": { - "modified": "2020-10-15T22:02:58.225Z", - "contributors": [ - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf": { - "modified": "2020-10-15T22:02:59.909Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": { - "modified": "2020-10-15T22:02:08.681Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T21:34:42.140Z", - "contributors": [ - "schlagi123", - "RewoSiedge", - "Abro", - "markokr" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON/parse": { - "modified": "2020-10-15T21:34:37.174Z", - "contributors": [ - "schlagi123", - "mdnde", - "fscholz", - "ccoenen", - "maxkl", - "dguhl" - ] - }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-10-15T21:38:21.975Z", - "contributors": [ - "duckymirror", - "powerpaul17", - "schlagi123", - "einfallstoll", - "sahin", - "DoctypeRosenthal", - "HighTower79", - "m3t4lukas", - "blub0hr" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T21:32:16.402Z", - "contributors": [ - "schlagi123", - "Artist-sumo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/E": { - "modified": "2020-10-15T21:32:14.403Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LN10": { - "modified": "2020-10-15T21:32:13.398Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LN2": { - "modified": "2020-10-15T21:32:14.601Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { - "modified": "2020-10-15T21:32:15.382Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { - "modified": "2020-10-15T21:32:15.299Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/PI": { - "modified": "2020-10-15T21:32:12.966Z", - "contributors": [ - "intxcc", - "schlagi123", - "JulianBuerger", - "KillerCodeMonkey" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { - "modified": "2020-10-15T21:32:13.657Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { - "modified": "2020-10-15T21:32:13.993Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/acos": { - "modified": "2020-10-15T21:32:14.868Z", - "contributors": [ - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/acosh": { - "modified": "2020-10-15T21:38:20.524Z", - "contributors": [ - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/asin": { - "modified": "2020-10-15T21:38:20.385Z", - "contributors": [ - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/asinh": { - "modified": "2020-10-15T21:38:17.929Z", - "contributors": [ - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/atan": { - "modified": "2020-10-15T21:38:19.032Z", - "contributors": [ - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/atan2": { - "modified": "2020-10-15T21:38:18.649Z", - "contributors": [ - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { - "modified": "2020-10-15T21:38:16.861Z", - "contributors": [ - "itsdevdom", - "schlagi123", - "hictox" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2020-10-15T21:32:47.773Z", - "contributors": [ - "scor-ch", - "schlagi123", - "LuiSlacker", - "hictox", - "hanswer01" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/clz32": { - "modified": "2020-10-15T21:45:08.913Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/cos": { - "modified": "2020-10-15T21:45:11.097Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/cosh": { - "modified": "2020-10-15T21:45:13.156Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/exp": { - "modified": "2020-10-15T21:45:11.971Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/expm1": { - "modified": "2020-10-15T21:45:13.158Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/floor": { - "modified": "2020-10-15T21:40:05.734Z", - "contributors": [ - "schlagi123", - "mcmunder", - "flottokarotto" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/fround": { - "modified": "2020-10-15T21:45:14.992Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/hypot": { - "modified": "2020-10-15T21:45:16.601Z", - "contributors": [ - "gunnarbittersmann", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/imul": { - "modified": "2020-10-15T21:45:04.964Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log": { - "modified": "2020-10-23T10:19:29.166Z", - "contributors": [ - "sttzr", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log10": { - "modified": "2020-10-15T21:45:15.451Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log1p": { - "modified": "2020-10-15T21:45:15.457Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/log2": { - "modified": "2020-10-15T21:45:15.290Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/max": { - "modified": "2020-10-15T21:37:55.703Z", - "contributors": [ - "tzimmermann", - "schlagi123", - "screeny05", - "Elytherion", - "ptitmouton" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/min": { - "modified": "2020-10-15T21:33:32.757Z", - "contributors": [ - "Stnieder", - "schlagi123", - "cedrichaase", - "SSchnitzler" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/pow": { - "modified": "2020-10-15T21:39:55.052Z", - "contributors": [ - "schlagi123", - "alice-wl" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/random": { - "modified": "2020-10-15T21:36:41.048Z", - "contributors": [ - "grumpy-cat", - "schlagi123", - "cami", - "serv-inc", - "Dargmuesli" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/round": { - "modified": "2020-10-15T21:34:19.737Z", - "contributors": [ - "aserraric", - "schlagi123", - "RefToDev", - "Krayzeee92", - "DanMyshkin", - "michaelkoehne" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T21:45:13.058Z", - "contributors": [ - "schlagi123", - "cedrichaase" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sin": { - "modified": "2020-10-15T21:45:12.206Z", - "contributors": [ - "ModellbahnFreak", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sinh": { - "modified": "2020-10-15T21:45:14.822Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { - "modified": "2020-10-15T21:45:14.468Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/tan": { - "modified": "2020-10-15T21:45:14.142Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/tanh": { - "modified": "2020-10-15T21:45:13.983Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/trunc": { - "modified": "2020-10-15T21:45:15.988Z", - "contributors": [ - "4typen", - "schlagi123", - "giffeler" - ] - }, - "Web/JavaScript/Reference/Global_Objects/NaN": { - "modified": "2020-10-15T21:24:05.253Z", - "contributors": [ - "schlagi123", - "boppy", - "SphinxKnight", - "fscholz", - "Jens_Verneuer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:26:52.848Z", - "contributors": [ - "schlagi123", - "mreu", - "StevenS77", - "mrcktz", - "fscholz", - "AngelSankturio" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { - "modified": "2020-10-15T21:26:52.886Z", - "contributors": [ - "mitch3ls", - "schlagi123", - "Steditor", - "Tilli81", - "fscholz", - "AngelSankturio" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { - "modified": "2020-10-15T21:45:17.017Z", - "contributors": [ - "EpsilonBoo", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2020-10-15T21:45:17.604Z", - "contributors": [ - "schlagi123", - "Fuzzyma" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { - "modified": "2020-10-15T21:45:17.586Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2020-10-30T06:50:59.921Z", - "contributors": [ - "thefabicraft-github", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2020-10-15T21:32:05.912Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2020-10-15T21:31:59.627Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { - "modified": "2020-10-15T21:32:00.956Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2020-10-15T21:32:05.695Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2020-10-15T21:45:17.315Z", - "contributors": [ - "schlagi123", - "MauriceAyasse" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2020-10-15T21:32:02.637Z", - "contributors": [ - "schlagi123", - "mazilema", - "renemaas" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { - "modified": "2020-10-15T21:45:20.941Z", - "contributors": [ - "Frdnspnzr", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { - "modified": "2020-10-15T21:45:17.199Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { - "modified": "2020-10-15T21:45:18.357Z", - "contributors": [ - "schlagi123", - "daugsbi", - "DennisAhaus" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { - "modified": "2020-10-15T21:45:19.048Z", - "contributors": [ - "joebau0815", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { - "modified": "2020-10-15T21:45:19.906Z", - "contributors": [ - "gunnarbittersmann", - "schlagi123", - "mack3457", - "mzur", - "phax" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { - "modified": "2020-10-15T21:45:20.416Z", - "contributors": [ - "Hanmac", - "schlagi123", - "mreu", - "sdeitmer", - "PierreCorell" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { - "modified": "2020-10-15T21:45:20.364Z", - "contributors": [ - "schlagi123", - "phax" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2020-10-15T21:45:18.952Z", - "contributors": [ - "schlagi123", - "giffeler" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { - "modified": "2020-10-15T21:45:19.158Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:21:51.304Z", - "contributors": [ - "bobbor", - "wbamberg", - "fscholz", - "mholland1337" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-10-15T21:46:53.703Z", - "contributors": [ - "Stefie", - "schlagi123", - "Yogu", - "henrymoews", - "KuhnEDV" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/constructor": { - "modified": "2019-03-23T23:24:06.881Z", - "contributors": [ - "Olli64", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/create": { - "modified": "2019-03-23T23:03:06.202Z", - "contributors": [ - "arothweiler", - "peter30mar2017", - "fmsy", - "BurnerPat", - "Hendrikto" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:19:15.987Z", - "contributors": [ - "franca" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T21:33:52.609Z", - "contributors": [ - "SebinNyshkim", - "christophfriedrich", - "asilberschneider", - "clemenshelm", - "schlagi123", - "sbusch", - "in0x" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { - "modified": "2019-03-23T22:20:00.098Z", - "contributors": [ - "janbiasi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2019-03-23T22:16:28.123Z", - "contributors": [ - "StevenS77", - "klausbx" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2019-03-23T22:50:54.746Z", - "contributors": [ - "bambebituna", - "ilkercat", - "schlagi123", - "juicyarts" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/is": { - "modified": "2020-10-15T21:25:28.677Z", - "contributors": [ - "rioderelfte", - "SphinxKnight", - "kdex", - "level420", - "giffeler", - "StevenS77", - "fscholz", - "Airblader" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { - "modified": "2019-03-23T22:15:34.012Z", - "contributors": [ - "dthdyver" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { - "modified": "2020-10-15T22:20:16.815Z", - "contributors": [ - "bobbor" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/keys": { - "modified": "2019-03-23T23:05:44.528Z", - "contributors": [ - "p2k", - "kdex", - "schlagi123", - "cepharum", - "Bavragor" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/proto": { - "modified": "2019-04-16T09:05:23.152Z", - "contributors": [ - "barcmoehm", - "StevenS77" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/toString": { - "modified": "2019-03-23T22:08:15.191Z", - "contributors": [ - "teoli", - "Christian2507" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { - "modified": "2020-10-15T22:05:39.564Z", - "contributors": [ - "paulkoegel", - "dennissterzenbach" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2019-03-18T20:58:26.548Z", - "contributors": [ - "filmor", - "rhoio", - "andresattler" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-09-11T07:37:54.436Z", - "contributors": [ - "sebenns", - "semmelbroesl", - "Dschubba", - "mrmoree", - "CorvusRohan", - "jnnkm", - "SphinxKnight", - "0xflotus", - "HendrikRunte", - "1blankz7" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T21:33:48.453Z", - "contributors": [ - "Dschubba", - "anniekao", - "SphinxKnight", - "kdex", - "davidrockt", - "Sharian" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/finally": { - "modified": "2020-10-15T22:05:15.072Z", - "contributors": [ - "tminich", - "wasabiNorman" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/race": { - "modified": "2020-10-15T22:04:13.810Z", - "contributors": [ - "pkimmlinger", - "cepharum", - "DaAitch" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/reject": { - "modified": "2020-10-15T21:53:18.040Z", - "contributors": [ - "ManuelKiessling", - "marco-a", - "modev" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Promise/then": { - "modified": "2019-03-23T22:48:57.241Z", - "contributors": [ - "dbraun", - "SphinxKnight", - "kdex", - "DanielMSchmidt", - "florianb" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2020-10-15T22:13:20.309Z", - "contributors": [ - "Tjerk-Haaye-Henricus" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { - "modified": "2020-10-15T22:13:35.547Z", - "contributors": [ - "Tjerk-Haaye-Henricus" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { - "modified": "2020-10-15T22:13:50.733Z", - "contributors": [ - "Tjerk-Haaye-Henricus" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-08-17T16:16:42.469Z", - "contributors": [ - "MoPaMo", - "ModProg", - "D3rT1m", - "wbamberg", - "rmcproductions", - "Wiimm", - "doeck", - "StevenS77", - "Abro", - "Simmarith", - "fscholz", - "powerswitch", - "def00111", - "clone", - "lightspirit" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp/flags": { - "modified": "2020-10-15T22:08:09.837Z", - "contributors": [ - "vortami" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp/input": { - "modified": "2019-03-23T22:37:59.302Z", - "contributors": [ - "teoli", - "RewoSiedge", - "jumpball" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RegExp/test": { - "modified": "2020-10-15T22:29:51.696Z", - "contributors": [ - "MrFootwork", - "jan.kaiser1952" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Set": { - "modified": "2020-11-14T21:15:03.891Z", - "contributors": [ - "ottahe", - "MichaelGellings", - "cami", - "AndyLnd", - "mdnde2", - "Flonk", - "schlagi123", - "sspringer82" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Set/add": { - "modified": "2020-11-14T20:25:16.685Z", - "contributors": [ - "ottahe" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Set/delete": { - "modified": "2020-11-14T20:17:34.638Z", - "contributors": [ - "ottahe" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Set/has": { - "modified": "2019-03-23T22:10:20.086Z", - "contributors": [ - "mdnde2", - "psychotammi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:30:10.579Z", - "contributors": [ - "kdex", - "Anonymous", - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2020-10-15T21:34:43.401Z", - "contributors": [ - "schlagi123", - "janpawellek", - "Codebryo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/charAt": { - "modified": "2019-05-13T20:26:27.144Z", - "contributors": [ - "Huegelkoenig", - "PascalAOMS" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/concat": { - "modified": "2019-03-23T22:36:31.275Z", - "contributors": [ - "schlagi123", - "Saschlong" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/endsWith": { - "modified": "2019-03-23T22:28:08.246Z", - "contributors": [ - "THX138" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { - "modified": "2019-03-23T22:22:43.486Z", - "contributors": [ - "NielsNet", - "Huargh" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/includes": { - "modified": "2020-10-15T21:49:46.614Z", - "contributors": [ - "vssn", - "kdex", - "PascalAOMS" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2019-03-23T23:04:28.715Z", - "contributors": [ - "JohannesKuehnel", - "schlagi123", - "sroe", - "pascalhofmann", - "c4re" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { - "modified": "2019-03-23T22:56:44.027Z", - "contributors": [ - "BenB", - "Chips100", - "flottokarotto" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2020-10-15T21:34:41.966Z", - "contributors": [ - "Stuhl", - "schlagi123", - "labcode-de", - "flottokarotto" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/match": { - "modified": "2020-10-15T21:54:33.157Z", - "contributors": [ - "alberts+", - "d4rkne55", - "Tosch110", - "afoeder", - "tobiasherber" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/raw": { - "modified": "2019-03-23T22:34:12.947Z", - "contributors": [ - "kdex", - "bfncs", - "schlagi123", - "cnu301" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2020-10-15T22:06:26.477Z", - "contributors": [ - "AlexWayhill" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/replace": { - "modified": "2019-11-20T12:28:26.785Z", - "contributors": [ - "fools-mate", - "danieldiekmeier", - "kkoop", - "HdHeiniDev", - "giffeler", - "TobiGe", - "fancyFranci", - "schlagi123", - "Saschlong", - "mower", - "tspaeth", - "fscholz", - "powerswitch" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/search": { - "modified": "2020-10-15T22:11:40.635Z", - "contributors": [ - "tobipch", - "blackjack4494", - "Cr4zyG4m3rLP" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/slice": { - "modified": "2019-03-23T22:18:04.121Z", - "contributors": [ - "napengam", - "didierCH", - "jay-bricksoft" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/split": { - "modified": "2020-10-15T21:34:44.394Z", - "contributors": [ - "SebinNyshkim", - "Ruupatt", - "shaedrich", - "virtusmaior", - "josephinepanda" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/startsWith": { - "modified": "2019-09-27T21:50:55.652Z", - "contributors": [ - "daluege", - "MWojt", - "kdex", - "Aaric", - "schlagi123", - "christ2go" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/substr": { - "modified": "2019-03-26T09:57:55.345Z", - "contributors": [ - "F4k3rzZ", - "schlagi123", - "jazzpi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2019-05-22T10:50:37.923Z", - "contributors": [ - "DragonPerl", - "thebigbla", - "KillerCodeMonkey" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { - "modified": "2020-10-15T21:37:54.853Z", - "contributors": [ - "schlagi123", - "Chips100" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { - "modified": "2019-03-23T22:31:03.601Z", - "contributors": [ - "nextlevelshit", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/trimEnd": { - "modified": "2020-10-15T21:47:40.889Z", - "contributors": [ - "teoli", - "schlagi123", - "Zertrax" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/trimStart": { - "modified": "2020-10-15T21:48:35.629Z", - "contributors": [ - "teoli", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Symbol": { - "modified": "2019-03-23T22:34:59.987Z", - "contributors": [ - "schwemmer", - "wirmar" - ] - }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:46:23.938Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T21:51:09.089Z", - "contributors": [ - "schlagi123", - "Sheggy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly": { - "modified": "2020-10-15T22:14:29.365Z", - "contributors": [ - "vssn" - ] - }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { - "modified": "2020-10-15T22:14:53.372Z", - "contributors": [ - "vssn" - ] - }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { - "modified": "2020-10-15T22:15:11.252Z", - "contributors": [ - "vssn" - ] - }, - "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { - "modified": "2020-03-12T19:44:41.805Z", - "contributors": [ - "Saerdn" - ] - }, - "Web/JavaScript/Reference/Global_Objects/encodeURI": { - "modified": "2020-03-12T19:46:14.428Z", - "contributors": [ - "eras0r", - "knurzl" - ] - }, - "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { - "modified": "2020-03-12T19:42:09.480Z", - "contributors": [ - "giffeler", - "kaenganxt", - "dbohn", - "ViciousPecan" - ] - }, - "Web/JavaScript/Reference/Global_Objects/escape": { - "modified": "2020-03-12T19:44:36.899Z", - "contributors": [ - "gappeh" - ] - }, - "Web/JavaScript/Reference/Global_Objects/globalThis": { - "modified": "2020-10-15T22:34:14.804Z", - "contributors": [ - "vssn" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-10-15T21:32:05.093Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T21:32:07.461Z", - "contributors": [ - "Steditor", - "schlagi123", - "SerkanSipahi", - "mazilema", - "zf2timo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/parseFloat": { - "modified": "2020-10-15T21:34:09.121Z", - "contributors": [ - "hellerim", - "schlagi123", - "bsotodo", - "crood" - ] - }, - "Web/JavaScript/Reference/Global_Objects/parseInt": { - "modified": "2020-10-15T21:45:22.117Z", - "contributors": [ - "schlagi123", - "giffeler", - "macahi", - "mazilema" - ] - }, - "Web/JavaScript/Reference/Global_Objects/undefined": { - "modified": "2020-10-15T21:32:16.777Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/unescape": { - "modified": "2020-03-12T19:41:42.907Z", - "contributors": [ - "thusslack" - ] - }, - "Web/JavaScript/Reference/Iteration_protocols": { - "modified": "2020-03-12T19:47:50.502Z", - "contributors": [ - "P215W", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T22:03:30.555Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T21:31:28.975Z", - "contributors": [ - "schlagi123", - "fscholz", - "loki" - ] - }, - "Web/JavaScript/Reference/Operators/Addition": { - "modified": "2020-10-15T22:34:37.156Z", - "contributors": [ - "cs.schueler" - ] - }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-10-15T21:59:30.294Z", - "contributors": [ - "schlagi123", - "vssn" - ] - }, - "Web/JavaScript/Reference/Operators/Conditional_Operator": { - "modified": "2020-10-15T21:41:29.204Z", - "contributors": [ - "Coding-Boss", - "nopeJS", - "Binnox", - "schlagi123", - "JWPapi", - "chauthai", - "terrluhr" - ] - }, - "Web/JavaScript/Reference/Operators/Decrement": { - "modified": "2020-10-15T22:34:53.783Z", - "contributors": [ - "Klingohle" - ] - }, - "Web/JavaScript/Reference/Operators/Destructuring_assignment": { - "modified": "2020-10-15T21:41:28.452Z", - "contributors": [ - "manner", - "ldtr89", - "Aoke87", - "apguru", - "schlagi123", - "himynameissteve", - "kdex", - "yampus", - "chaoran-chen", - "Alexa", - "sbusch" - ] - }, - "Web/JavaScript/Reference/Operators/Grouping": { - "modified": "2020-10-15T22:05:46.615Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators/Increment": { - "modified": "2020-10-15T22:34:54.059Z", - "contributors": [ - "Klingohle" - ] - }, - "Web/JavaScript/Reference/Operators/Object_initializer": { - "modified": "2020-10-15T21:32:25.926Z", - "contributors": [ - "Callirius", - "fmeyertoens", - "schlagi123", - "JohannesDienst", - "nnmrts", - "kdex", - "siggi-heltau" - ] - }, - "Web/JavaScript/Reference/Operators/Operator_Precedence": { - "modified": "2020-03-12T19:43:04.570Z", - "contributors": [ - "oliver-gramberg", - "Heronils", - "schlagi123", - "Karpfador", - "dcodeIO", - "LK-Reichl-F", - "wLikeFish" - ] - }, - "Web/JavaScript/Reference/Operators/Optional_chaining": { - "modified": "2020-10-15T22:26:51.885Z", - "contributors": [ - "TorbenKoehn" - ] - }, - "Web/JavaScript/Reference/Operators/Property_Accessors": { - "modified": "2020-10-15T21:55:35.876Z", - "contributors": [ - "schlagi123", - "timosperisen" - ] - }, - "Web/JavaScript/Reference/Operators/Remainder": { - "modified": "2020-10-15T22:34:54.665Z", - "contributors": [ - "Klingohle" - ] - }, - "Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-10-15T22:05:09.977Z", - "contributors": [ - "mischah", - "shaedrich", - "schlagi123", - "mschleeweiss" - ] - }, - "Web/JavaScript/Reference/Operators/async_function": { - "modified": "2020-10-15T22:05:47.683Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators/await": { - "modified": "2020-10-15T22:05:59.887Z", - "contributors": [ - "joebau0815", - "saschbro", - "chrkhl", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators/class": { - "modified": "2020-03-12T19:42:53.976Z", - "contributors": [ - "kdex", - "Eiknheimer", - "schlagi123", - "terrluhr" - ] - }, - "Web/JavaScript/Reference/Operators/delete": { - "modified": "2020-10-15T21:38:04.252Z", - "contributors": [ - "kowarschick", - "schlagi123", - "pascaliske", - "enexusde", - "CaptainStone", - "olhaar" - ] - }, - "Web/JavaScript/Reference/Operators/function": { - "modified": "2020-10-15T21:56:30.909Z", - "contributors": [ - "m5yu", - "jakobpack", - "schlagi123", - "christianrhansen", - "vssn", - "amelzer" - ] - }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T22:05:42.272Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators/in": { - "modified": "2020-10-15T21:39:06.431Z", - "contributors": [ - "mfranzke", - "schlagi123", - "kdex", - "xergon" - ] - }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-10-15T21:39:26.955Z", - "contributors": [ - "schlagi123", - "HolgerJeromin", - "flipace", - "weedukind" - ] - }, - "Web/JavaScript/Reference/Operators/new": { - "modified": "2020-10-15T21:38:03.135Z", - "contributors": [ - "FelixSab", - "schlagi123", - "Maugo", - "michiruckstuhl", - "danbru1211" - ] - }, - "Web/JavaScript/Reference/Operators/new.target": { - "modified": "2020-10-15T22:05:44.821Z", - "contributors": [ - "hporten", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators/null": { - "modified": "2020-10-15T21:32:16.691Z", - "contributors": [ - "schlagi123", - "HolgerJeromin", - "cuatro" - ] - }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-10-15T21:47:20.372Z", - "contributors": [ - "schlagi123", - "kdex", - "Skycro" - ] - }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-10-15T21:46:51.232Z", - "contributors": [ - "KratosAurion", - "schlagi123", - "kelthuzad", - "eluchsinger" - ] - }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-11-06T10:38:36.219Z", - "contributors": [ - "mschleeweiss", - "schlagi123", - "dmarku" - ] - }, - "Web/JavaScript/Reference/Operators/void": { - "modified": "2020-10-15T21:34:41.746Z", - "contributors": [ - "schlagi123", - "amelzer", - "JohannesDienst" - ] - }, - "Web/JavaScript/Reference/Operators/yield": { - "modified": "2020-10-15T22:05:44.303Z", - "contributors": [ - "kevinfoerster", - "ionxenia", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Operators/yield*": { - "modified": "2020-10-15T22:05:43.798Z", - "contributors": [ - "jborsch", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-10-15T21:30:44.678Z", - "contributors": [ - "Galajda", - "schlagi123", - "JorisGutjahr", - "fscholz", - "SphinxKnight", - "timbernasley" - ] - }, - "Web/JavaScript/Reference/Statements/Empty": { - "modified": "2020-03-12T19:43:34.145Z", - "contributors": [ - "KuhnEDV" - ] - }, - "Web/JavaScript/Reference/Statements/async_function": { - "modified": "2020-10-15T22:13:51.356Z", - "contributors": [ - "Dodo-the-Coder", - "vssn", - "Galajda" - ] - }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-10-15T21:32:12.580Z", - "contributors": [ - "zuzuzu", - "yampus", - "mdschweda", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-03-12T19:40:27.998Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Statements/class": { - "modified": "2020-03-12T19:43:47.910Z", - "contributors": [ - "kdex", - "Idrinth", - "schlagi123", - "eluchsinger" - ] - }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-10-15T21:32:07.805Z", - "contributors": [ - "zuzuzu", - "evayde", - "timlg07", - "SphinxKnight", - "kdex", - "marcelglaeser", - "andreashofer123", - "fscholz", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Statements/continue": { - "modified": "2020-10-15T21:45:50.193Z", - "contributors": [ - "schlagi123", - "KuhnEDV" - ] - }, - "Web/JavaScript/Reference/Statements/debugger": { - "modified": "2020-10-15T22:30:09.075Z", - "contributors": [ - "zuzuzu" - ] - }, - "Web/JavaScript/Reference/Statements/do...while": { - "modified": "2020-03-12T19:42:19.798Z", - "contributors": [ - "schlagi123", - "jumpball" - ] - }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-10-15T21:41:31.690Z", - "contributors": [ - "hoelzlmanuel", - "wheelmaker24", - "xchange11", - "schlagi123", - "Snapstromegon", - "thomaskempel", - "yampus", - "rroehrig", - "tuffi111", - "sbusch" - ] - }, - "Web/JavaScript/Reference/Statements/for": { - "modified": "2020-03-12T19:42:06.001Z", - "contributors": [ - "schlagi123", - "Elyasin" - ] - }, - "Web/JavaScript/Reference/Statements/for...in": { - "modified": "2020-05-27T10:00:58.351Z", - "contributors": [ - "zuzuzu", - "baasti", - "koedev", - "Vitroxyn", - "schlagi123", - "KuhnEDV", - "JohannesDienst", - "fscholz", - "lupo72" - ] - }, - "Web/JavaScript/Reference/Statements/for...of": { - "modified": "2020-03-12T19:41:38.990Z", - "contributors": [ - "pastparty", - "Xan2063", - "SphinxKnight", - "kdex", - "Narigo" - ] - }, - "Web/JavaScript/Reference/Statements/function": { - "modified": "2020-03-12T19:42:16.537Z", - "contributors": [ - "yampus", - "trillerpfeife", - "neverendingo" - ] - }, - "Web/JavaScript/Reference/Statements/function*": { - "modified": "2020-10-15T21:45:47.005Z", - "contributors": [ - "oliver-gramberg", - "arothweiler", - "schlagi123", - "xstable", - "yampus", - "kdex", - "KuhnEDV" - ] - }, - "Web/JavaScript/Reference/Statements/if...else": { - "modified": "2020-10-15T21:32:18.484Z", - "contributors": [ - "schlagi123", - "yampus" - ] - }, - "Web/JavaScript/Reference/Statements/import": { - "modified": "2020-10-15T21:39:21.688Z", - "contributors": [ - "fmeyertoens", - "kdex", - "Snapstromegon", - "Kani1013", - "michaelze", - "yampus", - "yannick_versley", - "BennyAlex", - "Marzelpan", - "schlagi123", - "Breaker222", - "Simmarith", - "matbad" - ] - }, - "Web/JavaScript/Reference/Statements/label": { - "modified": "2020-03-12T19:43:50.191Z", - "contributors": [ - "schlagi123", - "eluchsinger" - ] - }, - "Web/JavaScript/Reference/Statements/let": { - "modified": "2020-03-12T19:40:29.227Z", - "contributors": [ - "evayde", - "rs-github", - "cami", - "Flonk", - "kdex", - "sigoa", - "TheFaithfulCritic", - "FliegenKLATSCH", - "gtmn", - "rimace", - "schlagi123", - "AndreeWille", - "th-we", - "chk1", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-03-12T19:44:07.700Z", - "contributors": [ - "christophfriedrich", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-03-12T19:41:30.012Z", - "contributors": [ - "schlagi123", - "Elyasin" - ] - }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-03-12T19:43:13.297Z", - "contributors": [ - "StanE" - ] - }, - "Web/JavaScript/Reference/Statements/try...catch": { - "modified": "2020-03-12T19:45:01.106Z", - "contributors": [ - "SpikePy", - "timomeh", - "stepdate" - ] - }, - "Web/JavaScript/Reference/Statements/var": { - "modified": "2020-03-12T19:40:22.049Z", - "contributors": [ - "rs-github", - "trillerpfeife", - "Epiglottis", - "schlagi123", - "rkoch", - "th-we", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-10-15T21:37:40.413Z", - "contributors": [ - "dmho", - "schlagi123", - "Jintzo", - "Elyasin" - ] - }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-05-27T12:41:43.793Z", - "contributors": [ - "zuzuzu", - "SebinNyshkim", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Template_literals": { - "modified": "2020-10-15T21:38:21.925Z", - "contributors": [ - "zuzuzu", - "sandrosc", - "antstei", - "FelixSchwarzmeier", - "Editmonkey", - "SphinxKnight", - "0815fox", - "chrillek", - "22samuelk", - "stehefan" - ] - }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-03-12T19:40:57.461Z", - "contributors": [ - "flying-sheep", - "ksm2", - "Adowrath", - "schlagi123", - "sspringer82", - "fscholz", - "rogerraetzel" - ] - }, - "Web/Manifest": { - "modified": "2020-08-31T08:04:51.977Z", - "contributors": [ - "Zyndoras", - "gpion", - "SphinxKnight", - "tomknig", - "Lanseuo", - "lionralfs", - "hrjhn", - "McSodbrenner", - "fscholz", - "mojoaxel", - "tempelgogo", - "yzanomi" - ] - }, - "Web/MathML": { - "modified": "2019-03-23T22:48:05.789Z", - "contributors": [ - "Draussenduscher", - "jumpball" - ] - }, - "Web/MathML/Attribute": { - "modified": "2020-12-10T08:16:36.851Z", - "contributors": [ - "Borgitowner", - "Draussenduscher" - ] - }, - "Web/MathML/Attribute/Values": { - "modified": "2019-03-18T21:17:29.433Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element": { - "modified": "2019-03-23T22:41:28.276Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/maction": { - "modified": "2019-03-23T22:35:35.054Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/math": { - "modified": "2019-03-18T21:15:50.121Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/menclose": { - "modified": "2019-03-23T22:35:37.131Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/merror": { - "modified": "2019-03-23T22:35:42.535Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mfenced": { - "modified": "2019-03-23T22:35:44.635Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mfrac": { - "modified": "2019-03-23T22:39:13.573Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mi": { - "modified": "2019-03-23T22:39:56.494Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mn": { - "modified": "2019-03-23T22:40:17.694Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mo": { - "modified": "2019-03-23T22:40:19.804Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mover": { - "modified": "2019-03-23T22:35:41.970Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mpadded": { - "modified": "2019-03-23T22:35:41.097Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mphantom": { - "modified": "2019-03-23T22:35:42.968Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mroot": { - "modified": "2019-03-23T22:40:25.676Z", - "contributors": [ - "Draussenduscher", - "jumpball" - ] - }, - "Web/MathML/Element/mrow": { - "modified": "2019-03-23T22:40:55.520Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/ms": { - "modified": "2019-03-23T22:35:40.687Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mspace": { - "modified": "2019-03-23T22:35:41.572Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/msqrt": { - "modified": "2019-03-23T22:40:04.280Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mstyle": { - "modified": "2020-10-15T21:41:26.425Z", - "contributors": [ - "bershanskiy", - "Draussenduscher" - ] - }, - "Web/MathML/Element/msub": { - "modified": "2019-03-18T21:15:46.910Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/msubsup": { - "modified": "2019-03-23T22:35:33.789Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/msup": { - "modified": "2019-03-23T22:35:34.021Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mtable": { - "modified": "2019-03-23T22:35:58.744Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mtd": { - "modified": "2019-03-23T22:36:01.471Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mtext": { - "modified": "2019-03-23T22:35:39.496Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/mtr": { - "modified": "2019-03-23T22:36:03.515Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/munder": { - "modified": "2019-03-23T22:35:33.540Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Element/munderover": { - "modified": "2019-03-23T22:35:34.263Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Examples": { - "modified": "2019-03-23T22:41:30.288Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Examples/Deriving_the_Quadratic_Formula": { - "modified": "2019-03-23T22:41:16.866Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/MathML/Examples/MathML_Pythagorean_Theorem": { - "modified": "2019-03-18T21:15:50.621Z", - "contributors": [ - "Draussenduscher" - ] - }, - "Web/OpenSearch": { - "modified": "2019-03-24T00:04:54.552Z", - "contributors": [ - "fscholz", - "Lexhawkins" - ] - }, - "Web/Performance": { - "modified": "2020-05-22T10:23:33.706Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/Performance/dns-prefetch": { - "modified": "2020-05-22T10:23:34.773Z", - "contributors": [ - "chryxf" - ] - }, - "Web/Progressive_web_apps": { - "modified": "2019-08-19T03:49:08.791Z", - "contributors": [ - "fschaupp", - "chrisdavidmills", - "friedger" - ] - }, - "Web/SVG": { - "modified": "2019-03-24T00:13:09.048Z", - "contributors": [ - "teoli", - "ethertank", - "DavidWalsh", - "nicolasmn", - "fscholz", - "Mickiboy", - "-=Renegade=-", - "Ak120" - ] - }, - "Web/SVG/Attribute": { - "modified": "2019-03-23T22:14:31.297Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/SVG/Attribute/class": { - "modified": "2019-03-23T22:11:26.719Z", - "contributors": [ - "grobmeier" - ] - }, - "Web/SVG/Attribute/preserveAspectRatio": { - "modified": "2019-09-30T23:24:10.073Z", - "contributors": [ - "JackLeEmmerdeur", - "jbvsusj" - ] - }, - "Web/SVG/Element": { - "modified": "2019-03-23T23:33:28.131Z", - "contributors": [ - "Sebastianz", - "teoli", - "ethertank" - ] - }, - "Web/SVG/Element/animate": { - "modified": "2020-10-15T21:26:19.629Z", - "contributors": [ - "Dschubba", - "Sebastianz", - "fscholz", - "teoli", - "martin_ti" - ] - }, - "Web/SVG/Element/circle": { - "modified": "2019-03-23T23:02:17.743Z", - "contributors": [ - "wbamberg", - "Sebastianz", - "Oliver_Schafeld", - "ppk42" - ] - }, - "Web/SVG/Element/foreignObject": { - "modified": "2019-03-23T23:21:17.052Z", - "contributors": [ - "Sebastianz", - "gluecksmelodie", - "teoli", - "powerswitch" - ] - }, - "Web/SVG/Element/path": { - "modified": "2020-10-15T22:17:06.133Z", - "contributors": [ - "MyLittlePenguin" - ] - }, - "Web/SVG/Element/polygon": { - "modified": "2019-03-23T22:09:13.846Z", - "contributors": [ - "Peremptor" - ] - }, - "Web/SVG/Element/rect": { - "modified": "2019-03-18T21:41:17.238Z", - "contributors": [ - "philSixZero" - ] - }, - "Web/SVG/Element/svg": { - "modified": "2020-10-15T21:43:06.785Z", - "contributors": [ - "Volker-E", - "Dschubba", - "mattenmad" - ] - }, - "Web/SVG/Element/textPath": { - "modified": "2019-03-23T22:46:20.244Z", - "contributors": [ - "Sebastianz", - "modellking" - ] - }, - "Web/SVG/Element/view": { - "modified": "2019-03-18T21:15:30.402Z", - "contributors": [ - "Crucion" - ] - }, - "Web/SVG/Namespaces_Crash_Course": { - "modified": "2019-03-23T22:26:27.398Z", - "contributors": [ - "bgueth", - "Oliver_Schafeld" - ] - }, - "Web/SVG/Tutorial": { - "modified": "2019-01-16T14:32:30.945Z", - "contributors": [ - "teoli", - "fscholz", - "Mickiboy" - ] - }, - "Web/SVG/Tutorial/Fills_and_Strokes": { - "modified": "2019-03-23T22:15:38.417Z", - "contributors": [ - "kevinfoerster", - "sebastianbarfurth" - ] - }, - "Web/SVG/Tutorial/Introduction": { - "modified": "2019-01-16T14:32:58.426Z", - "contributors": [ - "teoli", - "fscholz", - "Mickiboy" - ] - }, - "Web/SVG/Tutorial/Paths": { - "modified": "2019-11-01T07:41:48.434Z", - "contributors": [ - "michelgotta", - "ringostarr80", - "Wombosvideo" - ] - }, - "Web/SVG/Tutorial/SVG_Image_Tag": { - "modified": "2019-04-14T13:23:03.557Z", - "contributors": [ - "Heupferdchenritter", - "RmnWtnkmp" - ] - }, - "Web/SVG/Tutorial/SVG_fonts": { - "modified": "2019-04-14T13:08:23.758Z", - "contributors": [ - "Heupferdchenritter" - ] - }, - "Web/SVG/Tutorial/Tools_for_SVG": { - "modified": "2019-04-14T13:43:24.617Z", - "contributors": [ - "Heupferdchenritter" - ] - }, - "Web/Security": { - "modified": "2019-09-10T16:31:42.422Z", - "contributors": [ - "SphinxKnight", - "Dschubba", - "marumari" - ] - }, - "Web/Security/Certificate_Transparency": { - "modified": "2020-05-12T09:08:53.446Z", - "contributors": [ - "dennissterzenbach" - ] - }, - "Web/Web_Components": { - "modified": "2019-03-18T20:58:34.307Z", - "contributors": [ - "SetTrend", - "vssn", - "pkos98", - "dreitzner", - "DomenicDenicola" - ] - }, - "Web/Web_Components/Using_custom_elements": { - "modified": "2020-03-12T05:58:55.117Z", - "contributors": [ - "napengam", - "stekoe", - "hermann77", - "Maik", - "td8" - ] - }, - "Web/XML": { - "modified": "2019-03-24T00:03:04.279Z", - "contributors": [ - "ExE-Boss" - ] - }, - "Web/XML/XML_introduction": { - "modified": "2019-05-01T21:51:49.890Z", - "contributors": [ - "ExE-Boss", - "fscholz", - "XxPlay9xX", - "Mowtrains", - "Maxemil", - "Tammo", - "M@d Man" - ] - }, - "Web/XSLT": { - "modified": "2019-03-24T00:03:43.722Z", - "contributors": [ - "ExE-Boss", - "ysi", - "fscholz", - "Joda" - ] - }, - "conflicting/Glossary/Doctype": { - "modified": "2019-07-04T23:44:01.071Z", - "contributors": [ - "PercyGitarrist" - ] - }, - "conflicting/Learn/CSS/Building_blocks/Values_and_units": { - "modified": "2019-03-23T23:08:03.393Z", - "contributors": [ - "spiegelp", - "thkoch" - ] - }, - "conflicting/Learn/CSS/First_steps": { - "modified": "2019-03-24T00:05:49.642Z", - "contributors": [ - "teoli", - "fscholz", - "DavidWalsh" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works": { - "modified": "2019-03-23T22:57:29.159Z", - "contributors": [ - "fhwfzfge", - "Palmstroem" - ] - }, - "conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400": { - "modified": "2019-03-23T22:57:04.436Z", - "contributors": [ - "Palmstroem" - ] - }, - "conflicting/Learn/JavaScript/Objects": { - "modified": "2020-03-12T19:39:48.552Z", - "contributors": [ - "ant1d0t", - "nemo182", - "christianhegedues", - "BurnerPat", - "schlagi123", - "neverendingo", - "creitiv", - "DunklesBlut88", - "paesku", - "bricks", - "fabiankreutz", - "spiegelp" - ] - }, - "conflicting/MDN/Contribute": { - "modified": "2020-02-19T18:50:24.408Z", - "contributors": [ - "jswisher", - "1000eyes" - ] - }, - "conflicting/MDN/Contribute/Getting_started": { - "modified": "2019-01-16T20:30:11.342Z", - "contributors": [ - "wbamberg", - "dario.bloch" - ] - }, - "conflicting/Mozilla/Add-ons": { - "modified": "2019-03-24T00:04:52.753Z", - "contributors": [ - "tregagnon", - "fscholz", - "SeSchneider", - "Yozh88", - "Jules Papillon", - "Alopix", - "Pl4yer", - "Masterdschecker", - "Michael2402", - "Undertaker", - "Thomas147", - "Felix.Schwarz", - "Verruckt", - "Slosd", - "Philipp", - "Indigo", - "Jonny", - "Takenbot", - "Manuel Strehl", - "Ar-sch.de", - "DDSD", - "Dria" - ] - }, - "conflicting/Web/API": { - "modified": "2019-03-23T23:21:31.048Z", - "contributors": [ - "wbamberg", - "fscholz", - "casarock", - "sbarthel", - "TitanNano" - ] - }, - "conflicting/Web/API/Document_Object_Model": { - "modified": "2019-12-23T07:48:22.460Z", - "contributors": [ - "Cerberooo", - "StevenS77", - "Barfooz" - ] - }, - "conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10": { - "modified": "2019-03-23T23:28:11.671Z", - "contributors": [ - "Sheppy" - ] - }, - "conflicting/Web/API/File/name": { - "modified": "2019-03-23T23:33:53.570Z", - "contributors": [ - "fscholz", - "nothine" - ] - }, - "conflicting/Web/API/Window/load_event": { - "modified": "2019-03-23T22:09:19.030Z", - "contributors": [ - "Anonymous" - ] - }, - "conflicting/Web/API/WindowOrWorkerGlobalScope": { - "modified": "2019-03-23T23:01:42.969Z", - "contributors": [ - "teoli" - ] - }, - "conflicting/Web/Accessibility": { - "modified": "2019-03-18T20:35:27.144Z", - "contributors": [ - "chrisdavidmills", - "teoli", - "eminor" - ] - }, - "conflicting/Web/CSS": { - "modified": "2019-03-23T22:43:38.676Z", - "contributors": [ - "Sebastianz", - "creativenitish" - ] - }, - "conflicting/Web/CSS/::placeholder": { - "modified": "2019-03-23T23:08:23.797Z", - "contributors": [ - "teoli", - "Sebastianz", - "icy" - ] - }, - "conflicting/Web/CSS/CSS_Basic_User_Interface": { - "modified": "2019-03-23T22:43:34.455Z", - "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Sebastianz" - ] - }, - "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { - "modified": "2019-03-18T20:58:13.468Z", - "contributors": [ - "KadirTopal", - "wiegels", - "AccNeeder", - "rroehrig", - "thorsten.rinne", - "fscholz", - "elker", - "thandwerker", - "Honig" - ] - }, - "conflicting/Web/CSS/cursor": { - "modified": "2019-03-23T23:11:42.748Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, - "conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743": { - "modified": "2019-03-23T22:43:38.581Z", - "contributors": [ - "Sebastianz" - ] - }, - "conflicting/Web/CSS/float": { - "modified": "2019-03-23T23:23:49.504Z", - "contributors": [ - "SJW" - ] - }, - "conflicting/Web/CSS/font-variant": { - "modified": "2019-03-23T23:23:47.885Z", - "contributors": [ - "dio", - "SJW" - ] - }, - "conflicting/Web/CSS/width": { - "modified": "2019-03-23T23:23:49.598Z", - "contributors": [ - "SJW" - ] - }, - "conflicting/Web/Guide": { - "modified": "2019-03-24T00:03:49.652Z", - "contributors": [ - "TornadoIDS", - "fscholz", - "Mrueegg" - ] - }, - "conflicting/Web/HTML/Element": { - "modified": "2019-03-23T23:37:56.525Z", - "contributors": [ - "gk-freiheit", - "rawcat", - "teoli", - "AickeSchulz", - "jwl" - ] - }, - "conflicting/Web/HTTP/Status/404": { - "modified": "2019-03-23T22:25:58.962Z", - "contributors": [ - "cob", - "SebinNyshkim", - "PercyGitarrist" - ] - }, - "conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain": { - "modified": "2020-10-03T02:52:53.149Z", - "contributors": [ - "c0dewalker", - "wbamberg", - "schlagi123", - "sigoa", - "DoctypeRosenthal", - "Venhaus", - "crasher666", - "IngoB", - "fscholz", - "eminor" - ] - }, - "conflicting/Web/JavaScript/JavaScript_technologies_overview": { - "modified": "2020-03-12T19:38:27.478Z", - "contributors": [ - "schlagi123", - "hapeit", - "fscholz", - "Aurel" - ] - }, - "conflicting/Web/JavaScript/Reference/Errors/Unexpected_type": { - "modified": "2020-03-12T19:48:57.195Z", - "contributors": [ - "micschwarz" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:44:53.530Z", - "contributors": [ - "teoli", - "SamBrishes" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T22:01:02.840Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2020-10-15T22:01:15.339Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T21:45:26.885Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T21:45:27.090Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/DataView": { - "modified": "2020-10-15T21:46:53.689Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-15T21:45:25.297Z", - "contributors": [ - "schlagi123", - "Schollator" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T21:45:56.411Z", - "contributors": [ - "teoli", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T21:46:17.159Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Error/toString": { - "modified": "2020-10-15T21:46:53.703Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T22:01:29.746Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T22:01:36.587Z", - "contributors": [ - "xdevs23", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Function/toString": { - "modified": "2020-10-15T22:01:47.277Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T22:02:06.474Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2020-10-15T22:02:05.813Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator": { - "modified": "2020-10-15T22:02:09.634Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { - "modified": "2020-10-15T21:46:02.893Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { - "modified": "2020-10-15T22:03:24.903Z", - "contributors": [ - "fscholz", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T22:01:26.449Z", - "contributors": [ - "Morphbreed", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:45:14.479Z", - "contributors": [ - "schlagi123", - "doeck" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2020-10-15T21:45:18.319Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2019-03-23T22:30:41.741Z", - "contributors": [ - "peter30mar2017", - "fl1p" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:12:08.670Z", - "contributors": [ - "ThomasFe" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2019-06-02T12:14:00.624Z", - "contributors": [ - "RAnders00", - "rkeller1" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/String_9094f63a1f7efd350dd69d6a8ae174fb": { - "modified": "2019-03-18T21:30:46.256Z", - "contributors": [ - "Keviddle" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:46:29.639Z", - "contributors": [ - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T21:58:39.373Z", - "contributors": [ - "schlagi123", - "Sheggy" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T21:51:28.246Z", - "contributors": [ - "fscholz", - "kaljak", - "schlagi123", - "mizhac", - "MemoWalk" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-03-12T19:42:35.849Z", - "contributors": [ - "developitz", - "mschleeweiss", - "kdex", - "theRealBaccata", - "schlagi123", - "sbusch", - "olhaar" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039": { - "modified": "2020-10-15T21:37:40.074Z", - "contributors": [ - "Hocdoc", - "christophfriedrich", - "schlagi123", - "Elyasin", - "loki" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163": { - "modified": "2020-10-15T21:43:07.470Z", - "contributors": [ - "schlagi123", - "LeisureLarry", - "Webastronaut" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076": { - "modified": "2020-10-15T21:48:40.239Z", - "contributors": [ - "wbamberg", - "schlagi123" - ] - }, - "conflicting/Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-10-15T21:46:29.118Z", - "contributors": [ - "schlagi123", - "eluchsinger" - ] - }, - "conflicting/Web/Progressive_web_apps": { - "modified": "2019-03-23T23:29:04.477Z", - "contributors": [ - "HolgerSinn.Com" - ] - }, - "conflicting/Web/Security/Certificate_Transparency": { - "modified": "2020-10-15T21:39:59.794Z", - "contributors": [ - "Dschubba", - "GanbaruTobi", - "rugk", - "TheAlxH", - "mozjan" - ] - }, - "conflicting/Web/Web_Components/Using_custom_elements": { - "modified": "2019-03-23T22:05:53.556Z", - "contributors": [ - "amelzer" - ] - }, - "orphaned/Learn/How_to_contribute": { - "modified": "2020-07-16T22:33:42.823Z", - "contributors": [ - "SphinxKnight", - "1000eyes", - "der_rofler" - ] - }, - "orphaned/MDN/About/Linking_to_MDN": { - "modified": "2019-01-17T03:01:28.772Z", - "contributors": [ - "wbamberg", - "sklicek" - ] - }, - "orphaned/MDN/Community": { - "modified": "2019-06-15T16:58:37.273Z", - "contributors": [ - "sklicek", - "rs-github", - "wbamberg", - "BavarianMax", - "Jeremie", - "SvenSaarland", - "msebastian100", - "Stefan_hr4u" - ] - }, - "orphaned/MDN/Community/Whats_happening": { - "modified": "2019-03-23T23:27:28.266Z", - "contributors": [ - "wbamberg", - "Sebastianz", - "UweDirk" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-07-28T03:19:41.741Z", - "contributors": [ - "wbamberg", - "darkfeile", - "lutzip0", - "Dev201", - "jumpball", - "jogi23", - "Clonkh" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-01-16T19:26:44.220Z", - "contributors": [ - "wbamberg", - "jordylol2006", - "Sebastianz" - ] - }, - "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-01-16T19:26:12.299Z", - "contributors": [ - "wbamberg", - "sigoa", - "Sebastianz" - ] - }, - "orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template": { - "modified": "2019-01-16T14:33:16.131Z", - "contributors": [ - "wbamberg", - "SphinxKnight", - "Sebastianz", - "fscholz", - "ethertank", - "The Witcher", - "Michael2402" - ] - }, - "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-01-16T19:16:53.470Z", - "contributors": [ - "wbamberg", - "githubsvc", - "4680", - "maxsu" - ] - }, - "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { - "modified": "2019-01-16T21:20:05.744Z", - "contributors": [ - "wbamberg", - "hictox" - ] - }, - "orphaned/Plugins/Flash_Activation:_Browser_Comparison": { - "modified": "2019-03-23T22:03:23.868Z", - "contributors": [ - "Artist-sumo", - "Sheppy", - "HoLuLuLu" - ] - }, - "orphaned/Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.223Z", - "contributors": [ - "wbamberg", - "mfluehr" - ] - }, - "orphaned/Tools/Add-ons/DOM_Inspector": { - "modified": "2020-07-16T22:36:24.131Z", - "contributors": [ - "wbamberg", - "nw520" - ] - }, - "orphaned/Tools/Page_Inspector/Keyboard_shortcuts": { - "modified": "2020-07-16T22:34:50.445Z", - "contributors": [ - "GiovanniHD201E" - ] - }, - "orphaned/Tools/WebIDE_clone": { - "modified": "2019-03-23T23:03:21.499Z", - "contributors": [ - "wbamberg", - "VJSchneid", - "maybe", - "AARADEANCA" - ] - }, - "orphaned/Web/API/Body": { - "modified": "2020-10-15T22:15:22.404Z", - "contributors": [ - "fmeyertoens" - ] - }, - "orphaned/Web/API/Body/arrayBuffer": { - "modified": "2020-10-15T22:15:22.326Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/Body/blob": { - "modified": "2020-10-15T22:15:22.311Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/Body/body": { - "modified": "2020-10-15T22:15:22.169Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/Body/bodyUsed": { - "modified": "2020-10-15T22:15:22.317Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/Body/formData": { - "modified": "2020-10-15T22:15:22.274Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/Body/json": { - "modified": "2020-10-15T22:15:23.782Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/Body/text": { - "modified": "2020-10-15T22:15:23.627Z", - "contributors": [ - "SebinNyshkim" - ] - }, - "orphaned/Web/API/ChildNode": { - "modified": "2019-03-23T22:06:18.037Z", - "contributors": [ - "stevenwdv" - ] - }, - "orphaned/Web/API/ChildNode/remove": { - "modified": "2020-10-15T22:05:03.102Z", - "contributors": [ - "sv3m0r" - ] - }, - "orphaned/Web/API/FullscreenOptions": { - "modified": "2020-10-15T22:20:23.450Z", - "contributors": [ - "Gerak842" - ] - }, - "orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB": { - "modified": "2020-01-13T04:47:55.526Z", - "contributors": [ - "chrisdavidmills", - "gmagholder", - "Julini" - ] - }, - "orphaned/Web/API/LinkStyle": { - "modified": "2019-03-23T23:11:18.020Z", - "contributors": [ - "fscholz", - "Sebastianz" - ] - }, - "orphaned/Web/API/NavigatorOnLine": { - "modified": "2019-03-23T22:47:26.289Z", - "contributors": [ - "teoli" - ] - }, - "orphaned/Web/API/NavigatorOnLine/Online_and_offline_events": { - "modified": "2019-03-23T22:59:48.853Z", - "contributors": [ - "chrisdavidmills", - "terabaud" - ] - }, - "orphaned/Web/API/NavigatorOnLine/onLine": { - "modified": "2019-03-23T22:47:22.054Z", - "contributors": [ - "TRoskop" - ] - }, - "orphaned/Web/API/Node/setUserData": { - "modified": "2019-03-23T22:05:46.565Z", - "contributors": [ - "Nonononoki" - ] - }, - "orphaned/Web/API/RenderingContext": { - "modified": "2020-11-02T01:51:10.279Z", - "contributors": [ - "sgadola" - ] - }, - "orphaned/Web/CSS/:-moz-ui-valid": { - "modified": "2019-03-23T22:42:34.212Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, - "orphaned/Web/CSS/@page/bleed": { - "modified": "2020-10-15T21:39:36.423Z", - "contributors": [ - "SJW", - "Prinz_Rana", - "Sebastianz" - ] - }, - "orphaned/Web/CSS/@page/marks": { - "modified": "2020-10-15T21:29:09.846Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "orphaned/Web/CSS/Index": { - "modified": "2019-01-16T19:56:04.663Z", - "contributors": [ - "Sebastianz" - ] - }, - "orphaned/Web/CSS/Tools/Cubic_Bezier_Generator": { - "modified": "2019-03-23T22:43:38.857Z", - "contributors": [ - "Sebastianz" - ] - }, - "orphaned/Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:56:43.415Z", - "contributors": [ - "chrisdavidmills", - "marcus-at-localhost", - "JuSchu", - "sahin", - "Sebastianz", - "prayash", - "auranvesdranor" - ] - }, - "orphaned/Web/CSS/transform-function/translateX": { - "modified": "2020-12-11T18:08:20.315Z", - "contributors": [ - "Johuspect" - ] - }, - "orphaned/Web/Guide/Events": { - "modified": "2019-03-18T21:10:49.464Z", - "contributors": [ - "stef4412", - "gportioli" - ] - }, - "orphaned/Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-18T20:36:47.550Z", - "contributors": [ - "td8" - ] - }, - "orphaned/Web/Guide/HTML/HTML5": { - "modified": "2019-03-23T23:33:45.828Z", - "contributors": [ - "suriyaa", - "teoli", - "timausk", - "thorsten.rinne", - "matze", - "nothine" - ] - }, - "orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines": { - "modified": "2019-03-18T20:37:20.242Z", - "contributors": [ - "SebinNyshkim", - "BlackRebell89" - ] - }, - "orphaned/Web/HTML/Global_attributes/dropzone": { - "modified": "2020-10-15T21:40:11.332Z", - "contributors": [ - "kaljak", - "RmnWtnkmp" - ] - }, - "orphaned/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments": { - "modified": "2020-03-12T19:47:33.971Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { - "modified": "2020-10-15T21:52:42.525Z", - "contributors": [ - "Stoeoeoe", - "schlagi123", - "StevenS77" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { - "modified": "2020-10-15T22:01:09.829Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T21:39:41.133Z", - "contributors": [ - "verij51", - "Streamities", - "kdex", - "Flonk", - "schlagi123", - "the-bluesnik", - "GinoHereIam", - "Chris-CR", - "Fearodin" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { - "modified": "2020-10-15T22:01:27.148Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@species": { - "modified": "2020-10-15T22:01:26.820Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { - "modified": "2020-10-15T22:01:26.636Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear": { - "modified": "2020-10-15T22:01:24.339Z", - "contributors": [ - "shaedrich", - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete": { - "modified": "2020-10-15T22:01:25.242Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries": { - "modified": "2020-10-15T22:01:26.606Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach": { - "modified": "2020-10-15T21:53:59.055Z", - "contributors": [ - "schlagi123", - "Techworker" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/get": { - "modified": "2020-10-15T22:01:25.184Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/has": { - "modified": "2020-10-15T22:01:25.655Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys": { - "modified": "2020-10-15T21:57:34.550Z", - "contributors": [ - "schlagi123", - "patpir" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/set": { - "modified": "2020-10-15T22:01:24.339Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/size": { - "modified": "2020-10-15T22:01:24.292Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Global_Objects/Map/values": { - "modified": "2020-10-15T22:01:25.714Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator": { - "modified": "2020-10-15T22:05:45.089Z", - "contributors": [ - "schlagi123" - ] - }, - "orphaned/Web/Reference": { - "modified": "2020-07-03T18:35:25.162Z", - "contributors": [ - "duckymirror", - "fhwfzfge", - "Patrick_St.", - "Nickolay" - ] - }, - "orphaned/Web/Reference/API": { - "modified": "2019-03-23T23:18:19.126Z", - "contributors": [ - "goligo", - "Hanibal1963", - "AngelSankturio" - ] - } -} diff --git a/files/de/games/index.html b/files/de/games/index.html deleted file mode 100644 index 727732910e9369..00000000000000 --- a/files/de/games/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Spieleentwicklung -slug: Games -tags: - - Anwendungen - - HTML5 Spiele - - JavaScript Spiele - - Spiele - - Spieleentwicklung - - Web -translation_of: Games ---- -
{{GamesSidebar}}
- -
-

Spielen ist eine der populärsten Aktivitäten am PC. Immer wieder gibt es neue Technologien, die es ermöglichen, bessere und leistungsfähigere Spiele für den Standard-kompatiblen Webbrowser zu entwickeln.

-
- -
-
-

Einführung in die Web-Spiele-Entwicklung

- -
-
Einführung in die Internet-Spiele-Entwicklung
-
Eine Einführung, wie man mit der Entwicklung von Spielen mit Web-Technologien anfängt, und in die nützlichsten Technologien für Spieleentwickler. Dieser Artikel untersucht auch Geschäftsideen zur Entwicklung von Internetspielen.
-
Anatomie eines Videospiels
-
Was ist ein Videospiel überhaupt? Es gibt bestimmte Aspekte, die bei verschiedenen Spielen ähnlich sind (auch wenn es nicht so wirkt). Dieser Artikel versucht, verschiedene Konzepte wie Programmschleifen in einem allgemeinen Kontext zu erklären. Wenn sich der Artikel doch einmal auf einen Aspekt konzentriert, dann auf Web-Standards.
-
Besondere Tipps für Spieleentwickler
-
Dieser Artikel aus dem App Center stellt kurz die Dinge da, die man besonders berücksichtigen muss, wenn man versucht ein Spiel zu entwickeln, das als freies Web-Programm laufen soll.
-
- -

Externe Informationen

- -
-
Ein neues Spiel erstellen
-
Eine kollaborative Webseite mit sehr vielen Tutorials zur Online-Spieleentwicklung.
-
Creative JS
-
Eine Sammlung von beeindruckenden JavaScript-Techniken und Experimenten, die sich zwar nicht auf Spieleentwicklung konzentriert, aber dennoch hilfreich ist.
-
Game programming patterns
-
Ein E-Book, geschrieben von Bob Nystrom, das Programmier-Strukturen im Kontext der Spieleentwicklung mit dem Ziel, Entwicklern zu helfen, effektiveren und effizienteren Code zu produzieren, diskutiert.
-
Artillery blog
-
Die auf HTML-Spiele spezialisierte Firma Artillery hat einige nützliche Artikel in ihrem Blog.
-
Spiele für Firefox OS erstellen
-
Eine schnelle Anleitung um ein 2D Spiel mit HTML5, für Firefox OS und anderen Mobilen Platformen zu ertellen.
-
-
- -
-

Spieleentwicklungs-Themen

- -
-
Werkzeug
-
Dieser Abschnitt beschreibt die verfügbaren Werkzeuge zum Vereinfachen des Erstellens effektiver Spiel-Erlebnisse im Internet, wie Frameworks, Compiler wie Emscripten, und Debugging-Werkzeuge. Er erklärt die Kernkonzepte hinter allem und gibt Ihnen eine gute Basis um sich weiterzuentwickeln.
-
Techniken
-
Dieser Abschnitt enthält viele Artikel betreffend wichtigen Techniken der Spieleentwicklung, wie Physik, Kollisionserkennung, Animation, 3D, Datenspeicherung und vieles mehr.
-
Arbeitsschritte
-
Dieser Abschnitt enthält viele Fallbeispiele, die die einfachen Werkzeuge und Techniken oben benutzen und zu einem wundervollen Spiel zusammensetzen. Hier ist etwas für Sie, ob Sie ein erfahrener Webentwickler sind, der 2D- oder 3D-Spiele schreiben möchte, ein C++-Entwickler, der selbst erstellte Spiele ins Internet bringen will oder ein App-Entwickler, der besser mobile Apps erstellen möchte..
-
- -

Demos

- -
-
BananaBread
-
Ein Mehrspieler, 3D First-Person Shooter-Spiel, entwickelt mithilfe von Emscripten, WebGL und WebRTC.
-
Serpent game
-
Diese Open Web App ist ein simples Spiel basierend auf dem Klassiker "snake". Es verwendet die WebGameStub Vorlage, welche dir helfen kann schnell ein neues Web App Spiel zu erstellen.
-
Monster Madness
-
Ein WebGL und asm.js-basierter Mehrspieler Online Shooter, entwickelt von Nom Nom Games und Trendy Entertainment.
-
Auralux
-
WebGL und asm.js-basierte Strategiespiel: Capture all the suns to win!
-
-
-
diff --git a/files/de/glossary/abstraction/index.html b/files/de/glossary/abstraction/index.html deleted file mode 100644 index ceb6adfed5f182..00000000000000 --- a/files/de/glossary/abstraction/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Abstraktion -slug: Glossary/Abstraction -tags: - - Abstraktion - - Glossar - - Programmieren - - Programmiersprache -translation_of: Glossary/Abstraction -original_slug: Glossary/Abstraktion ---- -

Die Abstraktion in der {{Glossary("Computerprogrammierung")}} ist eine der Methoden zur Reduzierung der Komplexität von Code und der erleichterten Implementierung effizienterer Designs und Benutzerschnittstellen bei komplizierter Software. Die Abstraktion versteckt die technische Komplexität eines Systems hinter leicht verständlichen {{Glossary("API", "APIs")}}.

- -

Mehr dazu:

- -

Allgemeinwissen:

- -
    -
  • {{interwiki("wikipedia", "Abstraktion_(Informatik)", "Abstraktion")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/accessibility/index.html b/files/de/glossary/accessibility/index.html deleted file mode 100644 index e0d73157780458..00000000000000 --- a/files/de/glossary/accessibility/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Accessibility -slug: Glossary/Accessibility -tags: - - Accessibility - - Barrierefreiheit - - Glossary -translation_of: Glossary/Accessibility ---- -

Web Accessibility (A11Y) ist ein Begriff, der empfohlene Methoden beschreibt, um eine Website für Menschen mit physischen und technischen Einschränkungen zugänglich zu machen. Web accessibility wird am {{Glossary("W3C")}} durch die {{Glossary("WAI","Web Accessibility Initiative")}} (WAI) definiert und diskutiert.

- -

Mehr erfahren

- -

Allgemeines

- - - -

Lernmaterial

- - - -

Technische Referenz

- - diff --git a/files/de/glossary/adobe_flash/index.html b/files/de/glossary/adobe_flash/index.html deleted file mode 100644 index 3033a6d64fdc7a..00000000000000 --- a/files/de/glossary/adobe_flash/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Adobe Flash -slug: Glossary/Adobe_Flash -translation_of: Glossary/Adobe_Flash ---- -

Flash ist eine veraltete Technologie, die von Adobe entwickelt wird. Es ermöglicht komplexe Webapplikationen, Vektorgraphiken und Multimedia. Um Flash zu verwenden, muss das richtige Plugin in einem {{Glossary("Browser","Webbrowser")}} installiert werden.

- -

Mehr dazu

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/ajax/index.html b/files/de/glossary/ajax/index.html deleted file mode 100644 index 6eb90e7e33d68c..00000000000000 --- a/files/de/glossary/ajax/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: AJAX -slug: Glossary/AJAX -tags: - - AJAX - - CodingScripting - - Glossar - - Infrastruktur - - 'l10n:priority' -translation_of: Glossary/AJAX ---- -

Asynchronous {{Glossary("JavaScript")}} und {{Glossary("XML")}} (AJAX) ist eine Programmierpraxis zum Erstellen komplexerer, dynamischer Webseiten mithilfe einer Technologie die {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}} genannt wird.

- -

Mit AJAX können Sie einzelne Teile des {{Glossary("DOM")}} einer {{Glossary("HTML")}}-Webseite aktualisieren, anstatt die gesamte Seite neu laden zu müssen. Mit AJAX können Sie auch asynchron arbeiten, d. h. Ihr Code wird weiterhin ausgeführt, während dieser Teil Ihrer Webseite versucht, neu geladen zu werden (im Gegensatz zu synchron, der die Ausführung Ihres Codes blockiert, bis dieser Teil Ihrer Webseite neu geladen wurde).

- -

Mit interaktiven Websites und modernen Webstandards wird AJAX schrittweise durch Funktionen in JavaScript-Frameworks und die offizielle {{domxref("Fetch API")}} ersetzt.

- -

Erfahren Sie mehr

- -

Allgemeinwissen

- - - -

Technische Informationen

- - diff --git a/files/de/glossary/algorithm/index.html b/files/de/glossary/algorithm/index.html deleted file mode 100644 index e55e23cd8f4544..00000000000000 --- a/files/de/glossary/algorithm/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Algorithmus -slug: Glossary/Algorithm -tags: - - Algorithmus - - Glossary -translation_of: Glossary/Algorithm -original_slug: Glossary/Algorithmus ---- -

Ein Algorithmus ist eine eigenständige Abfolge von Anweisungen, die eine Funktion ausüben.

- -

Anders ausgedrückt beschreibt also ein Algorithmus einen Weg, der ein Problem so löst, dass es wiederholbar durch eine Maschine oder einen Menschen gelöst werden kann. Computerwissenschftler ermitteln die Effizienz eines Algorithmus durch das Konzept der "Komplexitätstheorie für Algorithmen" oder auch "O"-Notation genannt.

diff --git a/files/de/glossary/api/index.html b/files/de/glossary/api/index.html deleted file mode 100644 index b3f4ff668874d2..00000000000000 --- a/files/de/glossary/api/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: API -slug: Glossary/API -tags: - - API - - Glossary -translation_of: Glossary/API ---- -

Eine API (Application Programming Interface) ist eine Menge von Funktionen und Regeln, die innerhalb eines Softwareprogrammes die Interaktion zwischen der Software und anderen Elementen, wie anderer Software oder Hardware, ermöglicht.

- -

In der Webentwicklung ist eine API gewöhnlich eine Menge von Codefunktionalitäten (z.B. {{glossary("method","methods")}}, {{Glossary("property","properties")}}, Events und {{Glossary("URL","URLs")}}), die ein Entwickler in seiner Anwendung verwenden kann, um mit den Komponenten des Browsers des Nutzers, mit Software/Hardware auf dem Computer des Nutzers oder mit Websites und Diensten Dritter zu interagieren.

- -

Beispiele:

- -
    -
  • Die getUserMedia-API kann verwendet werden, um Audio- und Videodaten von der Webcam des Nutzers abzugreifen, welche dann durch den Entwickler in jeder erdenklichen Weise weiterverwendet werden können, beispielsweise durch die Aufnahme von Video und Audio, das Senden an einen anderen Nutzer in einem Konferenzanruf oder das Anfertigen von Momentaufnahmen aus dem Video.
    • -
  • Die Geolocation-API kann verwendet werden, um Informationen zur Position von den auf dem Gerät des Nutzers verfügbaren Diensten (z.B. GPS) abzufragen, welche dann in Verbindung mit den Google Maps APIs genutzt werden können, um zum Beispiel die Position des Nutzers auf einer kundenspezifischen Karte darzustellen und zu zeigen, welche Touristenattraktionen sich in seiner Nähe befinden.
    • -
  • Die Twitter-APIs können verwendet werden, um Daten von den Twitteraccounts des Nutzers abzugreifen, beispielsweise, um seine aktuellsten Tweets auf einer Website anzuzeigen.
    • -
  • Die Web-Animations-API kann verwendet werden, um Teile einer Website zu animieren - zum Beispiel, um Bilder zu bewegen oder zu rotieren.
    • -
- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Application_programming_interface", "API")}} auf Wikipedia (Englisch)
    • -
- -

Technische Referenz

- - diff --git a/files/de/glossary/apple_safari/index.html b/files/de/glossary/apple_safari/index.html deleted file mode 100644 index b8014951444efd..00000000000000 --- a/files/de/glossary/apple_safari/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Apple Safari -slug: Glossary/Apple_Safari -translation_of: Glossary/Apple_Safari ---- -

Safari ist ein von Apple entwickelter {{Glossary("Browser","Web Browser")}}, der für Mac OS X und iOS verwendet wird. Er basiert auf der Open-Source WebKit Engine.

- -

Siehe auch

- -

Allgemeines

- - - -

Technisches

- - diff --git a/files/de/glossary/argument/index.html b/files/de/glossary/argument/index.html deleted file mode 100644 index c0e36266c27e4a..00000000000000 --- a/files/de/glossary/argument/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Argument -slug: Glossary/Argument -translation_of: Glossary/Argument ---- -

Ein Argument ist ein {{glossary("value","Wert")}} ({{Glossary("primitive","primitiv")}} oder {{Glossary("object","Objekt")}}), der einer {{Glossary("function","Funktion")}} als Input übergeben wird.

- -

Mehr lernen

- -

Allgemeine Refferenz

- -
    -
  • {{Interwiki("wikipedia", "Parameter_(Informatik)","Parameter")}} auf Wikipedia
    • -
- -

Technische Refferenz

- -
    -
  • Das {{jsxref("Functions/arguments","arguments")}} Objekt in {{glossary("JavaScript")}}
    • -
diff --git a/files/de/glossary/aria/index.html b/files/de/glossary/aria/index.html deleted file mode 100644 index ab02af073fb9b1..00000000000000 --- a/files/de/glossary/aria/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: ARIA -slug: Glossary/ARIA -translation_of: Glossary/ARIA ---- -

ARIA (Accessible Rich {{glossary("Internet")}} Applications) ist eine {{Glossary("W3C")}} Spezifikation um {{Glossary("HTML")}} Elemente mit semantischen Informationen oder Metadaten anzureichern, damit die Seite auch für Menschen mit Einschränkungen zugänglich ist.

- -

Zum Beispiel hilft das Attribut role="alert" Screenreadern dabei, ein HTML Tag als wichtig und zeitkritisch einzustufen und es einem Nutzer mit Sehbehinderung mitzuteilen.

- -

Erfahren Sie mehr

- - diff --git a/files/de/glossary/arpa/index.html b/files/de/glossary/arpa/index.html deleted file mode 100644 index edb22d11697673..00000000000000 --- a/files/de/glossary/arpa/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ARPA -slug: Glossary/ARPA -translation_of: Glossary/ARPA ---- -

.arpa (address and routing parameter area) ist eine {{glossary("TLD","Top-Level-Domain")}}, welche für Internetinfrastrukturzwecke, speziell Reverse DNS Lookup, verwendet wird (d.h., finden des {{glossary("Domain_Name", "Domain-Namens")}} für eine gegebene {{glossary("IP Address", "IP Adresse")}}).

- -

Erfahre mehr

- -

Allgemeines

- - diff --git a/files/de/glossary/array/index.html b/files/de/glossary/array/index.html deleted file mode 100644 index 23a984a8e01388..00000000000000 --- a/files/de/glossary/array/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Array -slug: Glossary/array -tags: - - Array - - Feld - - JavaScript - - Programmieren - - Wörterbuch -translation_of: Glossary/array ---- -

Ein Array ist eine geordnete Sammlung von Daten (entweder {{Glossary("primitive")}} oder als {{Glossary("object")}}). Arrays werden verwendet, um mehrere Werte in einer einzigen Variablen zu speichern, verglichen mit einer Variablen die nur einen einzigen Wert speichern kann.

- -

Jedes Element in einem Array hat eine Nummer, auch numerischer Index genannt, über die man auf die einzelnen Elemente zugreifen kann. In JavaScript beginnen Arrays bei Index Null und können mit verschiedenen {{Glossary("Method", "Methoden")}} manipuliert werden.

- -

In JavaScript sieht ein Array folgendermaßen aus:

- -
var meinArray = [1, 2, 3, 4];
-
-var katzenNamenArray = ["Jacqueline", "Sophia", "Felix"];
-
-// Arrays in JavaScript können verschiedene Typen von Daten enthalten, wie oben zu sehen ist.
-
- -

Mehr erfahren

- -

Allgemeines

- -
    -
  • {{Interwiki("wikipedia", "Feld_(Datentyp)", "Array")}} auf Wikipedia
    • -
- -

Technische Referenz

- -
    -
  • JavaScript {{jsxref("Array")}} im MDN
    • -
diff --git a/files/de/glossary/ascii/index.html b/files/de/glossary/ascii/index.html deleted file mode 100644 index ce1435107caa06..00000000000000 --- a/files/de/glossary/ascii/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ASCII -slug: Glossary/ASCII -tags: - - Glossary - - Infrastructure -translation_of: Glossary/ASCII ---- -

ASCII (American Standard Code for Information Interchange) ist eine der verbreitetsten Kodierungen, die von Computern verwendet wird, um Buchstaben, Zahlen, Interpunktions- und Steuerungszeichen in digitale Form umzuwandeln. Seit 2007 wird es im {{Glossary("Internet")}} durch {{Glossary("UTF-8")}} ersetzt.

- -

Mehr lernen

- -

Allgemeines Wissen

- -

{{Interwiki("wikipedia", "ASCII")}} auf Wikipedia

diff --git a/files/de/glossary/asynchronous/index.html b/files/de/glossary/asynchronous/index.html deleted file mode 100644 index 908c6145a8b0b0..00000000000000 --- a/files/de/glossary/asynchronous/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Asynchron -slug: Glossary/Asynchronous -translation_of: Glossary/Asynchronous -original_slug: Glossary/Asynchron ---- -

Der Ausdruck Asynchron bezieht sich auf das Konzept, dass mehrere Dinge zeitgleich passieren oder mehre, verbundene Dinge geschehen ohne aufeinander zu warten. In der Informatik wird das Wort Asynchron meist in zwei Fällen unterschieden.

- -
-
Netzwerk und Kommunikation
-
-

Die asynchrone Kommunikation ist eine Methode zum Austausch von Nachrichten zwischen zwei oder mehr Teilnehmern, bei welcher jeder Teilnehmer Nachrichten empfängt und verarbeitet, wann immer dies zweckmäßig oder möglich ist, und nicht sofort nach dem Empfang. Darüber hinaus können Nachrichten gesendet werden, ohne auf eine Bestätigung zu warten, wobei zu beachten ist, dass der Empfänger bei Auftreten eines Problems Korrekturen anfordern oder die Situation auf andere Weise behandeln wird.

- -

Auf den Menschen übertragen sind Emails eine asynchrone Kommunikations-Methode; Der Absender sendet eine E-Mail, und der Empfänger liest und beantwortet die Nachricht, wenn er es möchte, und nicht sofort. Beide Seiten können weiterhin Nachrichten senden und empfangen, wann immer sie möchten, anstatt sich aufeinander abstimmen zu müssen.

- -

Wenn Software asynchron kommuniziert, fordert ein Programm beispielsweise Informationen von einer anderen Software (z. B. einem Server) an und führt andere Aktionen aus, während auf eine Antwort gewartet wird. Zum Beispiel die Programmiertechnik AJAX (Asynchronous JavaScript and {{Glossary ("XML")}}) - heute meist einfach "Ajax", obwohl {{Glossary ("JSON")}} in modernen Anwendungen eher als XML verwendet wird - ist ein Mechanismus, der mit {{Glossary ("HTTP")}} relativ kleine Datenmengen vom Server anfordert. Das Ergebnis wird dann zurückgegeben, wenn es verfügbar ist, und nicht sofort.

-
-
Software Design
-
-

Asynchrones Softwaredesign erweitert das Konzept, indem Code erstellt wird, mit dem ein Programm die Ausführung einer Aufgabe neben der ursprünglichen Aufgabe (oder den ursprünglichen Aufgaben) beginnt, ohne anzuhalten, bis diese Aufgabe abgeschlossen ist. Wenn die sekundäre Aufgabe erledigt ist, wird die ursprüngliche Aufgabe mithilfe eines vereinbarten Mechanismus benachrichtigt, damit sie weiß, dass die Arbeit erledigt ist und dass das Ergebnis, falls vorhanden, verfügbar ist.

- -

Es gibt eine Reihe von Programmiertechniken zum Implementieren von asynchroner Software. Eine Einführung dazu finden Sie im Artikel Asynchronous JavaScript.

-
-
- -

Learn more

- -

Technical reference

- - - -

{{IncludeSubnav("/en-US/docs/Glossary")}}

diff --git a/files/de/glossary/atag/index.html b/files/de/glossary/atag/index.html deleted file mode 100644 index 02f6f4b5c7d660..00000000000000 --- a/files/de/glossary/atag/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: ATAG -slug: Glossary/ATAG -tags: - - ATAG - - Accessibility - - Glossar -translation_of: Glossary/ATAG ---- -

ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) ist eine {{Glossary("W3C")}}-Empfehlung zum Bau von Publikationswerkzeugen, die Inhalte nach dem Accessibility-Standard herstellen.

- -

Mehr erfahren

- -

Allgemeinwissen

- - - -

Technische Referenz

- - diff --git a/files/de/glossary/attribute/index.html b/files/de/glossary/attribute/index.html deleted file mode 100644 index 78396789c10a04..00000000000000 --- a/files/de/glossary/attribute/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Attribut -slug: Glossary/Attribute -tags: - - Attribute - - CodingScripting - - Glossary - - HTML -translation_of: Glossary/Attribute ---- -

Ein Attribut erweitert das Verhalten eines {{Glossary("tag","Tags")}} oder fügt weitere Metadaten hinzu. Ein Attribut hat immer die Form name=wert (der eindeutige Identifikator des Attributs und der damit verbundene Wert).

- -

Mehr lernen

- -

Technische Referenz

- - diff --git a/files/de/glossary/bandwidth/index.html b/files/de/glossary/bandwidth/index.html deleted file mode 100644 index b74026a95e21c4..00000000000000 --- a/files/de/glossary/bandwidth/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Bandbreite -slug: Glossary/Bandwidth -tags: - - Glossar - - Infrastruktur -translation_of: Glossary/Bandwidth -original_slug: Glossary/Bandbreite ---- -

Die Bandbreite ist der Abstand zwischen Unterfrequenz und Oberfrequenz und gibt z.B. an welche Informationsmenge während einer bestimmten Zeit durch eine Datenverbindung durchgespielt werden kann. Ueblicherweise wird sie in mehrfachen bit-per-seconds (bps) gemessen, z.B. megabits-per-second (Mbps) oder gigabits-per-second (Gbps).

- -

- -

Mehr dazu:

- -
    -
  • {{Interwiki("wikipedia", "Bandwidth")}} auf Wikipedia (Englische Version)
    • -
diff --git a/files/de/glossary/block/css/index.html b/files/de/glossary/block/css/index.html deleted file mode 100644 index f5bc2048b0194f..00000000000000 --- a/files/de/glossary/block/css/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Block (CSS) -slug: Glossary/Block/CSS -tags: - - Block - - CSS - - Glossar - - Glossary - - display -translation_of: Glossary/Block/CSS ---- -

Ein Block auf einer Website ist ein {{glossary("HTML")}}-{{glossary("element")}}, das in einer neuen Zeile angezeigt wird, also unter dem vorherigen Element und über dem folgenden (gemeinhin bekannt als Blockelement). Beispielsweise ist ein {{htmlelement("p")}} standardmäßig ein Blockelement, während ein {{htmlelement("a")}} ein eingebundenes Element (engl. "inline element") ist — mehrere Links können so nebeneinander im HTML-Quelltext stehen und dann in der gerenderten Ausgabe auf derselben Zeile liegen.

- -

Durch Verwendung der {{cssxref("display")}}-Eigenschaft können Sie bestimmen, ob ein Element als Block oder eingebunden dargestellt wird (neben einigen weiteren Optionen). Blöcke werden weiterhin beeinflusst von Positionierungsangaben durch die {{cssxref("position")}}-Eigenschaft.

- -

Mehr erfahren

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/block/index.html b/files/de/glossary/block/index.html deleted file mode 100644 index 913fc515de00ae..00000000000000 --- a/files/de/glossary/block/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Block -slug: Glossary/Block -tags: - - Block - - Glossary -translation_of: Glossary/Block ---- -

Der Begriff Block hat mehrere, kontextabhängige Bedeutungen, darunter:

- -

{{GlossaryDisambiguation}}

diff --git a/files/de/glossary/block/scripting/index.html b/files/de/glossary/block/scripting/index.html deleted file mode 100644 index 93fa69e24cbcd3..00000000000000 --- a/files/de/glossary/block/scripting/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Block (Scripting) -slug: Glossary/Block/Scripting -tags: - - Anweisungsblock - - Block - - Glossary - - JavaScript - - Scripting -translation_of: Glossary/Block/Scripting ---- -

In {{glossary("JavaScript")}} ist ein Block eine Sammlung zueinander gehöriger {{glossary("statement","Anweisungen")}}, die von geschweiften Klammern ("{}") eingeschlossen sind. Zum Beispiel können Sie einen Block mit Anweisungen nach einem {{jsxref("Statements/if...else","if (condition)")}}-Block setzen, wodurch Sie deutlich machen, dass der Interpreter den Code innerhalb dieses Blocks ausführen soll, wenn die Bedingung zu true evaluiert, oder ihn überspringen soll, wenn die Bedingung false ergibt.

- -

Mehr erfahren

- -

Lernmaterial

- - diff --git a/files/de/glossary/boolean/index.html b/files/de/glossary/boolean/index.html deleted file mode 100644 index 667517a3962019..00000000000000 --- a/files/de/glossary/boolean/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Boolean -slug: Glossary/Boolean -translation_of: Glossary/Boolean ---- -

In der Programmierung ist Boolean ein logischer {{Glossary("Type","Datentyp")}}, der nur einen der zwei {{Glossary("Value","Werte")}} true oder false, wahr oder falsch annehmen kann.

- -

Boolesche Werte sind die Grundlage für die Entscheidung, ob ein Teilbereich des Programms ausgeführt werden soll (true) oder nicht (false), zum Beispiel bei einem if-Block oder einer for-Schleife:

- -
/* JavaScript if */
-if (Bedingung) {
-   // auszuführender Programmabschnitt, falls die Bedingung true ergibt
-}
-
-let i = 1;
-if (i == 1) { // dies ist wahr, true
-    console.log("Bedingung ist true");
-} else {
-    console.log("Bedingung ist false");
-}
-
-
-
-/* JavaScript for */
-for (Kontrollvariable; Bedingung; Zähler) {
-  // auszuführender Abschnitt, solange die Bedingung true ergibt
-}
-
-for (let i = 0; i < 4; i++) {
-  console.log("Ich werde ausgegeben, so lange die Bedingung i < 4 wahr ist.");
-}
-
-
- - - -

Mehr erfahren

- -

Allgemein

- -
    -
  • {{Interwiki("wikipedia", "Datentyp#Boolean_.28logische_Werte.29", "Boolean")}} auf Wikipedia
    • -
- -

Technik

- - diff --git a/files/de/glossary/bootstrap/index.html b/files/de/glossary/bootstrap/index.html deleted file mode 100644 index d53c89b773211d..00000000000000 --- a/files/de/glossary/bootstrap/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Bootstrap -slug: Glossary/Bootstrap -tags: - - Bootstrap - - CSS Framework - - HTML Framework - - Responsive Design - - responsive Webseiten -translation_of: Glossary/Bootstrap ---- -

Bootstrap ist ein kostenloses Open Source Framework für {{Glossary("HTML")}}, CSS, und {{Glossary("JavaScript")}}, mit dem man sehr schnell responsive Webseiten erstellen kann.

- -

Der ursprüngliche Name von Bootstrap war Twitter Blueprint und es wurde auf Twitter entwickelt. Es unterstützt responsives Design und stellt vordefinierte Design Features bereit, die man entweder so wie sie sind direkt nutzen oder an die Anforderungen des eigenen Codes anpassen kann. Man braucht sich keine Gedanken über die Kompatibilität mit anderen Browsern zu machen, da Bootstrap mit allen modernen Browsern kompatibel ist und auch mit neueren Versionen des Internet Explorers.

- -

Learn more

- -

General knowledge

- -
    -
  • {{interwiki("Wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} on Wikipedia
    • -
- -

Technical reference

- - diff --git a/files/de/glossary/browser/index.html b/files/de/glossary/browser/index.html deleted file mode 100644 index 8491de4e51b46e..00000000000000 --- a/files/de/glossary/browser/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Browser -slug: Glossary/Browser -tags: - - Glossar - - Navigation -translation_of: Glossary/Browser ---- -

Ein Webbrowser ist ein Programm, welches Seiten vom {{Glossary("World Wide Web","Web")}} empfängt, darstellt, und Benutzern ermöglicht weitere Seiten über {{Glossary("hyperlink","hyperlinks")}}. zu erreichen.

- -

Mehr erfahren

- -

Allgemeines Wissen

- - - -

Lade einen Browser herunter

- - diff --git a/files/de/glossary/buffer/index.html b/files/de/glossary/buffer/index.html deleted file mode 100644 index ae067c247e2ed8..00000000000000 --- a/files/de/glossary/buffer/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: buffer -slug: Glossary/buffer -tags: - - Buffer - - Puffer - - Speicher -translation_of: Glossary/buffer ---- -

Ein Buffer (dt. Puffer) dient als Speicher im physischen Bereich um Daten vorübergehend bereitzustellen bis die Daten von A nach B transportiert worden sind.

- -

Mehr Lernen

- -

Allgemeines

- - diff --git a/files/de/glossary/cache/index.html b/files/de/glossary/cache/index.html deleted file mode 100644 index 71a816e582559d..00000000000000 --- a/files/de/glossary/cache/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Cache -slug: Glossary/Cache -tags: - - Glossar - - HTTP -translation_of: Glossary/Cache ---- -

Ein cache (web cache oder HTTP cache) ist eine Komponente die HTTP Antworten temporär speichert, sodass sie für folgende HTTP Anfragen wieder verwendet werden können, wenn sie bestimmte Bedingungen erfüllen.

- -

Mehr lernen

- -

Allgemeine Referenzen

- -
    -
  • {{interwiki("wikipedia", "Browser-Cache")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/caldav/index.html b/files/de/glossary/caldav/index.html deleted file mode 100644 index 10598bd4f5b2cd..00000000000000 --- a/files/de/glossary/caldav/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CalDAV -slug: Glossary/CalDAV -tags: - - Glossar - - Infrastruktur -translation_of: Glossary/CalDAV ---- -

CalDAV (Calendaring extensions to {{Glossary("WebDAV")}}) ist ein {{glossary("Protokoll")}}, standardisiert von der {{Glossary("IETF")}} und wird dazu verwendet rechnerfern auf Kalenderdaten eines {{glossary("Servers")}} zuzugreifen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "CalDAV")}} auf Wikipedia
    • -
- -

Technische Referenz

- - diff --git a/files/de/glossary/canvas/index.html b/files/de/glossary/canvas/index.html deleted file mode 100644 index a22d757b755f95..00000000000000 --- a/files/de/glossary/canvas/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Canvas -slug: Glossary/Canvas -translation_of: Glossary/Canvas ---- -
-

Das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} stellt einen leeren Grafikbereich bereit, auf dem spezielle {{Glossary("JavaScript")}}-{{Glossary("API","APIs")}} zeichnen können (wie zum Beispiel Canvas 2D oder {{Glossary("WebGL")}}).

- -

Mehr dazu

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Canvas element", "Canvas")}} auf Wikipedia (Englisch)
    • -
- -

Lerninhalte

- - - -

Technische Informationen

- - -
diff --git a/files/de/glossary/card_sorting/index.html b/files/de/glossary/card_sorting/index.html deleted file mode 100644 index 0c56b99a919f6a..00000000000000 --- a/files/de/glossary/card_sorting/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Card sorting -slug: Glossary/Card_sorting -tags: - - Design - - Glossary - - Informationsarchitektur -translation_of: Glossary/Card_sorting ---- -

Card sorting (dt. etwa „Karten sortieren“) ist eine einfach anzuwendende Methode zur Strukturierung in der {{glossary("Informationsarchitektur")}}. Beim Card sorting werden die Personen, die an der Konzeption einer Website (oder eines anderen Produkts) beteilgt sind, dazu aufgefordert, die Inhalte, Dienste und Funktionen, die die gesamte Website oder eine einzelne Webseite enthalten sollen, aufzuschreiben und anschließend in Gruppen oder Kategorien zusammenzufassen. Die Methode eignet sich, um herauszufinden, welche Inhalte auf die einzelnen Seiten einer Website gehören.

- -

Die Bezeichnung leitet sich davon ab, dass Card sorting oftmals durch das buchstäbliche Aufschreiben der Begriffe auf Karteikarten erfolgt, die dann zu Gruppen oder Stapeln absortiert werden.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "Card-Sorting")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/cdn/index.html b/files/de/glossary/cdn/index.html deleted file mode 100644 index e0e0ead24f44d9..00000000000000 --- a/files/de/glossary/cdn/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: CDN -slug: Glossary/CDN -tags: - - Glossary - - Infrastructure -translation_of: Glossary/CDN ---- -

Ein CDN (Content Delivery Network) ist eine Gruppe von Servern, die sich über viele Standorte erstreckt. Diese Server speichern duplizierte Kopien von Daten, um Datenanforderungen, basierend darauf welche der Server sich räumlich am nähesten zu den entsprechenden anfragenden Endnutzern befinden, zu beantworten. CDNs ermöglichen schnelle Leistung, die weniger stark von hoher Datenverkehrsauslastung beeinflusst wird.

- -

CDNs werden auf breiter Ebene genutzt um CSS- und Javascript-Dateien (Static Assets, Statische Inhalte) von Bibliotheken wie Bootstrap, jQuery etc. auszuliefern. Derartige Bibliotheksdateien über ein CDN auszuliefern, ist aus mehreren Gründen vorzuziehen:

- -
    -
  • Statische Inhalte von Bibliotheken über ein CDN auszuliefern, vermindert die Last auf Deinen eigenen Servern.
    • -
  • Die meisten CDNs haben Serverstandorte rund um den Erdball, so dass die Server des CDN u.U. näher bei Deinen Nutzern sind, als Deine eigenen Server. Geographische Distanz wirkt sich proportional auf die Latenz aus.
    • -
  • CDNs sind bereits mit den richtigen Cache-Einstellungen konfiguriert. Die Benutzung eines CDN erspart Dir die Konfiguration für die Bereitstellung von statischen Inhalten auf Deinen eigenen Servern.
    • -
diff --git a/files/de/glossary/character/index.html b/files/de/glossary/character/index.html deleted file mode 100644 index c4eb900ca91a92..00000000000000 --- a/files/de/glossary/character/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Zeichen -slug: Glossary/Character -tags: - - CodingScripting - - Glossar - - strings -translation_of: Glossary/Character ---- -

Ein Zeichen ist entweder ein Symbol (Buchstaben, Nummern, Punktuierung) oder nicht druckbares "control" (z.B. carriage return oder weicher Bindestrich). {{glossary("UTF-8")}} ist der meist verwendete Zeichensatz und beinhält die Grapheme der meistbeliebtesten menschlichen Sprachen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "Character (computing)")}} auf Wikipedia
    • -
  • {{interwiki("wikipedia", "Character encoding")}} auf Wikipedia
    • -
  • {{interwiki("wikipedia", "ASCII")}} auf Wikipedia
    • -
  • {{interwiki("wikipedia", "UTF-8")}} auf Wikipedia
    • -
  • {{interwiki("wikipedia", "Unicode")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/chrome/index.html b/files/de/glossary/chrome/index.html deleted file mode 100644 index 4a3a1b371de4d2..00000000000000 --- a/files/de/glossary/chrome/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Chrome -slug: Glossary/Chrome -translation_of: Glossary/Chrome ---- -In einem Browser ist Chrome jeder sichtbare Aspekt eines Browsers, abgesehen von den Webseiten selbst (z. B. Symbolleisten, Menüleiste, Registerkarten). Dies ist nicht mit dem Browser {{glossary ("Google Chrome")}} zu verwechseln. - -

Mehr lernen

- - diff --git a/files/de/glossary/class/index.html b/files/de/glossary/class/index.html deleted file mode 100644 index c6179ec7929294..00000000000000 --- a/files/de/glossary/class/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Klasse -slug: Glossary/Class -tags: - - CodingScripting - - Glossary -translation_of: Glossary/Class -original_slug: Glossary/Klasse ---- -

In der {{glossary("OOP","objektorientierten Programmierung")}} definiert eine Klasse die Charakteristiken eines {{glossary("object","Objekts")}}. Eine Klasse ist eine Entwurfsdefinition der {{glossary("property","Eigenschaften")}} und {{glossary("method","Methoden")}} eines Objekts, der "Plan", von dem andere spezifischere Instanzen des Objekts abgeleitet werden.

- -

Mehr dazu

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/cms/index.html b/files/de/glossary/cms/index.html deleted file mode 100644 index 61609da57ad2c9..00000000000000 --- a/files/de/glossary/cms/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: CMS -slug: Glossary/CMS -tags: - - CMS - - Content management system - - Glossar -translation_of: Glossary/CMS ---- -

Ein CMS (Content Management System) ist eine Software, die Benutzern das Veröffentlichen, Verwalten, Verändern oder Entfernen verschiedenster Inhalte erlaubt. Dazu gehören neben Text auch Bilder, Videos, Ton und interaktiver Code.

- -

Erfahren Sie mehr

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Content management system")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/codec/index.html b/files/de/glossary/codec/index.html deleted file mode 100644 index 1c21d4fe16a772..00000000000000 --- a/files/de/glossary/codec/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Codec -slug: Glossary/Codec -tags: - - Glossar - - WebMechanics -translation_of: Glossary/Codec ---- -

Ein Codec (ein Kofferwort, das vom Englischen "coder-decoder", dt. Kodierer-Dekodierer, abgeleitet ist) ist ein Programm, Algorithmus oder Gerät, das einen Datenstrom kodiert oder dekodiert. Ein Codec kann dabei eine für ihn spezifische Kodier- oder Kompressionstechnik anwenden.

- -

Mehr dazu

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Codec")}} auf Wikipedia
    • -
- -

Technische Informationen

- - diff --git a/files/de/glossary/compile_time/index.html b/files/de/glossary/compile_time/index.html deleted file mode 100644 index 342360fe9fb23d..00000000000000 --- a/files/de/glossary/compile_time/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Compile-Zeit -slug: Glossary/Compile_time -tags: - - CodingScripting - - Glossar - - JavaScript -translation_of: Glossary/Compile_time ---- -

Die Compile-Zeit beschreibt den Zeitraum ab dem ein Programm zuerst geladen ist bis zu dem Zeitpunkt an dem das Programm {{Glossary("parse","geparst")}} ist.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Übersetzungszeit")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/constructor/index.html b/files/de/glossary/constructor/index.html deleted file mode 100644 index 1dac8d84eea2f8..00000000000000 --- a/files/de/glossary/constructor/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Konstruktor -slug: Glossary/Constructor -translation_of: Glossary/Constructor -original_slug: Glossary/Konstruktor ---- -

Ein Konstruktor gehört zu einer Instanz eines bestimmten Klassen-{{glossary("object","Objekts")}}.

- -

Der Konstrutktor instanziiert dieses Objekt und bietet Zugriff auf seine privaten Informationen. Das Konzept des Konstruktors findet in den meisten {{glossary("OOP","Objekt-orientierten Programmiersprachen")}} Anwendung. Im Allgemeinen wird ein Konstruktor in {{glossary("JavaScript")}} in der Instanz einer {{glossary("class","Klasse")}} deklariert.

- -

Syntax

- -
// This is a generic default constructor class Default
-function Default() {
-}
-
-// This is an overloaded constructor class Overloaded
-// with parameter arguments
-function Overloaded(arg1, arg2, ...,argN){
-}
-
- -

Um einen Konstruktor aufzurufen, verwenden Sie den new operator, welcher einer {{glossary("variable","Variable")}} eine neue {{glossary("object reference","Objekt-Referenz")}} zuweist.

- -
function Default() {
-}
-
-// A new reference of a Default object assigned to a
-// local variable defaultReference
-var defaultReference = new Default();
-
- -

- -

Siehe auch

- -

Generelles Wissen

- -
    -
  • {{Interwiki("wikipedia", "Constructor_%28object-oriented_programming%29", "Konstruktor")}} auf Wikipedia
    • -
- -

Technische Referenz

- - diff --git a/files/de/glossary/cookie/index.html b/files/de/glossary/cookie/index.html deleted file mode 100644 index 2f777250c05d53..00000000000000 --- a/files/de/glossary/cookie/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Cookie -slug: Glossary/Cookie -tags: - - Glossar -translation_of: Glossary/Cookie ---- -

Ein cookie ist eine kleine Information, die ein Browser beim Besuch einer Webseite auf dem Computer des Besuchers speichert.

- -

Cookies werden benutzt um das Besuchererlebnis einer Webseite zu personalisieren. Sie können Einstellungen oder Eingaben des Webseitenbesuchers beinhalten. Nutzer können in ihren Browsereinstellungen Cookies akzeptieren, ablehnen oder löschen.

- -

Cookies können serverseitig über den Set-Cookie HTTP header, oder via JavaScript mit document.cookie gesetzt und modifiziert werden.

- -

Mehr erfahren

- -

Allgemeine Referenzen

- - diff --git a/files/de/glossary/cors-safelisted_request_header/index.html b/files/de/glossary/cors-safelisted_request_header/index.html deleted file mode 100644 index b67f7237ed8e5f..00000000000000 --- a/files/de/glossary/cors-safelisted_request_header/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: CORS-zugelassene Anfrage-Header -slug: Glossary/CORS-safelisted_request_header -tags: - - CORS -translation_of: Glossary/CORS-safelisted_request_header -original_slug: Glossary/CORS-zugelassener-anfrage-header ---- -

Ein CORS-zugelassener Anfrage-Header ist einer der folgenden HTTP Header:

- -
    -
  • {{HTTPHeader("Accept")}},
    • -
  • {{HTTPHeader("Accept-Language")}},
    • -
  • {{HTTPHeader("Content-Language")}},
    • -
  • {{HTTPHeader("Content-Type")}}.
    • -
- -

Wenn eine Anfrage nur diese Header verwendet (und die Werte der Header unten beschriebene Anforderungen erfüllen), braucht die Anfrage kein {{glossary("preflight request")}} im CORS-Kontext übermitteln.

- -

Man kann weitere Header über den {{HTTPHeader("Access-Control-Allow-Headers")}}-Header zulassen und listet man obige Header dort auf, lassen sich folgende Sicherheitsrestriktionen umgehen:

- -

Zusätzliche Restriktionen

- -

CORS-zugelassene Header müssen außerdem folgende Anforderungen erfüllen, um ein CORS-zugelassender Anfrage-Header zu sein:

- -
    -
  • Für {{HTTPHeader("Accept-Language")}} und {{HTTPHeader("Content-Language")}}: Kann lediglich Werte aus den Zeichen 0-9, A-Z, a-z, Space oder *,-.;=.
    • -
  • Für {{HTTPHeader("Accept")}} und {{HTTPHeader("Content-Type")}}: Darf keinen CORS-unsicheren Anfrage-Header-Byte: "():<>?@[\]{}, Delete, Tab and Kontrollzeichen: 0x00 to 0x19 enthalten.
    • -
  • Für {{HTTPHeader("Content-Type")}}: Muss einen der MIME-Typen application/x-www-form-urlencoded, multipart/form-data, oder text/plain (Parameter wie ein Qualitätswert (Quality value) werden ignoriert)
    • -
  • Für andere Header: Die Länge des Wertes darf 128 Bytes nicht überschreiten.
    • -
- -

Mehr erfahren

- -
    -
  • {{Glossary("CORS-safelisted response header")}}
    • -
  • {{Glossary("Forbidden header name")}}
    • -
  • {{Glossary("Request header")}}
    • -
diff --git a/files/de/glossary/cors/index.html b/files/de/glossary/cors/index.html deleted file mode 100644 index 90a7006ab0e6f5..00000000000000 --- a/files/de/glossary/cors/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: CORS -slug: Glossary/CORS -translation_of: Glossary/CORS ---- -

CORS (Cross-Origin Resource Sharing) ist ein Mechanismus, der es erlaubt Ressourcen von anderen Servern zu laden, als dem, der die Webseite initial ausgeliefert hat. Das wird normalerweise von Browsern auf Grund der same-origin security policy verhindert.

- -

Mit gewissen {{Glossary("Header", "HTTP Headern")}} können Webserver jedoch die eigenen Ressourcen für den Zugriff von anderen Quellen freigeben.

- -

Erfahren Sie mehr

- -

Generelle Informationen

- - - -

CORS Header

- -
-
{{HTTPHeader("Access-Control-Allow-Origin")}}
-
Gibt an, ob die Ressource generell von anderen Quellen aufgerufen werden darf und wenn ja, von welchen.
-
{{HTTPHeader("Access-Control-Allow-Credentials")}}
-
Gibt an, ob die Ressource auch dann abgerufen werden darf, wenn im Request der credentials mode auf include gesetzt ist.
-
{{HTTPHeader("Access-Control-Allow-Headers")}}
-
Gibt an, welche HTTP Header über Quellgrenzen hinweg erlaubt sind.
-
{{HTTPHeader("Access-Control-Allow-Methods")}}
-
Gibt an, welche HTTP Methoden über Quellgrenzen hinweg erlaubt sind.
-
{{HTTPHeader("Access-Control-Expose-Headers")}}
-
Gibt an, welche HTTP Header generell in einer Antwort vom Server angezeigt werden können.
-
{{HTTPHeader("Access-Control-Max-Age")}}
-
Gibt an, wie lange die Informationen aus der preflight-Anfrage gültig sind.
-
{{HTTPHeader("Access-Control-Request-Headers")}}
-
Gibt in der preflight-Anfrage an, welche HTTP Header bei der folgenden Anfrage genutzt werden.
-
{{HTTPHeader("Access-Control-Request-Method")}}
-
Gibt in der preflight-Anfrage an, welche HTTP Methode bei der folgenden Anfrage genutzt wird.
-
{{HTTPHeader("Origin")}}
-
Gibt die Quelle des ursprünglichen Requests an.
-
- -

Technische Referenz

- - - -
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/de/glossary/crawler/index.html b/files/de/glossary/crawler/index.html deleted file mode 100644 index 0588eb91965aeb..00000000000000 --- a/files/de/glossary/crawler/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Crawler -slug: Glossary/Crawler -translation_of: Glossary/Crawler ---- -

Ein Crawler ist ein Programm – oft auch Bot oder Robot genannt –, das systematisch das {{glossary("World Wide Web","Web")}} durchforstet, um Daten von Webseiten zu sammeln. Typischerweise nutzen Suchmaschinen (beispielsweise Google, Bing, etc.) Crawler zur Indexierung.

- -

Mehr dazu

- -
    -
  • {{Interwiki("wikipedia", "Webcrawler")}} auf Wikipedia
    • -
- - diff --git a/files/de/glossary/crlf/index.html b/files/de/glossary/crlf/index.html deleted file mode 100644 index 3b2b92fcfdd6e6..00000000000000 --- a/files/de/glossary/crlf/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: CRLF -slug: Glossary/CRLF -tags: - - CR - - CRLF - - Glossar - - Infrastructure - - LF - - Wagenrücklauf - - Zeilenvorschub -translation_of: Glossary/CRLF ---- -

CR und LF sind Steuerzeichen oder Bytecode, die benutzt werden, um einen Zeilenumbruch in einer Textdatei darzustellen.

- -
    -
  • CR = Carriage Return (Wagenrücklauf, \r, 0x0D in Hexadezimaldarstellung, 13 in Dezimaldarstellung) — bewegt den Cursor an den Beginn einer Zeile, ohne eine in die nächste Zeile vorzurücken.
    • -
  • LF = Line Feed (Zeilenvorschub, \n, 0x0A in Hexadezimaldarstellung, 10 in Dezimaldarstellung) — bewegt den Cursor in die nächste Zeile, ohne an den Beginn der Zeile zurückzukehren.
    • -
- -

Ein Wagenrücklauf (CR), auf den ein Zeilenvorschub (LF) direkt folgt (CRLF, \r\n, oder 0x0D0A) bewegt den Cursor in die nächste Zeile und danach an den Beginn der Zeile.

- -

Mehr dazu

- -

Allgemeinwissen

- -
    -
  • {{interwiki("Newline")}} bei Wikipedia
    • -
  • {{interwiki("Carriage return")}} bei Wikipedia
    • -
diff --git a/files/de/glossary/css/index.html b/files/de/glossary/css/index.html deleted file mode 100644 index c6461c50590c97..00000000000000 --- a/files/de/glossary/css/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: CSS -slug: Glossary/CSS -tags: - - CSS - - CodingScripting - - Glossar - - Web -translation_of: Glossary/CSS ---- -

CSS (Cascading Style Sheets) ist eine deklarative Sprache, die das Aussehen von Webseiten im {{glossary("browser","Browser")}} steuert. Der Browser wendet die CSS-Style-Deklarationen auf gewählte Elemente an, um sie in geeigneter Weise darzustellen. Eine Style-Deklaration beinhaltet die Eigenschaften und deren Werte, die bestimmen, wie eine Webseite aussieht.

- -

CSS ist eine der drei Kern-Webtechnologien; zusammen mit {{Glossary("HTML")}} und {{Glossary("JavaScript")}}. CSS ändert gewöhnlich das Aussehen von {{Glossary("Element","HTML-Elementen")}}, kann aber auch mit anderen Auszeichnungssprachen wie {{Glossary("SVG")}} oder {{Glossary("XML")}} verwendet werden.

- -

Eine CSS-Regel ist ein Satz von {{Glossary("CSS Property","Eigenschaften")}}, verbunden mit einem {{Glossary("selector","Selektor")}}. Hier ist ein Beispiel in dem jeder HTML-Paragraph gelb mit schwarzem Hintergrund eingefärbt wird:

- -
/* Der Selektor "p" zeigt an, dass alle paragraph-Elemente im Dokument betroffen sein werden */
-p {
-  /* Die "color"-Eigenschaft definiert die Farbe, in diesem Fall gelb (englisch "yellow") */
-  color: yellow;
-
-  /* Die "background-color"-Eigenschaft definiert die Hintergrundfarbe, in diesem Fall schwarz (englisch "black") */
-  background-color: black
-}
- -

"Cascading" bezieht sich auf die Regeln, welche die Priorisierung der Selektoren festlegen, um das Aussehen einer Seite zu ändern. Dies ist ein sehr wichtiges Feature, da eine komplexe Website tausende von CSS-Regeln besitzen kann.

- -

Erfahre mehr

- -

Allgemeinwissen

- -
    -
  • CSS lernen
    • -
  • {{interwiki("wikipedia", "CSS")}} auf Wikipedia
    • -
- -

Technische Referenz

- - - -

Lerne CSS kennen

- - diff --git a/files/de/glossary/css_preprocessor/index.html b/files/de/glossary/css_preprocessor/index.html deleted file mode 100644 index 3182b5b4ac9645..00000000000000 --- a/files/de/glossary/css_preprocessor/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CSS-Präprozessor -slug: Glossary/CSS_preprocessor -tags: - - CSS -translation_of: Glossary/CSS_preprocessor -original_slug: Glossary/CSS_Praeprozessor ---- -

Ein CSS-Präprozessor ist ein Programm zur Generierung von {{Glossary("CSS")}} aus der des Präprozessors eigenen {{Glossary("Syntax")}}. Es gibt eine Vielzahl von CSS Präprozessoren aus denen man wählen kann. Die meisten davon stellen Funktionen zur Verfügung, die in reinem CSS nicht verfügbar sind, wie beispielsweise Mixins, Nesting Selectors, Inheritance Selectors und andere. Diese Funktionen verhelfen der Struktur des CSS zu mehr Lesbarkeit und besserer Pflegbarkeit.

- -

Um einen CSS-Präprozessor nutzen zu können, müssen Sie, lokal oder auf Ihrem Web{{Glossary("server")}}, einen CSS-Kompilierer installieren.

- -

Mehr erfahren

- -

Allgemeinwissen

- -

Hier sind einige der beliebtesten CSS-Präprozessoren:

- - diff --git a/files/de/glossary/data_structure/index.html b/files/de/glossary/data_structure/index.html deleted file mode 100644 index c351242bfee4b9..00000000000000 --- a/files/de/glossary/data_structure/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Datenstruktur -slug: Glossary/Data_structure -tags: - - Datenstruktur - - Glossar -translation_of: Glossary/Data_structure ---- -

Datenstruktur ist ein bestimmter Weg um Daten zu organisieren, so dass diese effizient verwendet werden können.

- -

Mehr erfahren

- -

Allgemeinweissen

- -
    -
  • {{interwiki("wikipedia", "Datenstruktur", "Datenstruktur")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/denial_of_service/index.html b/files/de/glossary/denial_of_service/index.html deleted file mode 100644 index c2dcc40c5c4850..00000000000000 --- a/files/de/glossary/denial_of_service/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Denial of Service -slug: Glossary/Denial_of_Service -tags: - - Gloss - - Security -translation_of: Glossary/Denial_of_Service ---- -

{{page("/de/docs/Glossary/DOS_attack")}}

diff --git a/files/de/glossary/dhtml/index.html b/files/de/glossary/dhtml/index.html deleted file mode 100644 index 7dcd6328aa239e..00000000000000 --- a/files/de/glossary/dhtml/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: DHTML -slug: Glossary/DHTML -tags: - - DHTML - - Glossar - - HTML -translation_of: Glossary/DHTML ---- -

DHTML (Dynamisches {{glossary("HTML")}}) bezieht sich auf den Code in interaktiven Webseiten, die keine Plugins benötigen wie {{Glossary("Adobe Flash","Flash")}} oder {{Glossary("Java")}}. DHTML verbindet die gemeinsame Funktionalität von {{Glossary("HTML")}}, {{Glossary("CSS")}}, dem {{Glossary("DOM")}}, und {{Glossary("JavaScript")}}.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "Dynamisches_HTML", "DHTML")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/dns/index.html b/files/de/glossary/dns/index.html deleted file mode 100644 index 942c488a842258..00000000000000 --- a/files/de/glossary/dns/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: DNS -slug: Glossary/DNS -translation_of: Glossary/DNS ---- -

DNS (Domain Name System) übersetzt einfach zu merkende {{glossary("domain name","Domainnamen")}} in die numerische {{Glossary("IP address","IP-Addresse")}}, die benötigt wird um einen Computer im {{Glossary("Internet")}} oder privaten Netzwerk zu finden.

- -

Mehr lernen

- -

Allgemeines Wissen

- - diff --git a/files/de/glossary/doctype/index.html b/files/de/glossary/doctype/index.html deleted file mode 100644 index df8b79fffbe750..00000000000000 --- a/files/de/glossary/doctype/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Doctype -slug: Glossary/Doctype -translation_of: Glossary/Doctype ---- -

Die Präambel "<!DOCTYPE html>" befindet sich am Anfang aller HTML-Dokumente. Der einzige Nutzen dieser besteht darin {{Glossary("Browser")}} darin zu hindern, in den sogenannten “quirks mode” zu wechseln, während das Dokument gerendert wird. Der doctype <!DOCTYPE html> stellt sicher, dass der Browser so gut wie möglich versucht die relevanten Spezifikationen zu verwenden, anstatt einen anderen Rendermodus zu verwenden, welcher möglicherweise nicht kompatibel mit einigen Spezifikationen ist.

- -

Lerne mehr

- -

Generelles Wissen

- - - -

Technische Referenzen

- -
    -
  • Document.doctype, eine JavaScript Methode, welche den aktuellen doctype widergibt
    • -
diff --git a/files/de/glossary/dom/index.html b/files/de/glossary/dom/index.html deleted file mode 100644 index e4a788dc28b51a..00000000000000 --- a/files/de/glossary/dom/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: DOM -slug: Glossary/DOM -tags: - - CodingScripting - - DOM - - Glossar -translation_of: Glossary/DOM ---- -

Das DOM (Document Object Model) ist eine {{Glossary("API")}}, die ein {{Glossary("HTML")}} oder {{Glossary("XML")}} Dokument darstellt und damit interagiert. Das DOM ist ein Modell, das im {{Glossary("Browser")}} geladen wird und stellt ein Dokument als einen Knotenbaum dar, in dem jeder Knoten einen Teil des Dokuments darstellt (z.B. ein {{Glossary("Element")}}, einen Text oder Kommentar).

- -

Das DOM ist eine der am häufigsten genutzten {{Glossary("API")}}s im {{Glossary("World Wide Web", "Web")}}, weil sie dem Browser erlaubt, auf ein Dokument zuzugreifen und damit zu interagieren. Knoten können erstellt, bewegt, geändert oder gelöscht werden. Event Handler können erstellt werden, um auf bestimmte Ereignisse zu warten.

- -

In den frühen Jahren des Internets gab es noch keine Spezifikation des DOM. Als die Browser begannen, JavaScript zu implementieren, wurde das DOM erschaffen. Diese erste Variante des DOM wird meistens DOM 0 genannt. Heute pflegt das WHATWG den DOM Living Standard.

- -

Erfahre mehr

- -

Allgemeines

- -
    -
  • {{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}} on Wikipedia
    • -
- -

Technische Informationen

- - diff --git a/files/de/glossary/domain_name/index.html b/files/de/glossary/domain_name/index.html deleted file mode 100644 index cedc53fd2b1865..00000000000000 --- a/files/de/glossary/domain_name/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Domain-Name -slug: Glossary/Domain_Name -tags: - - Domain-Name - - Glossary - - Protocols - - WebMechanics -translation_of: Glossary/Domain_name ---- -

Ein Domain-Name ist die Adresse einer {{Glossary("Internet")}}-Webseite. Er wird in {{Glossary("URL","URLs")}} benutzt, um den Server zu identifizieren, zu dem eine bestimmte Webseite gehört. Der Domain-Name besteht aus einer hierarchischen Folge von durch Punkte getrennte Namen/Bezeichnungen, die auf eine {{glossary("TLD","extension")}} endet.

- -

Mehr lernen

- -

Allgemeine Vermerke

- - diff --git a/files/de/glossary/dos_attack/index.html b/files/de/glossary/dos_attack/index.html deleted file mode 100644 index de5c126a637369..00000000000000 --- a/files/de/glossary/dos_attack/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: DoS-Attacken -slug: Glossary/DOS_attack -tags: - - Gloss - - Security -translation_of: Glossary/DOS_attack ---- -

DoS (engl.: Denial of Service, "Verweigerung des Dienstes") ist ein Netzwerkangriff, die eine ordnungsgemäße verwendung von {{glossary("server")}}-Ressourcen verhindert, indem der Server mit Anfragen überflutet wird.

- -

Computer haben limitierte Ressourcen, zum Beispiel in der Rechenleistung oder im Speicher. Wenn diese überlastet sind, können Programme stehen bleiben oder abstürzen, wodurch sie nicht mehr verfügbar sind. Eine DoS-Attacke nutzt verschiedene Techniken zur Überlastung dieser Ressourcen, die einen Zugriff für normale Nutzer unmöglich machen oder den Server zumindest im Schneckentempo laufen lassen.

- -

Arten von DoS-Attacken

- -

DoS-Attacken lassen sich weniger Arten zuordnen, sondern eher kategorisieren. Hier sind einige solcher Kategorien der DoS-Attacken:

- -
    -
  • Bandbreiten-Attacken
    • -
  • Anfragenüberflutung
    • -
  • SYN-Flood-Attacken
    • -
  • ICMP-Flood-Attacken
    • -
  • Peer-to-Peer Attacken
    • -
  • DoS-Attacken mit dem Ziel einer dauerhaften Schädigung (permanent DoS)
    • -
  • Anwendungslevel-basierte Überlastung, (application level flood attack, Ziel sind nur bestimmte Teile einer Seite/Anwendung)
    • -
- -

Erfahren Sie mehr...

- -
    -
  • {{interwiki("wikipedia", "Denial-of-service_attack", "Denial-of-service attack")}} bei Wikipedia
    • -
  • Denial-of-service on OWASP
    • -
  • {{Glossary("Distributed Denial of Service","DDoS")}}
    • -
diff --git a/files/de/glossary/ecma/index.html b/files/de/glossary/ecma/index.html deleted file mode 100644 index 1221870ff753f3..00000000000000 --- a/files/de/glossary/ecma/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: ECMA -slug: Glossary/ECMA -tags: - - Glossar - - Stub - - WebMechanics -translation_of: Glossary/ECMA ---- -

Ecma International (ehemals ECMA - European Computer Manufacturers Association) ist eine Normungsorganisation, die Standards für Computer-Hardware, Kommunikationstechnik und Programmiersprachen entwickelt.

- -

Im Web ist die Organisation deswegen bekannt, weil sie die ECMA-262 Spezifikation (aka. {{Glossary("ECMAScript")}}) betreut, die die Kernspezifikation von {{Glossary("JavaScript")}} ist.

- -

Mehr lernen

- - diff --git a/files/de/glossary/ecmascript/index.html b/files/de/glossary/ecmascript/index.html deleted file mode 100644 index 49849dbca51c23..00000000000000 --- a/files/de/glossary/ecmascript/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ECMAScript -slug: Glossary/ECMAScript -tags: - - Glossar -translation_of: Glossary/ECMAScript ---- -

ECMAScript ist die Skriptsprache, auf welcher {{glossary("JavaScript")}} basiert. Ecma International ist mit der Normung von ECMAScript befaßt.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "ECMAScript")}} auf Wikipedia
    • -
- -

Technische Referenz

- - diff --git a/files/de/glossary/element/index.html b/files/de/glossary/element/index.html deleted file mode 100644 index 49afdf429975dc..00000000000000 --- a/files/de/glossary/element/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Element -slug: Glossary/Element -tags: - - CodingScripting - - Glossar - - HTML -translation_of: Glossary/Element ---- -

Ein Element ist ein Teil einer Webseite. In XML und HTML kann ein Element Daten, Text, Bilder, oder auch gar nichts enthalten. Ein typisches Element besteht aus einem öffnenden Tag mit einigen Attributen, dahinter etwas Text und einem schließenden Tag.
- Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

- -

Elemente und Tags sind nicht dasselbe. Tags beschreiben ein Element im Quellcode, wobei ein Element ein Teil des {{Glossary("DOM")}} ist, dem Document Model, mit dessen Hilfe eine Seite im {{Glossary("Browser")}} angezeigt werden kann.

- -

Siehe auch

- - diff --git a/files/de/glossary/empty_element/index.html b/files/de/glossary/empty_element/index.html deleted file mode 100644 index c050756a2e9730..00000000000000 --- a/files/de/glossary/empty_element/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Leeres Element -slug: Glossary/Empty_element -tags: - - CodingScripting - - Fortgeschritten - - Glossar -translation_of: Glossary/Empty_element -original_slug: Glossary/Leeres_Element ---- -

Ein Leeres Element ist ein {{Glossary("Element")}} aus HTML, SVG oder MathML, welches keine untergeordneten Elemente besitzen kann.

- -

Die Spezifikationen von HTML, SVG, und MathML geben sehr genau vor, welches Element was beinhalten kann. Viele Kombinationen ergeben keinen Sinn, zum Beispiel ein {{HTMLElement("audio")}} Element innerhalb eines {{HTMLElement("hr")}} Elements.

- -

In HTML ist es ungültig, solche Elemente zu schließen. Ein Beispiel: <input type="text"></input> ist in HTML ungültig.

- -

Die folgenden Elemente sind leere Elemente:

- -
    -
  • {{HTMLElement("area")}}
    • -
  • {{HTMLElement("base")}}
    • -
  • {{HTMLElement("br")}}
    • -
  • {{HTMLElement("col")}}
    • -
  • {{HTMLElement("embed")}}
    • -
  • {{HTMLElement("hr")}}
    • -
  • {{HTMLElement("img")}}
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("keygen")}}(HTML 5.2 Entwurf entfernt)
    • -
  • {{HTMLElement("link")}}
    • -
  • {{HTMLElement("meta")}}
    • -
  • {{HTMLElement("param")}}
    • -
  • {{HTMLElement("source")}}
    • -
  • {{HTMLElement("track")}}
    • -
  • {{HTMLElement("wbr")}}
    • -
diff --git a/files/de/glossary/encapsulation/index.html b/files/de/glossary/encapsulation/index.html deleted file mode 100644 index b763a3ad2f442e..00000000000000 --- a/files/de/glossary/encapsulation/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Datenkapselung -slug: Glossary/Encapsulation -tags: - - Datenkapselung -translation_of: Glossary/Encapsulation -original_slug: Glossary/Datenkapselung ---- -

Datenkapselung bezeichnet den Vorgang des Verbergens von Daten und {{glossary("function","functions")}} (Funktionen) in eine Komponente, wobei der Zugriff darauf beschränkt wird, es wird eine Art "Blackbox" für das {{glossary("object")}} (Objekt) erstellt. Auf diese Weise braucht der Anwender solch einer Klasse nur das Interface zu kennen, also die Daten und Funktionen die nach außen hin sichtbar sind, und nicht die verborgene Implementierung.

- -

General knowledge

- - diff --git a/files/de/glossary/falsy/index.html b/files/de/glossary/falsy/index.html deleted file mode 100644 index 29ee01e6798983..00000000000000 --- a/files/de/glossary/falsy/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Falsy -slug: Glossary/Falsy -tags: - - CodingScripting - - Glossary - - JavaScript -translation_of: Glossary/Falsy ---- -

Ein falsy-Wert ist ein Wert welcher zu false übersetzt, wenn er in einem {{Glossary("Boolean", "booleschen")}} Kontext ausgewertet wird.

- -

{{Glossary("JavaScript")}} nutzt {{Glossary("Type_Conversion", "Type Conversion")}} (Typ-Konvertierung) um für beliebige Werte eine boolesche Entsprechung zu erzwingen, wenn der Kontext es erfordert, beispielsweise bei {{Glossary("Conditional", "Conditionals")}} (Bedingungen) und {{Glossary("Loop", "Loops")}} (Schleifen).

- -
-

Es gibt 8 falsy-Werte in JavaScript.

- -

Das heißt, wenn JavaScript einen Booleschen Wert erwartet und einen der folgenden erhält, es diesen als “falsy” auswerten wird.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
falseDas Schlüsselwort false
0Die Zahl zero
-0Die negative Zahl zero
0nBigInt, sofern es als Boolescher Wert genutzt wird, folgt den gleichen Regeln wie eine Number. 0n ist falsy.
"", '', `` -

Dies ist ein leerer String (die Länge des Strings ist null). Strings in JavaScript können mit doppelten Anführungszeichen "", einfachen Anführungszeichen '', oder Template literals `` definiert werden.

-
{{Glossary("null")}}null - die Abwesenheit irgendeines Wertes
{{Glossary("undefined")}}undefined - der primitive Wert
{{Glossary("NaN")}}NaN - not a number (keine Zahl)
- -

Beispiele

- -

Beispiele von falsy-Werten in JavaScript (welche zu false übersetzen und somit folgende if Konditionen nicht erfüllen):

- -
if (false)
-if (null)
-if (undefined)
-if (0)
-if (0n)
-if (NaN)
-if ('')
-if ("")
-if (``)
-if (document.all)
- -
-

document.all wurde in der Vergangenheit zur Browsererkennung verwendet und die HTML-Spezifikation definiert hier eine absichtliche Verletzung des ECMAScript-Standards, um eine Kompatibilität mit Legacy-Code zu gewährleisten (if (document.all) { // Internet Explorer code here } oder nutzen von document.all ohne vorher auf dessen Existenz zu prüfen: document.all.foo).

-
- -

Der logische AND Operator, &&

- -

Falls das erste Objekt falsy ist, wird dieses zurückgegeben

- -
let pet = false && "dog";
-
-// ↪ false
-
- -

Manchmal begegnet man auch der Schreibweise falsey, obwohl im Englischen die Bildung von Adjektiven mit -y zu einem Wegfall des Buchstaben e am Ende des Wortes führt (z.B. noise => noisy, ice => icy, shine => shiny).

- -

Spezikationen

- - - - - - - - - - - - -
Spezifikation
{{SpecName("ESDraft", "#sec-toboolean", "ToBoolean abstract operation")}}
- -

Mehr erfahren

- -
    -
  • {{Glossary("Truthy")}}
    • -
  • {{Glossary("Boolean")}}
    • -
- -

{{QuickLinksWithSubpages("/de/docs/Glossar")}}

diff --git a/files/de/glossary/firefox_os/index.html b/files/de/glossary/firefox_os/index.html deleted file mode 100644 index a1dfa3e467b19e..00000000000000 --- a/files/de/glossary/firefox_os/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Firefox OS -slug: Glossary/Firefox_OS -tags: - - B2G - - Boot2Gecko - - Firefox OS - - Glossar - - Infrasktruktur - - Intro -translation_of: Glossary/Firefox_OS ---- -

Firefox OS ist Mozillas mobiles Betriebssystem, basierend auf Linux und {{glossary("Mozilla Firefox","Firefox's")}} leistungsstarken {{glossary("Gecko")}} Rendering-Engine. Firefox OS besteht hauptsächlich aus {{glossary("Gaia")}}, {{glossary("Gecko")}}, und {{glossary("Gonk")}}.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "Firefox OS")}} auf Wikipedia
    • -
- -

Technische Referenz

- - diff --git a/files/de/glossary/firewall/index.html b/files/de/glossary/firewall/index.html deleted file mode 100644 index c31ebf6f11b52e..00000000000000 --- a/files/de/glossary/firewall/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Firewall -slug: Glossary/firewall -tags: - - Computernetzwerk - - DDoS - - Firewall - - Glossar - - Sicherheit -translation_of: Glossary/firewall ---- -

Eine Firewall ist ein System das Netzwerkverkehr filtert. Es kann diesen entweder erlauben oder blockieren, mithilfe von einigen festgelegten Regeln. Zum Beispiel kann sie eingehende Verbindungen im Bezug auf einen bestimmten Port blockieren oder ausgehende Verbindungen zu einer bestimmten IP-Addresse.

- -

Firewalls können so einfach sein wie ein einziges Stück Software oder komplexer, wie in etwa eine dedizierte Maschine dessen einzige Funktion ist, sich wie eine Firewall zu verhalten.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Firewall (computing)")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/first-class_function/index.html b/files/de/glossary/first-class_function/index.html deleted file mode 100644 index 018ab92f5342ef..00000000000000 --- a/files/de/glossary/first-class_function/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Funktion erster Klasse -slug: Glossary/First-class_Function -translation_of: Glossary/First-class_Function -original_slug: Glossary/Funktion_erster-Klasse ---- -

Funktionen, die wie jede andere Variable behandelt werden, bezeichnet man als Funktionen erster Klasse.

- -

In einer Programmiersprache, die über Funktionen erster Klasse verfügt, kann so eine Funktion als Argument anderen Funktionen übergeben werden, als Wert einer Variable zugewiesen, oder von einer anderen Funktion zurückgegeben werden.

- -

Beispiel | Zuweisung einer Funktion an eine Variable

- -

JavaScript

- -
const foo = function() {
-   console.log("foobar");
-}
-// Aufruf der Funktion über die Variable.
-foo();
-
- -

Wir weisen der Variable 'foo' eine anonyme Funktion, die den String "foobar" in der Konsole ausgibt, zu. Dann rufen wir diese Funktion über die Variable auf, indem wir ein Paar Klammern an das Ende hinzufügen.

- -
-

Auch wenn die Funktion benannt ist, kann der Name der Variable, der sie zugewiesen ist, benutzt werden, um die Funktion aufzurufen. Funktionen zu benennen wirkt sich nicht auf die Weise, wie sie aufgerufen wird aus, kann aber beim Debuggen hilfreich sein

-
- -

Beispiel | Übergeben einer Funktion als Argument

- -

JavaScript

- -
function sagHallo() {
-   return "Hallo, ";
-}
-function gruessen(gruss, name) {
-  console.log(gruss() + name);
-}
-// Übergebe `sagHallo` als Argument an die `gruessen` Funktion.
-gruessen(sagHallo, "JavaScript!");
-
- -

Wir übergeben unsere sagHallo() Funktion als ein Argument an die gruessen() Funktion. Auf diese Art behandeln wir die Funktion als Wert.

- -
-

Die Funktion, die wir als Argument einer anderen Funktion übergeben wird als Callback function bezeichnet. sagHallo() ist eine Callback function.

-
- -

Example | Return a function

- -

JavaScript

- -
function sayHello() {
-   return function() {
-      console.log("Hello!");
-   }
-}
-
- -

In this example; We need to return a function from another function - We can return a function because we treated function in JavaScript as a value.

- -
-

A function that returns a function called Higher-Order Function

-
- -

Back to our example; Now, we need to invoke sayHello function and its returned Anonymous Function. To do so, we have two ways:

- -

1- Using a variable

- -
const sayHello = function() {
-   return function() {
-      console.log("Hello!");
-   }
-}
-const myFunc = sayHello();
-myFunc();
-
- -

This way, it returns the Hello! message.

- -
-

You have to use another variable. If you invoked sayHello directly, it would return the function itself without invoking its returned function.

-
- -

2- Using double parentheses

- -
function sayHello() {
-   return function() {
-      console.log("Hello!");
-   }
-}
-sayHello()();
-
- -

We are using double parentheses ()() to invoke the returned function as well.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia
    • -
diff --git a/files/de/glossary/flex/index.html b/files/de/glossary/flex/index.html deleted file mode 100644 index 80c6cf3ea7b8d4..00000000000000 --- a/files/de/glossary/flex/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Flex -slug: Glossary/Flex -translation_of: Glossary/Flex ---- -

flex ist ein neuer, zur CSS-{{cssxref("display")}}-Eigenschaft hinzugefügter Wert. Wie auch inline-flex macht er das Element, auf das er angewendet wird, zu einem {{glossary("flex container")}} und jedes Kind des Elements wird zu einem {{glossary("flex item")}}. Die Elemente sind dann Teil des Flex-Layouts und alle der Eigenschaften, die im „CSS Flexible Box Layout Module“ definiert sind, können angewandt werden.

- -

Die flex-Eigenschaft ist eine Kurzform der Flexbox-Eigenschaften flex-grow, flex-shrink und flex-basis.

- -

Zusätzlich kann <flex> auf eine flexible Länge im CSS-Grid-Layout verweisen.

- -

Mehr dazu

- -

Eigenschaftsreferenz

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

Weiterführende Lektüre

- - diff --git a/files/de/glossary/flexbox/index.html b/files/de/glossary/flexbox/index.html deleted file mode 100644 index 51175bfd1dbb5c..00000000000000 --- a/files/de/glossary/flexbox/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Flexbox -slug: Glossary/Flexbox -tags: - - Flexibles Boxmodul - - flexbox -translation_of: Glossary/Flexbox ---- -

Flexbox ist der gängige Begriff für das CSS Flexible Box Layout Module, ein Layoutmodul zur eindimensionalen Darstellung von Elementen – als Zeile oder Spalte.

- -

In der Spezifikation wird die Flexbox als Layoutmodel für Schnittstellendesign/UI Design beschrieben. Die Kernfunktion der Flexbox besteht darin, Elemente im flexiblen Layout zu vergrößern und zu verkleinern. Bereiche können Elementen direkt zugewiesen werden, auf mehrere Elemente verteilt oder auch um sie herum angeordnet werden.

- -

Flexbox ermöglicht außerdem die Anordnung von Elementen auf der Haupt- oder Querachse, wodurch ein hohes Maß an Kontrolle auch über gruppierte Elemente hinsichtlich Größe und Ausrichtung ermöglicht wird.

- -

Learn more

- -

Property reference

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

Further reading

- - - - diff --git a/files/de/glossary/forbidden_header_name/index.html b/files/de/glossary/forbidden_header_name/index.html deleted file mode 100644 index 0b616b23d1a042..00000000000000 --- a/files/de/glossary/forbidden_header_name/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Verbotener Header-Name -slug: Glossary/Forbidden_header_name -tags: - - Fetch - - Glossar - - Glossary - - HTTP - - Headers - - Verboten - - Wörterverzeichnis -translation_of: Glossary/Forbidden_header_name -original_slug: Glossary/verbotener_header_name ---- -

Ein verbotener Header-Name, ist ein HTTP header Name, welcher nicht programmatisch modifiziert werden kann; that cannot be modified programmatically; speziell, ein HTTP Anfragen-Header Name.

- -

Konstrast mit {{Glossary("Forbidden response header name")}}.

- -

Diese sind verboten, so, dass der User-Agent komplette Kontrolle über sie behällt. Namen die mit `Sec-` anfangen, sind reserviert, um neue Header zu erstellen, die sicher von {{glossary("API","APIs")}} die Fetch nutzen sind, welche Entwicklern Kontrolle über Header, wie {{domxref("XMLHttpRequest")}}, gibt.

- -

Ein verbotener Header-Name fängt mit Proxy- oder Sec- an, oder ist einer der folgenen:

- -
    -
  • Accept-Charset
    • -
  • Accept-Encoding
    • -
  • Access-Control-Request-Headers
    • -
  • Access-Control-Request-Method
    • -
  • Connection
    • -
  • Content-Length
    • -
  • Cookie
    • -
  • Cookie2
    • -
  • Date
    • -
  • DNT
    • -
  • Expect
    • -
  • Host
    • -
  • Keep-Alive
    • -
  • Origin
    • -
  • Proxy-
    • -
  • Sec-
    • -
  • Referer
    • -
  • TE
    • -
  • Trailer
    • -
  • Transfer-Encoding
    • -
  • Upgrade
    • -
  • Via
    • -
- -
-

Beachte: Der User-Agent-Header ist per Spezifikation nicht mehr verboten — siehe die Verbotene Header-Namen Liste (das wurde in Firefox 43 implementiert,) also kann nun in einem Fetch Headers Objekt, per XHR setRequestHeader(), etc. gesetzt werden.

-
diff --git a/files/de/glossary/ftp/index.html b/files/de/glossary/ftp/index.html deleted file mode 100644 index 735d377de80ed0..00000000000000 --- a/files/de/glossary/ftp/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: FTP -slug: Glossary/FTP -tags: - - FTP - - Glossar - - Protokoll -translation_of: Glossary/FTP ---- -

FTP (File Transfer Protocol) war für viele Jahre das Standard {{glossary("Protokoll")}} um Dateien von einem {{glossary("Host")}} zu einem anderen über das Internet zu übertragen. Zunehmend jedoch, erlauben Teams und Hosting-Konten kein FTP und setzen stattdessen auf ein Versionskontrollsystem wie Git. FTP ist auf älteren Hosting-Konten noch wiederzufinden, man kann jedoch mit Sicherheit sagen, dass FTP nicht mehr die empfohlene Vorgehensweise ist.

- -

Mehr erfahren

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/gif/index.html b/files/de/glossary/gif/index.html deleted file mode 100644 index 65257a451cda8e..00000000000000 --- a/files/de/glossary/gif/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: GIF -slug: Glossary/gif -tags: - - Glossary - - Media -translation_of: Glossary/gif ---- -

GIF (Graphics Interchange Format, deutsch: Grafikaustauschformat) ist ein Bildformat, das eine verlustfreie Komprimierung verwendet und für Animationen genutzt werden kann. Ein GIF nutzt bis zu 8 Bits pro Pixel und maximal 256 Farben aus dem 24-Bit-Farbenbereich.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "GIF")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/git/index.html b/files/de/glossary/git/index.html deleted file mode 100644 index 8745e928575e2f..00000000000000 --- a/files/de/glossary/git/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Git -slug: Glossary/Git -translation_of: Glossary/Git ---- -

Git ist ein freies, quelloffenes und verteiltes System zur Verwaltung von Quellcode (englisch Source Code Management, {{Glossary("SCM", "SCM", 1)}}). Es vereinfacht verteilten Softwareentwicklungs-Teams, mit dem Quellcode eines Projekts umzugehen. Es unterscheidet sich von anderen SCM-Systemen darin, dass häufig auftretende Operationen wie das Erzeugen eines Branches oder Commits auf einem lokalen Rechner möglich sind, ohne das Master-Repository verändern zu müssen oder auch nur schreibenden Zugang dazu zu haben.

- -

Mehr erfahren

- -

Allgemeines Wissen

- - diff --git a/files/de/glossary/gpu/index.html b/files/de/glossary/gpu/index.html deleted file mode 100644 index cec1af42706e58..00000000000000 --- a/files/de/glossary/gpu/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: GPU -slug: Glossary/GPU -tags: - - Glossar - - Infrastruktur -translation_of: Glossary/GPU ---- -

Die GPU (Graphics Processing Unit, deutsch Grafikverarbeitungseinheit) ist eine Computerkomponente, die der CPU (Central Processing Unit, deutsch zentrale Verarbeitungseinheit) ähnlich ist. Sie ist auf das Zeichnen von Graphiken (sowohl 2D als auch 3D) auf einem Monitor spezialisiert.

diff --git a/files/de/glossary/graceful_degradation/index.html b/files/de/glossary/graceful_degradation/index.html deleted file mode 100644 index e40f583b5ada9a..00000000000000 --- a/files/de/glossary/graceful_degradation/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Graceful degradation -slug: Glossary/Graceful_degradation -tags: - - Accessibility - - Design - - Glossary -translation_of: Glossary/Graceful_degradation ---- -

Graceful degradation (dt. etwa „Würdevolle Herabstufung“) ist eine Design-Philosophie, bei der es darum geht, moderne Websites und -anwendungen zu entwickeln, die in den neuesten {{Glossary("Browser", "Browsern")}} funktionieren, den Nutzer*innen von älteren Browsern aber trotzdem die grundlegenden Inhalte und Funktionen zur Verfügung zur stellen, ohne jedoch an das ursprüngliche Nutzungserlebnis heranzureichen.

- -

Fehlende Voraussetzungen werden oft durch {{Glossary("Polyfill", "Polyfills")}} hinzugefügt, aber akzeptable Alternativen für Funktionalitäten wie Gestaltung und Layout sollten wo möglich bereitgestellt werden. Beispiele dafür sind die {{Glossary("CSS")}}-Kaskade oder {{Glossary("HTML")}}-Rückfalloptionen.

- -

Graceful degredation ist eine nützliche Technik, die es Webentwicklern erlaubt, sich auf die Entwicklung bestmöglicher Websites zu konzentrieren, und gleichzeitig die Probleme zu berücksichtigen, die auftreten können, wenn verschiedene unbekannte {{Glossary("User agent", "User Agents")}} auf die Webseiten zugreifen.

- -

{{Glossary("Progressive enhancement")}} ist ein verwandtes Konzept, das sich aber von Graceful degredation unterscheidet und oft als Gegensatz dazu betrachtet wird. Tatsächlich haben beide Ansätze ihre Gültigkeit und können sich oft gegenseitig ergänzen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Graceful degradation")}} auf Wikipedia
    • -
- - diff --git a/files/de/glossary/grid/index.html b/files/de/glossary/grid/index.html deleted file mode 100644 index 02dcb58b4f4466..00000000000000 --- a/files/de/glossary/grid/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Grid -slug: Glossary/Grid -translation_of: Glossary/Grid ---- -

Um ein CSS Grid definieren zu können verwendet man die grid Value für die {{cssxref("display")}} Property. Man kann Spalten und Reihen mit den {{cssxref("grid-template-rows")}} und {{cssxref("grid-template-columns")}} Propertys definieren.

- -

Das Grid welches man mit den Werten definiert hat, beschreibt das explizite Grid.

- -

Falls man Inhalte ausserhalb des expliziten Grids platziert, so erstellt der Grid Algorithmus zusätzliche Reihen und Spalten {{glossary("grid tracks", "tracks")}} um {{glossary("grid item", "grid items")}} zu beinhalten, denn zusätzliche Tracks sind implizierte Grid Tracks. Das implizierte Grid ist das Grid, welches automatisch erstellt wird, während dem vergrössern des Inhaltes

- -

Im Beispiel unten habe ich ein explitzites Grid von drei Spalten und zwei Reihen erstellt. Die dritte Reihe im Grid ist eine implizierte Grid Reihe, welche automatisch erstellt wurde, da es mehr als sechs Div's hat.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 100px 100px;
-}
-
- -
<div class="wrapper">
-   <div>Eins</div>
-   <div>Zwei</div>
-   <div>Drei</div>
-   <div>Vier</div>
-   <div>Fünf</div>
-   <div>Sechs</div>
-   <div>Sieben</div>
-   <div>Acht</div>
-</div>
-
- -

{{ EmbedLiveSample('example', '500', '330') }}

- -

Learn More

- -

Property reference

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid")}}
    • -
  • {{cssxref("grid-template")}}
    • -
- -

Further reading

- - -
diff --git a/files/de/glossary/gutters/index.html b/files/de/glossary/gutters/index.html deleted file mode 100644 index 062ae66c1e8736..00000000000000 --- a/files/de/glossary/gutters/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Gutters -slug: Glossary/Gutters -tags: - - CSS Grid -translation_of: Glossary/Gutters ---- -

Die Zwischenräume zwischen den Inhaltsbereichen sind gutters oder alleys. Diese können im CSS Grid Layout über die Eigenschaften grid-column-gap, grid-row-gap oder grid-gap erstellt werden.

- -

Im folgenden Beispiel haben wir ein dreispaltiges und zweireihiges Grid mit 20-Pixel-Lücken zwischen den Spalten und 20-Pixel-Lücken zwischen den Reihen.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1.2fr);
-  grid-auto-rows: 45%;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-}
-
- -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('example_1', '300', '280') }}

-
- -

In Bezug auf die Gridgröße verhalten sich die Zwischenräume (gaps) wie eine normale Spalte oder Reihe, jedoch kann nichts darin platziert werden. Der Abstand wirkt so, als ob die Gitterlinie an dieser Stelle eine zusätzlichen Platz bekommen hätte, so dass jedes nach dieser Linie platzierte Grid-Element am Ende des Abstandes beginnt.

- -

Die Grid-Gap-Eigenschaften sind nicht das Einzige, was dazu führen kann, dass Reihen oder Spalten überlaufen. Margins, Padding oder die Verwendung der Raumverteilungseigenschaften im Box Alignment können alle zum sichtbaren Spalt beitragen - daher sollten die Grid-Gap-Eigenschaften nicht gleich "der Rastergröße" gesehen werden, es sei denn, Sie wissen, dass Ihr Entwurf nicht mit einer dieser Methoden zusätzlichen Raum geschaffen hat.

- -

Erfahren Sie mehr

- -

Eigenschaftsreferenz

- -
    -
  • {{cssxref("grid-column-gap")}}
    • -
  • {{cssxref("grid-row-gap")}}
    • -
  • {{cssxref("grid-gap")}}
    • -
- -

Weiterführende Informationen

- - diff --git a/files/de/glossary/gzip_compression/index.html b/files/de/glossary/gzip_compression/index.html deleted file mode 100644 index cf6062580fed9b..00000000000000 --- a/files/de/glossary/gzip_compression/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Gzip-Kompression -slug: Glossary/GZip_compression -translation_of: Glossary/GZip_compression ---- -

- -

Gzip ist ein Dateiformat, das für Datenkompression und -dekompression benutzt wird. Es basiert auf dem Deflate-Algorithmus, der es erlaubt Dateien in ihrer Größe zu komprimieren, was einen schnelleren Netzwerktransfer ermöglicht.
- Gzip wird häufig von Webservern und mobilen Browsern unterstützt, was bedeutet, dass Server automatisch Dateien mit Gzip komprimieren bevor sie jene versenden, und Browser dekomprimieren die Dateien sobald sie ebendiese empfangen.

- -

- -

Mehr dazu

- - - - diff --git a/files/de/glossary/hoisting/index.html b/files/de/glossary/hoisting/index.html deleted file mode 100644 index a366fe293a88e8..00000000000000 --- a/files/de/glossary/hoisting/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Hoisting -slug: Glossary/Hoisting -tags: - - CodingScripting - - Glossary - - JavaScript - - hoisted - - hoisting -translation_of: Glossary/Hoisting ---- -

Hoisting (engl. (an)heben, hochziehen, hissen) ist ein Begriff, den Sie in keiner normativen Spezifikation vor ECMAScript® 2015 Language Specification finden werden. Unter Hoisting wird eine allgemeine Denkweise verstanden, wie Ausführungskontexte (insbesondere die Erstellungs- und Ausführungsphasen) in JavaScript funktionieren. Das Konzept kann jedoch zunächst etwas verwirrend sein.

- -

Konzeptionell bedeutet beispielsweise eine strikte Definition von Hoisting, dass Variablen- und Funktionsdeklarationen physisch an die Spitze Ihres Codes gestellt werden, was jedoch nicht das ist was tatsächlich passiert. Stattdessen werden die Variablen- und Funktionsdeklarationen während der Kompilierungsphase in den Speicher gestellt, bleiben aber genau dort, wo Sie sie in Ihrem Code geschrieben haben.

- -

Erfahren Sie mehr

- -

Technisches Beispiel

- -

Wenn JavaScript Funktionsdeklarationen vor der Ausführung eines Codesegments in den Speicher ablegt, können Sie eine Funktion verwenden, bevor Sie sie in Ihrem Code deklarieren. Zum Beispiel:

- -
function catName(name) {
-  console.log("Der Name meiner Katze ist " + name);
-}
-
-catName("Tigger");
-
-/*
-Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Tigger"
-*/
- -

Das Beispiel zeigt an, wie Sie den Code schreiben würden, damit er funktioniert. Nun wollen wir sehen, was passiert, wenn wir die Funktion aufrufen, bevor wir sie schreiben:

- -
catName("Chloe");
-
-function catName(name) {
-  console.log("Der Name meiner Katze ist " + name);
-}
-/*
-Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Chloe"
-*/
- -

Obwohl wir die Funktion zuerst in unserem Code aufrufen, funktioniert der Code auch dann noch, bevor die Funktion geschrieben wird. Dies liegt daran, wie die Kontextausführung in JavaScript funktioniert.

- -

Hoisting funktioniert auch gut mit anderen Datentypen und Variablen. Variablen können vor der Deklaration initialisiert und verwendet werden.

- -

Nur Deklarationen werden gehoistet

- -

JavaScript hoistet nur Deklarationen, keine Initialisierungen. Wenn eine Variable nach ihrer Verwendung deklariert und initialisiert wird, ist der Wert undefined. Zum Beispiel:

- -
console.log(num); // Gibt undefined zurück
-var num;
-num = 6;
- -

Wenn Sie die Variable nach der Verwendung deklarieren, sie jedoch vorher initialisieren, wird der Wert zurückgegeben:

- -
num = 6;
-console.log(num); // Gibt 6 zurück
-var num;
- -

Die beiden folgenden Beispiele zeigen das gleiche Verhalten:

- -

- -
var x = 1; // Initialisiere x
-console.log(x + " " + y); // '1 undefined'
-var y = 2; // Initialisiere y
-
-// Das obige Beispiel wird implizit als das folgende verstanden:
-var x; // Deklariere x
-var y; // Deklariere y
-// Hoisting beendet.
-
-x = 1; // Initialisiere x
-console.log(x + " " + y); // '1 undefined'
-y = 2; // Initialisiere y
- -

Technische Referenz

- -

- -

- - - -

diff --git a/files/de/glossary/html/index.html b/files/de/glossary/html/index.html deleted file mode 100644 index 2de435972f12d2..00000000000000 --- a/files/de/glossary/html/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: HTML -slug: Glossary/HTML -tags: - - Glossary - - HTML - - Web -translation_of: Glossary/HTML ---- -

HTML (HyperText Markup Language) ist eine beschreibende Sprache, die die Struktur von Webseiten definiert.

- -

Geschichte

- -

Im Jahr 1990 definierte Tim Berners-Lee das Konzept von {{glossary("Hypertext")}} als Teil seiner Vision des {{glossary("World Wide Web","Web")}}. Im darauf folgenden Jahr formalisierte er dieses als ein Markup, das hauptsächlich auf {{glossary("SGML")}} basiert. Die {{glossary("IETF")}} spezifizierte HTML 1993 erstmals formal und veröffentlichte nach einigen Entwürfen die Version 2.0 im Jahr 1995. Berners-Lee gründete 1994 die {{glossary("W3C")}}, die das Internet entwickeln sollte. 1996 übernahm W3C die Arbeit an HTML und veröffentlichte die HTML 3.2 Recommendation ein Jahr später. HTML 4.0 wurde 1999 veröffentlicht und wurde zu einem {{glossary("ISO")}}-Standard im Jahr 2000.

- -

Zu dieser Zeit verließ das W3C fast HTML bei dem Gefallen an {{glossary("XHTML")}}, und fragte im Jahre 2004 nach der Gründung einer unabhängigen Gruppe , genannt WHATWG. Dank WHATWG wurde die Arbeit an {{glossary("HTML5")}} fortgesetzt. Die beiden Organisationen veröffentlichten den ersten Entwurf in 2008 und den finalen Standard in 2014.

- -

Konzept und Syntax

- -

Ein HTML-Dokument ist ein Reintextdokument, welches mit Elementen strukturiert wird. Elemente sind mit zusammenpassenden Öffnungs- und Schließungstags umgeben. Jeder Tag beginnt und endet mit eckigen Klammern. Es gibt wenige leere oder void Tags, die keinen Text enthalten können, wie {{htmlelement("img")}}

- -

Man kann HTML-Tags mit Attributen erweitern, welche zusätzliche Information enthalten, welche bestimmt, wie der Browser das Element interpretiert:

- -

Detaile der Structur eines HTML-Elementes

- -

Ein HTML-Document ist normalerweise mit einer .htm-Erweiterung oder einer .html-Erweiterung gespeichert und in einem Webserver bereitgestellt.

- -

Mehr erfahren

- -

Allgemeines Wissen

- -
    -
  • HTML auf Wikipedia
    • -
- -

HTML lernen

- - - -

Technische Referenz

- - diff --git a/files/de/glossary/html5/index.html b/files/de/glossary/html5/index.html deleted file mode 100644 index 76a30142f3ad98..00000000000000 --- a/files/de/glossary/html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: HTML5 -slug: Glossary/HTML5 -tags: - - CodingScripting - - Glossary - - HTML - - HTML5 -translation_of: Glossary/HTML5 ---- -

Die neueste stabile Version von {{Glossary("HTML")}}, HTML5 bringt HTML von einer einfachen Auszeichnungssprache zum Strukturieren eines Dokuments zu einer vollständigen App-Entwicklungsplattform. HTML5 enthält unter anderem neue Elemente und neue {{glossary("JavaScript")}} {{glossary("API","APIs")}}, um den Zugriff auf Speicher, Multimedia und Hardware zu verbessern.

- -

Mehr erfahren

- - diff --git a/files/de/glossary/http/index.html b/files/de/glossary/http/index.html deleted file mode 100644 index e1d279a9179fbf..00000000000000 --- a/files/de/glossary/http/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: HTTP -slug: Glossary/HTTP -tags: - - Anfänger - - Glossar - - HTTP - - Infrastruktur -translation_of: Glossary/HTTP ---- -

HTTP (HyperText Transfer Protocol) ist das Standard {{glossary("protocol", "Protokoll")}}, dass es ermöglicht, Dateien über das {{glossary("World Wide Web","Web")}} zu übertragen. HTTP ist textlich (die gesamte Kouumunikation geschieht in einfachem Text) und zustandslos (Informationen aus vorheriger Kommunikation gehen verloren).

- -
-

Siehe auch

- -
    -
  • HTTP on MDN
    • -
  • {{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} auf Wikipedia
    • -
-
- -

diff --git a/files/de/glossary/https/index.html b/files/de/glossary/https/index.html deleted file mode 100644 index 3f936fd4c37fc7..00000000000000 --- a/files/de/glossary/https/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: HTTPS -slug: Glossary/https -tags: - - Glossary - - HTTPS - - Infrastruktur - - Sicherheit -translation_of: Glossary/https ---- -

HTTPS (HTTP Secure) ist eine verschlüsselte Version des {{Glossary("HTTP")}}-Protokolls. Meistens nutzt es {{Glossary("SSL")}} oder {{Glossary("TLS")}}, um die gesamte Kommunikation zwischen einem Client und einem Server zu verschlüsseln. Diese sichere Verbindung erlaubt Clients, sicher sensible Daten mit dem Server auszutauschen, zum Beispiel Banking-Aktivitäten oder Online-Shopping.

- -

Mehr dazu

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "HTTPS")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/hyperlink/index.html b/files/de/glossary/hyperlink/index.html deleted file mode 100644 index 27486be20abbde..00000000000000 --- a/files/de/glossary/hyperlink/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Hyperlink -slug: Glossary/Hyperlink -tags: - - CodingScripting - - Glossar - - HTML - - Navigation -translation_of: Glossary/Hyperlink ---- -

Hyperlinks verbinden Webseiten oder Datenelemente miteinander. In HTML definieren {{HTMLElement("a")}}-Elemente Hyperlinks von einem Punkt auf einer Webseite (wie einer Zeichenkette oder einem Bild) zu einem anderen Punkt auf einer ander Webseite (oder sogar auf der gleichen Seite).

- -

Mehr dazu

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "Hyperlink", "Hyperlink")}} auf Wikipedia
    • -
  • Der Hyperlinkleitfaden auf MDN
    • -
- -

Technische Referenz

- - - -

Learn about it

- - diff --git a/files/de/glossary/ide/index.html b/files/de/glossary/ide/index.html deleted file mode 100644 index 67e8985e13e525..00000000000000 --- a/files/de/glossary/ide/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: IDE -slug: Glossary/IDE -tags: - - Entwicklungsumgebung - - IDE - - Integrierte Entwicklungsumgebung - - Interaktive Entwicklungsumgebung -translation_of: Glossary/IDE ---- -

Eine integrierte Entwicklungsumgebung (englisch IDE) oder auch interaktive Entwicklungsumgebung ist eine Softwareanwendung, die Programmierern umfangreiche Funktionalitäten für die Softwareentwicklung bereitstellt. Eine IDE besteht normalerweise aus einem Quellcode-Editor sowie Automatisierungswerkzeugen zum Erzeugen und Debuggen/Bereinigen von Code.

- -

Learn more

- -

General knowledge

- -
    -
  • {{interwiki("wikipedia", "Integrated_development_environment", "IDE")}} on Wikipedia
    • -
diff --git a/files/de/glossary/identifier/index.html b/files/de/glossary/identifier/index.html deleted file mode 100644 index c02f326f7d88ff..00000000000000 --- a/files/de/glossary/identifier/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Bezeichner -slug: Glossary/Identifier -tags: - - Beginner - - Glossary - - Sharing -translation_of: Glossary/Identifier ---- -

Eine Sequenz von Zeichen im Code, die eine {{glossary("variable", "Variable")}}, {{glossary("function", "Funktion")}} oder {{glossary("property", "Eigenschaft")}} identifizieren.

- -

In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (oder "$" oder "_") enthalten und dürfen nicht mit einer Ziffer beginnen. Ein Bezeichner unterscheidet sich von einem String darin, dass Strings Daten sind, während ein Bezeichner Teil des Codes ist. In JavaScript gibt es keine Möglichkeit Bezeichner zu Strings zu konvertieren, aber manchmal ist es möglich Strings in Bezeichner zu übersetzen.

- -

Mehr erfahren

- -

Generelles Wissen

- -
    -
  • {{interwiki("wikipedia", "Identifikator#Identifikationssystem", "Bezeichner")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/ietf/index.html b/files/de/glossary/ietf/index.html deleted file mode 100644 index 3e3ed9428baec7..00000000000000 --- a/files/de/glossary/ietf/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: IETF -slug: Glossary/IETF -tags: - - Glossar - - IETF - - Infrastruktur - - Internet -translation_of: Glossary/IETF ---- -

Die Internet Engineering Task Force (IETF) ist eine weltweite Organisation die {{glossary('specification','Spezifikationen')}} entwirft im Bezug auf die Mechanismen des {{glossary("Internets")}}, besonders {{glossary("TCP")}}/{{glossary("IPv6","IP")}} oder die Internet {{glossary("Protocol")}} Suite. Die IETF ist offen, wird von Freiwilligen betrieben und von der Internet Society gesponsert.

- -

Mehr erfahren

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/iife/index.html b/files/de/glossary/iife/index.html deleted file mode 100644 index 6155644aeaa193..00000000000000 --- a/files/de/glossary/iife/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: IIFE -slug: Glossary/IIFE -translation_of: Glossary/IIFE ---- -

Eine IIFE (Immediately Invoked Function Expression) ist eine JavaScript-Funktion, die ausgeführt wird, sobald sie definiert ist.

- -
(function () {
-    statements
-})();
- -

Es handelt sich um ein Entwurfsmuster, das auch als selbstausführende anonyme Funktion bekannt ist und aus zwei Hauptteilen besteht:

- -
    -
  1. Die erste ist die anonyme Funktion mit lexikalischem Umfang, die innerhalb des {{jsxref("Operators/Grouping", "Grouping Operator")}} () eingeschlossen ist. Dies verhindert sowohl den Zugriff auf Variablen innerhalb des IIFE-Idioms als auch die Beeinträchtigung des globalen Geltungsbereichs.
    2. -
  2. Der zweite Teil erzeugt den unmittelbar aufgerufenen Funktionsausdruck (), durch den die JavaScript-Engine die Funktion direkt interpretiert.
    3. -
- -

Beispiele

- -

Die Funktion wird zu einem Funktionsausdruck, der sofort ausgeführt wird. Auf die Variable innerhalb des Ausdrucks kann von außerhalb nicht zugegriffen werden.

- -
(function () {
-    var aName = "Barry";
-})();
-// Variable aName is not accessible from the outside scope
-aName // throws "Uncaught ReferenceError: aName is not defined"
-
- -

Die Zuweisung des IIFE an eine Variable speichert den Rückgabewert der Funktion, nicht die Funktionsdefinition selbst.

- -
var result = (function () {
-    var name = "Barry";
-    return name;
-})();
-// Immediately creates the output:
-result; // "Barry"
- - diff --git a/files/de/glossary/imap/index.html b/files/de/glossary/imap/index.html deleted file mode 100644 index cb1f2ecdb93398..00000000000000 --- a/files/de/glossary/imap/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: IMAP -slug: Glossary/IMAP -translation_of: Glossary/IMAP ---- -

IMAP (Internet Message Access Protocol) ist ein {{Glossary("protocol")}} zum Abrufen und Speichern von Emails. Aktueller als {{Glossary("POP3")}}, erlaubt IMAP auch serverseitig Ordner und Regeln.

- -

Anders als POP3, lässt IMAP multiple und gleichzeitige Verbindungen zu einer Mailbox zu. Clients, die auf eine Mailbox zugreifen, können Informationen erhalten, die Statusänderungen durch andere Clients betreffen. IMAP stellt darüber hinaus einen Modus bereit, mit dem ein Client verbunden bleiben und nach Bedarf Informationen abrufen kann.

- -

Mark Crispin entwickelte IMAP ursprünglich 1986 als Interim Mail Access Protocol. IMAP4 in 1. Überarbeitung ist die aktuelle Version, definiert unter RFC 3501.

- -

Learn more

- -
    -
  • {{RFC(3501)}}
    • -
  • {{Glossary("POP3")}}
    • -
  • {{interwiki("wikipedia", "Internet Message Access Protocol", "IMAP")}} on Wikipedia
    • -
diff --git a/files/de/glossary/index.html b/files/de/glossary/index.html deleted file mode 100644 index ec467e4649f090..00000000000000 --- a/files/de/glossary/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Glossar -slug: Glossary -tags: - - Beginner - - Glossary - - NeedsTranslation - - TopicStub -translation_of: Glossary ---- -

Web-Technologien enthalten eine Menge Fachsprache und Abkürzungen, welche in der Programmierung und in Dokumentationen Anwendung finden. Dieses Glossar bietet Definitionen von Wörtern und Abkürzungen, die du kennen solltest, um das Web zu verstehen und erfolgreich dafür zu entwickeln.

- -

Liste der Einträge

- -

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

- -

Mitwirken

- -

Dieses Glossar wird immer in Bearbeitung sein. Du kannst helfen, es zu verbessern, indem du neue Einträge schreibst oder bestehende verbesserst. Am Besten beginnst du, indem du mit dem folgenden Button einen neuen Eintrag erstellst oder dir einen der empfohlenen Einträge ansiehst.

- -

Einen neuen Eintrag hinzufügen

- -

{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}

- -

Um mehr darüber zu erfahren, wie du das Glossar unterstützen kannst, gehe zur glossary documentation status page.

diff --git a/files/de/glossary/indexeddb/index.html b/files/de/glossary/indexeddb/index.html deleted file mode 100644 index 41a5d3eff2a2bf..00000000000000 --- a/files/de/glossary/indexeddb/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: IndexedDB -slug: Glossary/IndexedDB -tags: - - API - - CodingScripting - - Database - - Datenbank - - Glossar - - Sql -translation_of: Glossary/IndexedDB ---- -

IndexedDB ist eine Web-{{glossary("API")}}, die es ermöglicht, große Datenstrukturen in Browsern zu speichern und für die Hochleistungssuche zu indexiieren. Wie eine {{glossary("SQL")}}-basierte RDBMS, ist auch IndexedDB eine transaktionsverarbeitende Datenbank. Allerdings nutzt es {{glossary("JavaScript")}}-Objekte anstelle von festen Spalten, um Daten zu speichern.

- -

Erfahren Sie mehr

- - diff --git a/files/de/glossary/information_architecture/index.html b/files/de/glossary/information_architecture/index.html deleted file mode 100644 index c85551f66d96bc..00000000000000 --- a/files/de/glossary/information_architecture/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Informationsarchitektur -slug: Glossary/Information_architecture -tags: - - Design - - Glossary - - User experience -translation_of: Glossary/Information_architecture -original_slug: Glossary/Informationsarchitektur ---- -

Informationsarchitektur (IA) bezeichnet die Organisation, Strukturierung und Gestaltung von Inhalten innerhalb einer Website sowie auf einzelnen Webseiten. Eine gute Informationsarchitektur ermöglicht den Nutzer*innen, die gesuchten Informationen einfach und schnell zu finden und zu nutzen; sie ist somit mitverantwortlich für das {{Glossary("UX", "Nutzungserlebnis (User Experience)")}} einer Website.

- -

Mehr erfahren

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/internet/index.html b/files/de/glossary/internet/index.html deleted file mode 100644 index 74660b50b6f4ca..00000000000000 --- a/files/de/glossary/internet/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Internet -slug: Glossary/Internet -tags: - - Beginner - - Glossary - - Guide - - Intro - - NeedsContent - - Tutorial - - WebMechanics -translation_of: Glossary/Internet ---- -

Das Internet ist ein weltweites Netzwerk aus Netzwerken, das die Internet-Protokollfamilie (auch bekannt als {{glossary("TCP")}}/{{glossary("IPv6","IP")}} durch ihre beiden wichtigsten {{glossary("protocol","protocols")}}) nutzt.

- -

Mehr lernen

- -

Über das Thema

- - diff --git a/files/de/glossary/iso/index.html b/files/de/glossary/iso/index.html deleted file mode 100644 index f0c6fe506fc23c..00000000000000 --- a/files/de/glossary/iso/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: ISO -slug: Glossary/ISO -tags: - - Glossar - - ISO - - Infrastruktur - - Web Spezifikationen - - Web Standards -translation_of: Glossary/ISO ---- -

ISO (International Organization for Standardization) ist eine Organisation, die internationale Normen vor allem im Bereich der Elektronik erarbeitet.

- -

Erfahre mehr

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/jank/index.html b/files/de/glossary/jank/index.html deleted file mode 100644 index 7249654cbdc616..00000000000000 --- a/files/de/glossary/jank/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Jank -slug: Glossary/Jank -tags: - - Beginner - - Glossar - - Performance -translation_of: Glossary/Jank ---- -

Jank bezieht sich auf die Trägheit in einem User Interface. Diese wird normalerweise hervorgerufen durch das Ausführen von langen Aufgaben auf dem Hauptthread, blockierendes Rendering, oder durch das Aufwenden von zu viel Prozessorleistung auf Hintergrundprozesse, wie etwa unerwünschtes Bitcoin-Schürfen.

diff --git a/files/de/glossary/javascript/index.html b/files/de/glossary/javascript/index.html deleted file mode 100644 index d5edcf63ed53a7..00000000000000 --- a/files/de/glossary/javascript/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: JavaScript -slug: Glossary/JavaScript -tags: - - Glossar - - JavaScript -translation_of: Glossary/JavaScript ---- -

JavaScript (JS) ist eine meist clientseitig genutzte Programmiersprache um dynamische Webseiten zu erzeugen. Mittlerweile wird sie dank Paketen wie Node.js auch immer mehr {{Glossary("server")}}seitig eingesetzt.

- -

JavaScript sollte nicht mit Java verwechselt werden. (weitere Informationen). Zwar sind beides Handelsmarken, ® , oder eingetragene Warenzeichen, ™ , der Firma Oracle in den Vereinigten Staaten von Amerika und anderen Ländern, sie weisen aber sehr unterschiedliche Syntax, Semantik und Anwendungsfälle auf.

- -

JavaScript kam im September 1995 in den {{Glossary("Netscape Navigator")}} 2.0, obwohl es vom Entwickler zunächst als Server-seitige Sprache konzipiert war. JavaScript wurde schnell bekannt und der {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 3.0 unterstützte ab dem August 1996 JavaScript als so genanntes {{interwiki("wikipedia","JScript")}}.

- -

Im November 1996 begann Netscape gemeinsam mit {{Glossary("ECMA","ECMA International")}} daran zu arbeiten JavaScript zu einem Industriestandard zu machen. Seit dem wird das standardisierte JavaScript {{Glossary("ECMAScript")}} genannt und ist verfügbar unter ECMA-262, dessen neueste Version (Version 10, ES2019) im Juni 2019 erschien.

- -

JavaScript wird meistens im Browser genutzt um Seiteninhalte mittels des {{Glossary("DOM")}} zu manipulieren, Daten mit {{Glossary("AJAX")}} zu laden, mit {{Glossary("IndexedDB")}} zu verwalten, Grafiken mit {{Glossary("canvas","Canvas")}} zu erstellen, mit dem Gerät, das die Seite geöffnet hat durch {{Glossary("API","APIs")}} zu kommunizieren und so weiter. JavaScript ist eine der weltweit am meisten genutzten Sprachen, auch dadurch, dass verschiedene in den {{Glossary("Browser","Browsern")}} verfügbare APIs bedeutende Performance-Verbesserungen bringen.

- -

Vor einiger Zeit kehrte JavaScript zur Server-seitigen Programmierung zurück, dank Node.js, der bekanntesten plattfromübergreifenden JavaScript Umgebung. Node.js ermöglicht es Aufgaben auf Computern zu automatisieren und {{Glossary("HTTP")}} oder {{Glossary("Web Sockets","Web Socket")}} Server zu erstellen.

- -

Mehr erfahren

- -

Allgemein

- -
    -
  • {{interwiki("wikipedia", "JavaScript")}} auf Wikipedia
    • -
- -

JavaScript lernen

- - - -

Technisches

- - diff --git a/files/de/glossary/jpeg/index.html b/files/de/glossary/jpeg/index.html deleted file mode 100644 index fa83b75a31b235..00000000000000 --- a/files/de/glossary/jpeg/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: JPEG -slug: Glossary/jpeg -tags: - - Glossary - - Media -translation_of: Glossary/jpeg ---- -

JPEG (Joint Photographic Experts Group, dt. etwa „Gemeinsame Fotografie-Expertengruppe“) ist ein im Web weit verbreitetes Bildformat, das überwiegend eine verlustbehaftete Komprimierung verwendet.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "JPEG")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/json/index.html b/files/de/glossary/json/index.html deleted file mode 100644 index d333877a231f67..00000000000000 --- a/files/de/glossary/json/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: JSON -slug: Glossary/JSON -tags: - - Glossar - - Intro - - JSON -translation_of: Glossary/JSON ---- -

JSON (JavaScript Object Notation) ist ein Datenaustauschformat. Obwohl es nicht direkt Teil von {{Glossary("JavaScript")}} ist, benutzt es eine ähnliche Syntax. Da viele Programmiersprachen mit JSON arbeiten können, ist es besonders nützlich für JavaScript-basierte Apps, wie zum Beispiel Webseiten oder {{Glossary("Browser")}}erweiterungen.

- -

In JSON können {{Glossary("Number","Zahlen")}}, {{Glossary("Boolean","Booleans")}}, {{Glossary("String","Strings")}}, {{Glossary("null","null")}}, {{Glossary("Array","Arrays")}} (geordnete Abfolgen von {{Glossary("Value","Werten")}}) und {{Glossary("Object","Objekte")}} (String-Wert-Sammlungen), die aus ebendiesen Werten bestehen können, verwendet werden. JSON unterstützt für sich keine komplexeren {{Glossary("Data structure","Datenstrukturen")}}, wie {{Glossary("Function","Funktionen")}}, {{Glossary("Regular expression","reguläre Ausdrücke")}} und ähnliche. (Datumsobjekte werden zu einem String im {{Glossary("ISO")}}-Format, sodass die Informationen nicht vollständig verloren gehen). Wenn JSON andere {{Glossary("Type","Datentypen")}} unterstützen soll, müssen diese während der Transformation oder vor der Transformation umgewandelt werden.

- -

Wie {{Glossary("XML")}} hat auch JSON die Eigenschaft, Daten hierarchisch speichern zu können, ganz im Gegensatz zu CSV. Viele Tools bieten die Möglichkeit zwischen diesen Formaten zu konvertieren wie dieser JSON to CSV Converter.

- -

Mehr erfahren

- -

Allgemeines

- -
    -
  • {{interwiki("wikipedia", "JSON")}} auf Wikipedia
    • -
- -

Technisches

- - diff --git a/files/de/glossary/local_scope/index.html b/files/de/glossary/local_scope/index.html deleted file mode 100644 index 16a2fa82499f3f..00000000000000 --- a/files/de/glossary/local_scope/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Local scope -slug: Glossary/Local_scope -tags: - - Geltungsbereich - - Locale - - Locale Scope - - Lokaler Geltungsbereich -translation_of: Glossary/Local_scope ---- -

Der Local scope – lokale Geltungsbereich - ist das Merkmal, das {{glossary("variable","variables")}} - Variablen -, zu lokalen Variablen macht, d.h. ihr Variablennamen ist nur innerhalb eines bestimmten Geltungsbereiches an seinen jeweiligen {{glossary("value")}} /Wert gebunden.

- -

Learn more

- -

General knowledge

- -
    -
  • {{interwiki("wikipedia", "Scope (computer science)", "Scope")}} on Wikipedia
    • -
diff --git a/files/de/glossary/local_variable/index.html b/files/de/glossary/local_variable/index.html deleted file mode 100644 index e7829b5c26dead..00000000000000 --- a/files/de/glossary/local_variable/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Local variable -slug: Glossary/Local_variable -tags: - - Gültigkeitsbereich - - Locale variable - - Lokale Variable -translation_of: Glossary/Local_variable ---- -

Eine {{glossary("variable")}} deren Namen an ihren {{glossary("value")}} – Wert – nur innerhalb eines {{Glossary("local scope")}} – lokalen Gültigkeitsbereichs – gebunden ist.

- -

Example

- -
var global = 5; //ist eine globale Variable
-
-function fun(){
-    var local = 10; //ist eine lokale Variable
-}
-
- - diff --git a/files/de/glossary/localization/index.html b/files/de/glossary/localization/index.html deleted file mode 100644 index 7b6f5db3e7454a..00000000000000 --- a/files/de/glossary/localization/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Lokalisierung -slug: Glossary/Localization -tags: - - Lokalisierung -translation_of: Glossary/Localization -original_slug: Lokalisierung ---- -

Lokalisierung (L10n) ist der Vorgang zur Übersetzung von Programmbenutzeroberflächen in eine andere Sprache und deren Anpassung an weitere Eigenheiten anderer Kulturen. Auf den folgenden Seiten geht es darum Mozilla-basierte Anwendungen oder Erweiterungen zu lokalisieren. Hier wird auch von Software- bzw. Website-Lokalisierungen gesprochen.

- - - - - - - -
-

Dokumentaion

-
-
- XUL Einführung:Lokalisierung
-
- Abschnitt zur Lokalisierung von XUL-Anwendungen in der XUL Einführung.
-
- XUL Einführung:Property Files
-
- Abschnitt über die Benutzung von Property-Dateien in der XUL Einführung
-
- Lokalisierbaren Code schreiben
-
- Empfohlene Herangehensweisen und Anleitungen für den Programmierer zum Umgang mit Lokalisierung.
-
- Lokalisierung von Erweiterungsbeschreibungen
-
- Um die Beschreibung einer Erweiterung (die Zeichenkette, welche unter dem Erweiterungsnamen im Erweiterungenfenster angezeigt wird) zu lokalisieren, braucht man einen besonderen Einstellungsschlüssel, um den in der Beschreibung install.rdf angegebenen Namen zu überschreiben. Dieser Artikel enthält Anweisungen zur Bearbeitung dieses Einstellungsschlüssels.
-
- Häufig gestellte Fragen zur Lokalisierung
-
- FAQs über Lokalisierung.
-
- 		-

Community

- -

Verwandte Themen

-
-
- Erweiterungen, XUL
-
-
-

diff --git a/files/de/glossary/middleware/index.html b/files/de/glossary/middleware/index.html deleted file mode 100644 index 432e054ddf4188..00000000000000 --- a/files/de/glossary/middleware/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Middleware -slug: Glossary/Middleware -translation_of: Glossary/Middleware ---- -

Middleware ist ein ( lose definierter) Begriff für jede Software oder Service, die es den Teilen eines Systems ermöglicht, miteinander zu kommunizieren und Daten zu verwalten. Es ist die Software, die die Kommunikation zwischen den Komponenten und die Ein- und Ausgabe handhabt, so dass sich die Entwickler auf den spezifischen Zweck ihrer Anwendung konzentrieren können.

- -

In server-seitigen Webanwendungs-Frameworks wird der Begriff oft spezifischer verwendet, um sich auf vorgefertigte Softwarekomponenten zu beziehen, die der Anfrage/Antwort-Verarbeitungspipeline des Frameworks hinzugefügt werden können, um Aufgaben wie den Datenbankzugriff zu erledigen.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Middleware", "Middleware")}} on Wikipedia
    • -
diff --git a/files/de/glossary/mime_type/index.html b/files/de/glossary/mime_type/index.html deleted file mode 100644 index fe800b20b9227a..00000000000000 --- a/files/de/glossary/mime_type/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: MIME type -slug: Glossary/MIME_type -tags: - - Glossar - - WebMechaniken -translation_of: Glossary/MIME_type ---- -

Ein MIME-Typ (nun treffenderweise "Medientyp" genannt, jedoch manchmal auch "Inhaltstyp") ist ein eine Zeichenkette (String), welcher zusammen mit einer Datei versendet wird, um deren Dateityp zu kennzeichnen. (So wird das Format des Inhalts erläutert; etwa kann eine Audiodatei als audio/ogg, oder eine Bilddatei als image/png ausgezeichnet sein.)

- -

Er dient dem gleichen Zweck, den Dateiendungen traditionellerweise auf Windows erfüllen. Der Name stammt vom MIME Standard, welcher ursprünglich in E-Mails verwendet wurde; "Multipurpose Internet Mail Extensions“.

- -

Erfahre mehr

- -

Allgemeines

- -
    -
  • {{interwiki("wikipedia", "Internet media type", "Internet media type")}} auf Wikipedia
    • -
- -

Technische Referenzen

- - diff --git a/files/de/glossary/mixin/index.html b/files/de/glossary/mixin/index.html deleted file mode 100644 index 44c89a9f242678..00000000000000 --- a/files/de/glossary/mixin/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Mixin -slug: Glossary/Mixin -tags: - - Glossary - - Mixin -translation_of: Glossary/Mixin ---- -

Ein Mixin ist eine {{Glossary("class","Klasse")}} oder eine {{Glossary("interface","Schnittstelle")}} in der einige oder alle ihrer {{Glossary("method", "Methoden")}} und/oder {{Glossary("property", "Eigenschaften")}} nicht implementiert werden, was erfordert, dass eine andere {{Glossary("class","Klasse")}} oder {{Glossary("interface","Schnittstelle")}} die fehlenden Implementierungen bereitstellt. Die neue Klasse bzw. die neue Schnittstelle enthält dann sowohl die Eigenschaften und Methoden aus dem Mixin als auch diejenigen, die sie selbst definiert. Alle Methoden und Eigenschaften werden exakt gleich verwendet, unabhängig davon, ob sie im Mixin implementiert sind oder im Interface oder in der Klasse, die das Mixin implementiert.

- -

Der Vorteil von Mixins besteht darin, dass sie zur Vereinfachung des Designs von APIs verwendet werden können, bei denen mehrere Schnittstellen dieselben Methoden und Eigenschaften enthalten müssen.

- -

Zum Beispiel wird das Mixin {{domxref("WindowOrWorkerGlobalScope")}}} verwendet, um Methoden und Eigenschaften zur Verfügung zu stellen, die sowohl auf den Schnittstellen {{domxref("Window")}} als auch {{domxref("WorkerGlobalScope")}}} verfügbar sein müssen. Das Mixin wird von beiden Schnittstellen implementiert.

- -

Erfahre mehr

- -

Allgemeines Wissen

- - diff --git a/files/de/glossary/mozilla_firefox/index.html b/files/de/glossary/mozilla_firefox/index.html deleted file mode 100644 index 17090d5dd4c317..00000000000000 --- a/files/de/glossary/mozilla_firefox/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Mozilla Firefox -slug: Glossary/Mozilla_Firefox -tags: - - Browser - - Firefox - - Glossary - - Infrastructure - - Mozilla - - Mozilla Firefox -translation_of: Glossary/Mozilla_Firefox ---- -

Mozilla Firefox ist ein kostenloser Open-Source-{{Glossary("browser")}}, dessen Entwicklung von der Mozilla Corporation überwacht wird. Firefox läuft unter Windows, OS X, Linux und Android.

- -

Erstmals im November 2004 veröffentlicht, ist Firefox mit Themes, Plug-ins und add-ons vollständig an Benutzerbedürfnisse anpassbar. Firefox nutzt {{glossary("Gecko")}} um Websiten zu rendern und implementiert sowohl aktuelle, als auch demnächst anzuwendende Webstandards.

- -

Erfahren Sie mehr

- -

Grundlegendes Wissen

- - - -

Technische Referenzen

- - diff --git a/files/de/glossary/namespace/index.html b/files/de/glossary/namespace/index.html deleted file mode 100644 index 218600b1adceaf..00000000000000 --- a/files/de/glossary/namespace/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Namespace -slug: Glossary/Namespace -tags: - - Namensraum -translation_of: Glossary/Namespace ---- -

Namespace - deutsch auch Namensraum - ist der Kontext für Bezeichner, eine logische Gruppierung von Namen, die innerhalb eines Programms benutzt werden. Innerhalb desselben Kontexts und Scopes/Gültigkeitsbereiches muss ein Bezeichner eine Einheit eindeutig identifizieren.

- -

Bezogen auf ein Betriebssystem ist ein Verzeichnis ein Namensraum. Jede Datei und jedes Unterverzeichnis erhalten einen eindeutigen Namen, wobei eine Datei den gleichen Namen mehrfach verwenden kann.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Namespace")}} on Wikipedia
    • -
diff --git a/files/de/glossary/node.js/index.html b/files/de/glossary/node.js/index.html deleted file mode 100644 index 2fd6e3d714eff8..00000000000000 --- a/files/de/glossary/node.js/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Node.js -slug: Glossary/Node.js -tags: - - Glossar - - Infrastruktur - - JavaScript - - node.js -translation_of: Glossary/Node.js ---- -

Node.js ist eine platformübergreifendes {{Glossary("JavaScript")}}-Runtime-Environment (Laufzeitumgebung), die es Entwicklern ermöglicht, serverseitige Anwendungen und Netzwerkanwendungen mit JavaScript zu erstellen.

- -

Erfahren Sie mehr

- -

Grundlagenwissen

- - - -

Technische Informationen

- - - -

diff --git a/files/de/glossary/null/index.html b/files/de/glossary/null/index.html deleted file mode 100644 index 625c61d2f53556..00000000000000 --- a/files/de/glossary/null/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: 'Null' -slug: Glossary/Null -translation_of: Glossary/Null ---- -

In der Informatik stellt der null Wert eine Referenz dar, die zu einem fehlenden oder ungültigen {{Glossary("object","Objekt")}} oder Adresse zeigt. Die Bedeutung der null Referenz ist von Sprache zu Sprache unterschiedlich.

- -

In {{Glossary("JavaScript")}} ist null einer der {{Glossary("Primitive", "primitiven Datentypen")}}.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Null pointer")}} auf Wikipedia
    • -
- -

Technical reference

- - diff --git a/files/de/glossary/number/index.html b/files/de/glossary/number/index.html deleted file mode 100644 index f60a9af4da709d..00000000000000 --- a/files/de/glossary/number/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Number -slug: Glossary/Number -translation_of: Glossary/Number ---- -

In {{Glossary("JavaScript")}} ist Number ein numerischer {{Glossary("Type","Datentyp")}} im double-precision 64-bit floating point format (IEEE 754). In anderen Programmiersprachen können verschiedene numerische Typen existieren, wie zum Beispiel Integer, Float, Double oder Bignum.

- -

Mehr erfahren

- -

Allgemienes

- -
    -
  • -

    {{Interwiki("wikipedia", "Datentyp#Elementare_Datentypen", "Numerische Datentypen")}} auf Wikipedia

    -
    • -
- -

Technical reference

- -
    -
  • Die JavaScript {{Glossary("Data Structure","Datenstruktur")}}: Number
    • -
  • Das globale {{jsxref("Number")}} Objekt in JavaScript
    • -
diff --git a/files/de/glossary/object/index.html b/files/de/glossary/object/index.html deleted file mode 100644 index b5ec9dba2fe9dd..00000000000000 --- a/files/de/glossary/object/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Objekt -slug: Glossary/Object -tags: - - Einführung - - Objekt - - Objektorientierte Programmierung -translation_of: Glossary/Object -original_slug: Glossary/Objekt ---- -

Ein Objekt bezieht sich auf eine Datenstruktur welche Daten und Anweisungen beinhaltet. Objekte stellen manchmal Gegenstände aus der echten Welt dar, wie zum Beispiel ein Auto oder eine Karte in einem Rennspiel. {{glossary("JavaScript")}}, Java, C++, Python und Ruby sind Beispiele für {{glossary("OOP","Objektorientierte Programmiersprachen")}}.

- -

Lerne mehr

- -

Grundlegendes Wissen

- - diff --git a/files/de/glossary/oop/index.html b/files/de/glossary/oop/index.html deleted file mode 100644 index 8360565450a4d6..00000000000000 --- a/files/de/glossary/oop/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: OOP -slug: Glossary/OOP -tags: - - Anfänger - - Glossar - - Übersicht -translation_of: Glossary/OOP ---- -

OOP (Objekt-Orientierte Programmierung) ist ein Ansatz der Programmierung in dem Daten verkapselt hinterlegt werden mit {{glossary("object","objects")}}, wobei das Objekt selbst bearbeitet wird und nicht seine einzelnen Bestandteile.

- -

{{glossary("JavaScript")}} ist sehr stark nach den Bestimmungen von OOP aufgebaut. Es basiert auf dem Prototype-basierten Modell (im Gegensatz zu Klassenbasierten).

- -

Mehr Informationen

- -

Allgemeines Wissen

- - diff --git a/files/de/glossary/operand/index.html b/files/de/glossary/operand/index.html deleted file mode 100644 index 4340c67e3b0187..00000000000000 --- a/files/de/glossary/operand/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Operand -slug: Glossary/Operand -tags: - - Operand -translation_of: Glossary/Operand ---- -

Operand nennt man den Teil einer Anweisung, der für die Daten steht, die vom {{glossary("operator")}} bearbeitet werden. Wenn Du beispielsweise zwei Zahlen addierst, sind die Zahlen die Operanden und das "+" ist der Operator.

- -

Learn more

- -
    -
  • {{Interwiki("wikipedia", "Operand")}} on Wikipedia
    • -
diff --git a/files/de/glossary/operator/index.html b/files/de/glossary/operator/index.html deleted file mode 100644 index 59ca3a4e5376fb..00000000000000 --- a/files/de/glossary/operator/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Operator -slug: Glossary/Operator -tags: - - Operator -translation_of: Glossary/Operator ---- -

Syntax bestehend aus Interpunktion oder alphanumerischen Satzzeichen, die einer integrierten Funktionalität vorbehalten ist. Beispielsweise summiert der Additionsoperator ("+") in JavaScript Zahlen auf oder verkettet Strings, wohingegen der “Not-Operator” ("!") einen Ausdruck in sein Gegenteil verkehrt – also z.B. dazu führt, dass ein true-Statement false zurückgibt.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Operator (computer programming)")}} on Wikipedia
    • -
- -

Technical reference

- - diff --git a/files/de/glossary/php/index.html b/files/de/glossary/php/index.html deleted file mode 100644 index 38c431b51e6501..00000000000000 --- a/files/de/glossary/php/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: PHP -slug: Glossary/PHP -translation_of: Glossary/PHP ---- -

PHP ist eine {{Glossary("server")}}seitige Scriptsprache zur Entwicklung von webbasierten Anwendungen und dynamischen Webseiten.

- -

Mehr erfahren

- - diff --git a/files/de/glossary/png/index.html b/files/de/glossary/png/index.html deleted file mode 100644 index 69852d31e885cb..00000000000000 --- a/files/de/glossary/png/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: PNG -slug: Glossary/PNG -tags: - - Glossary - - Media -translation_of: Glossary/PNG ---- -

PNG (Portable Network Graphics, dt. etwa „Portable Netzwerkgrafik“) ist ein Bildformat, das eine verlustfreie Komprimierung verwendet. Es wurde als offener Standard und als lizenzgebührenfreie Alternative zum {{Glossary("GIF")}}-Format entworfen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "PNG")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/polyfill/index.html b/files/de/glossary/polyfill/index.html deleted file mode 100644 index 5ae2f9b829e8e7..00000000000000 --- a/files/de/glossary/polyfill/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Polyfill -slug: Glossary/Polyfill -tags: - - CSS - - Glossary - - HTML - - JavaScript -translation_of: Glossary/Polyfill ---- -

Polyfill ist ein üblicherweise in {{Glossary("JavaScript")}} geschriebener Code-Baustein, der dazu dient, moderne {{Glossary("HTML")}}-, {{Glossary("CSS")}}- oder JavaScript-Funktionalitäten in älteren {{Glossary("Browser", "Browsern")}} zur Verfügung zu stellen, die diese Funktionailtät nicht von Haus aus unterstützen.

- -

Ein Polyfill könnte bspw.

- -
    -
  • die Funktion des HTML5-Elements {{HTMLElement("canvas")}} in Internet Explorer 7 (durch die Nutzung eines Silverlight-Plugins) oder
    • -
  • die Unterstützung der CSS3-Einheit {{CSSxRef("length#rem", "rem")}} oder der CSS3-Eigenschaft {{CSSxRef("text-shadow")}} in Firefox 3.5 oder
    • -
  • die JavaScript-Funktion {{JSxREF("Array.find()")}} in Chrome 44
    • -
- -

nachbilden.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Polyfill")}} auf Wikipedia
    • -
  • What is a polyfill? (englischsprachiger Artikel von Remy Sharp, Erfinder des Begriffs)
    • -
diff --git a/files/de/glossary/primitive/index.html b/files/de/glossary/primitive/index.html deleted file mode 100644 index 54ab1b3f09936e..00000000000000 --- a/files/de/glossary/primitive/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Skalare Daten -slug: Glossary/Primitive -tags: - - Glossary - - einfache Datentypen - - primitive Datentypen - - skalare Datentypen -translation_of: Glossary/Primitive -original_slug: Glossary/einfache_datenelemente ---- -

Ein primitives (skalares) Datenelement (einfacher Wert, einfacher Datentyp) ist ein Datenelement, das kein {{Glossary("object","Objekt")}} ist und keine {{glossary("method","Methoden")}} besitzt.

- -

In {{Glossary("JavaScript")}} gibt es 6 skalare Datentypen:

- -
    -
  • {{Glossary("string","String")}}
    • -
  • {{Glossary("number","Number")}}
    • -
  • {{Glossary("Boolean")}}
    • -
  • {{Glossary("null")}}
    • -
  • {{Glossary("undefined")}}
    • -
  • {{Glossary("symbol","Symbol")}} (neu in {{Glossary("ECMAScript")}} 6)
    • -
- -

Meistens repräsentiert ein skalares Datenelement die einfachste Datenstruktur einer Programmiersprache.

- -

Alle skalaren Datentypen sind unveränderbar (sie können nicht noch weiter vereinfacht werden).

- -

Skalare Wrapper-Objekte in Javascript

- -

Außer für die Skalare null und undefined, besitzen alle anderen Datentypen ein equivalentes, gleichnamiges Objekt, welches die einfachen Datentypen ummantelt/umgibt (neudeutsch: wrappt):

- -
    -
  • {{jsxref("String")}} für den skalaren Datentyp string.
    • -
  • {{jsxref("Number")}} für den skalaren Datentyp number.
    • -
  • {{jsxref("Boolean")}} für den skalaren Datentyp Boolean.
    • -
  • {{jsxref("Symbol")}} für den skalaren Datentyp Symbol.
    • -
- -

DIe Wrapper-Methode valueOf() gibt als Rückgabewert den skalaren Datentypen des verwendeten Datenelements zurück..

- -

Lerne weiter

- -

Allgemeines

- - diff --git a/files/de/glossary/progressive_enhancement/index.html b/files/de/glossary/progressive_enhancement/index.html deleted file mode 100644 index eecee8977eceac..00000000000000 --- a/files/de/glossary/progressive_enhancement/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Progressive Enhancement -slug: Glossary/Progressive_Enhancement -tags: - - Accessibility - - Design - - Glossary -translation_of: Glossary/Progressive_Enhancement ---- -

Progressive enhancement (dt. etwa „Fortschreitende Verbesserung“) ist eine Design-Philosophie, bei der es darum geht, so vielen Nutzer*innen wie möglich die grundlegenden Inhalte und Funktionen einer Website zur Verfügung zur stellen. Darüber hinaus wird Nutzer*innen mit einem modernen {{Glossary("Browser")}}, der den dafür notwendigen Code ausführen kann, das bestmögliche Erlebnis geboten.

- -

Üblicherweise wird durch Feature detection überprüft, ob der Browser die technischen Voraussetzungen erfüllt, um den „verbesserten“ Code auszuführen. Fehlende Voraussetzungen werden oft durch {{Glossary("Polyfill", "Polyfills")}} hinzugefügt. Hierbei sollte vor allem die {{Glossary("Accessibility", "Accessibility bzw. Barrierefreiheit")}} berücksichtigt und akzeptable Alternativen wo möglich bereitgestellt werden.

- -

Progressive enhancement ist eine nützliche Technik, die es Webentwicklern erlaubt, sich auf die Entwicklung bestmöglicher Websites zu konzentrieren und gleichzeitig die Probleme zu berücksichtigen, die auftreten können, wenn verschiedene unbekannte {{Glossary("User agent", "User Agents")}} auf die Webseiten zugreifen.

- -

{{Glossary("Graceful degradation")}} ist ein verwandtes Konzept, das sich aber von Progressive enhancement unterscheidet und oft als Gegensatz dazu betrachtet wird. Tatsächlich haben beide Ansätze ihre Gültigkeit und können sich oft gegenseitig ergänzen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Progressive Verbesserung")}} auf Wikipedia
    • -
- - diff --git a/files/de/glossary/protocol/index.html b/files/de/glossary/protocol/index.html deleted file mode 100644 index 9cf6f42e373d48..00000000000000 --- a/files/de/glossary/protocol/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Protokoll -slug: Glossary/Protocol -tags: - - Glossary - - Infrastructure - - Protocols -translation_of: Glossary/Protocol -original_slug: Glossary/Protokoll ---- -

Ein Protokoll ist ein System aus Regeln, die festlegen wie Daten in oder zwischen Computern ausgetauscht werden. Die Kommunikation zwischen Geräten erfordert, dass die Geräte im Format der ausgetauschten Daten übereinstimmen. Der Satz an Regeln, aus dem ein Format besteht, wird Protokoll genannt.

- -

Mehr lernen

- -

Allgemeine Vermerke

- - - -

diff --git a/files/de/glossary/prototype-based_programming/index.html b/files/de/glossary/prototype-based_programming/index.html deleted file mode 100644 index 442d4c256e5b35..00000000000000 --- a/files/de/glossary/prototype-based_programming/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Prototypbasierte Programmierung -slug: Glossary/Prototype-based_programming -tags: - - Classes - - Prototype -translation_of: Glossary/Prototype-based_programming ---- -


- Prototypbasierte Programmierung ist eine Variante der {{Glossary("OOP", "objektorientierten Programmierung")}}, bei der keine {{Glossary('Class', 'Klassen')}} verwendet werden. Objekte werden durch kopieren von bereits existierenden Objekten (Prototypen) erzeugt. Beim Kopieren werden alle Eigenschaften des Prototypen übernommen, diese können jedoch verändert und/oder ergänzt werden.

- -

Prototypbasierte Programmierung: neues Objekt = Kopie von existierendem Objekt {{Glossary("OOP", "objektorientierten Programmierung")}}: neues Objekt = Instanz einer Klasse

- -

Learn More

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Prototypenbasierte Programmierung", "Prototypenbasierte Programmierung")}} in der Wikipedia
    • -
diff --git a/files/de/glossary/prototype/index.html b/files/de/glossary/prototype/index.html deleted file mode 100644 index 673edacad65942..00000000000000 --- a/files/de/glossary/prototype/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Prototype -slug: Glossary/Prototype -translation_of: Glossary/Prototype ---- -

Prototyp

- -

Ein Prototyp ist ein Modell, mit dem man schon früh im Entwicklungsprozess das Erscheinungsbild und das Verhalten einer Applikation oder eines Produktes darstellt.

- -

Siehe auch Inheritance and the prototype chain

- - - -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Software Prototyping")}} on Wikipedia
    • -
diff --git a/files/de/glossary/regular_expression/index.html b/files/de/glossary/regular_expression/index.html deleted file mode 100644 index 57c155abc35cfd..00000000000000 --- a/files/de/glossary/regular_expression/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Regulärer Ausdruck -slug: Glossary/Regular_expression -tags: - - Glossar - - Regulärer Ausdruck -translation_of: Glossary/Regular_expression ---- -

Reguläre Ausdrücke (Abkürzung regex) sind Regeln, die das Resultat einer Textsuche bestimmen.

- -

Reguläre Ausdrücke sind in verschiedenen Sprachen implementiert, die bekannteste Implementation ist allerdings in der Sprache Perl, welche wiederum ein ganzes Ökosystem an Implementationen namens PCRE (englisch Perl Compatible Regular Expressions, übersetzt "Perl-kompatible Reguläre Ausdrücke") hervorgebracht hat. {{glossary("JavaScript")}} (englisch) bietet für das Web eine eigene RegEx-Implementation mithilfe des {{jsxref("RegExp")}}-Objektes.

- -

Siehe auch

- -

Allgemeinwissen

- - - -

Technische Referenz

- - diff --git a/files/de/glossary/repo/index.html b/files/de/glossary/repo/index.html deleted file mode 100644 index 2a4f63233403f7..00000000000000 --- a/files/de/glossary/repo/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Repo -slug: Glossary/Repo -translation_of: Glossary/Repo ---- -
-

In einem Versionsverwaltungssystem wie {{Glossary("Git")}} oder {{Glossary("SVN")}} ist ein Repo (Abkürzung für "repository") ein Ort, an dem der Quellcode einer Applikation sowie verschiedene Metadaten gespeichert werden.

- -

Mehr dazu

- - -
diff --git a/files/de/glossary/responsive_web_design/index.html b/files/de/glossary/responsive_web_design/index.html deleted file mode 100644 index c7af32abeaf1a9..00000000000000 --- a/files/de/glossary/responsive_web_design/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Responsive web design -slug: Glossary/Responsive_web_design -tags: - - responsiv - - responsives Webdesign -translation_of: Glossary/Responsive_web_design ---- -

Responsive Web Design (RWD) bezeichnet ein Konzept der Webentwicklung, das darauf ausgerichtet ist, Websites und ihr Verhalten optimal an alle PC-Geräte anzupassen, vom Desktop bis hin zu mobilen Endgeräten.

- -

Learn more

- -

General knowledge

- - diff --git a/files/de/glossary/rest/index.html b/files/de/glossary/rest/index.html deleted file mode 100644 index 3beb4427a8f488..00000000000000 --- a/files/de/glossary/rest/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: REST -slug: Glossary/REST -translation_of: Glossary/REST ---- -

Representational State Transfer (REST) bezieht sich auf eine Gruppe von Designbeschränkungen in der Softwarearchitektur, die effiziente, zuverlässige und skalierbare verteilte Systeme bereitstellen. Ein System wird als RESTful bezeichnet, wenn es diese Einschränkungen einhält.

- -

Die Grundidee von REST ist, dass eine Ressource, wie z.B. ein Dokument, mit ihrem Zustand und ihren Beziehungen (Hypertext) über klar definierte, standardisierte Operationen und Formate übertragen wird. Häufig werden {{Glossary("API","API's")}} oder Dienste mit RESTful bezeichnet, wenn sie eine Art von Dokument direkt ändern, anstatt an anderer Stelle Aktionen auszulösen.

- -

Da {{Glossary("HTTP")}}, das Standardprotokoll im {{glossary("World Wide Web","Web")}}, auch Dokumente und Hypertextlinks überträgt, werden einfache HTTP-APIs manchmal umgangssprachlich als RESTful-APIs, RESTful-Services oder einfach REST-Services bezeichnet, obwohl sie nicht unbedingt alle REST-Beschränkungen einhalten. Anfänger können davon ausgehen, dass eine REST-API ein HTTP-Dienst ist, der über Standard-Webbibliotheken und -Werkzeuge aufgerufen werden kann.

- -

-

Learn more

- - -

Learn about it

- - - -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} on Wikipedia
    • -
  • REST Architecture
    • -
diff --git a/files/de/glossary/rgb/index.html b/files/de/glossary/rgb/index.html deleted file mode 100644 index 903355f7abc2bc..00000000000000 --- a/files/de/glossary/rgb/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: RGB -slug: Glossary/RGB -translation_of: Glossary/RGB ---- -

RGB ist ein Farbraum Modell, das Farben beschreibt, die aus den drei Primärfarben Rot, Grün und Blau zusammengesetzt sind. Jede einzelne Farbe wird durch aufeinanderfolgenden nummerische Werte der Primärfarben repräsentiert. Diese Werte, normalerweise zwischen 0 und 255, bzw. 0 und 1, repräsentieren die Intensitäten der Primärfarben.

- -

Es gibt viele Möglichkeiten RGB Komponenten einer Farbe zu beschreiben. In {{Glossary("CSS")}} geschieht dies mit Hilfe der hexadezimalen Schreibweise bestehenden aus 24-Bit Integer (z.B. #add8e6 ist Hellblau), oder in funktioneller Schreibweise bestehend aus 8-bit Integer (z.B. rgb(46, 139, 87) ist Seegrün). In {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, und {{Glossary("GLSL")}} werden RGB Komponenten durch Fließkommazahlen zwischen 0.0 und 1.0 beschrieben, obwohl sie im eigentlichen Farbpuffer als 8-Bit Integer repräsentiert werden.

- -

Weiterführendes

- -

General knowledge

- - - -

Learn about it

- - diff --git a/files/de/glossary/rss/index.html b/files/de/glossary/rss/index.html deleted file mode 100644 index 1a0d544c7b46ad..00000000000000 --- a/files/de/glossary/rss/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: RSS -slug: Glossary/RSS -tags: - - RSS - - Really Simple Syndication - - Rich Site Summary -translation_of: Glossary/RSS ---- -

RSS (Really Simple Syndication) bezieht sich auf verschiedene XML-Dokumentformate, die auf die Veröffentlichung von Website-Aktualisierungen ausgerichtet sind. Wenn Du RSS-Inhalte abonnierst, schickt die entsprechende Website Informationen und Aktualisierungen an Deinen RSS Reader/Leser in einem RSS-Dokument, das sich feed, nennt, so dass Du nicht alle Deine bevorzugten Websites manuell prüfen musst.

- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "RSS")}} on Wikipedia
    • -
- -

Technical reference

- - diff --git a/files/de/glossary/scope/index.html b/files/de/glossary/scope/index.html deleted file mode 100644 index edd026bca1ef3c..00000000000000 --- a/files/de/glossary/scope/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Scope -slug: Glossary/Scope -translation_of: Glossary/Scope ---- -

Der aktuelle Ausführungskontext. D.h. der Kontext, in dem {{glossary("value","values")}} und Ausdrücke sichtbar sind oder referenziert werden können. Wenn {{glossary("variable")}} oder andere Ausdrücke nicht im aktuellen Ausführungskontext (Scope) sind, dann können sie nicht verwendet werden. Scopes können auch hierarchisch angeordnet sein, so dass darunter liegende Scopes (Child-Scopes) auf die darüberliegenden Elemente (Parent-Scopes) zugreifen können, aber nicht umgekehrt.

- -

Beispiel: {{glossary("function")}} dient als abgeschlossene Funktion (closure) in {{glossary("JavaScript")}}, und erzeugt so einen Scope, so dass z.B. eine Variable, die nur innerhalb der Funktion definiert wurde, außerhalb dieser Funktion oder in anderen Funktionen nicht angesprochen werden kann. Das folgende Beispiel ist deshalb fehlerhaft:

- -
function exampleFunction() {
-    var x = "declared inside function";  // x can only be used in exampleFunction
-    console.log("Inside function");
-    console.log(x);
-}
-
-console.log(x);  // Causes error
- -

Der folgende Code funktioniert jedoch, da die Variable außerhalb der Funktion deklariert wurde und somit global verfügbar ist:

- -
var x = "declared outside function";
-
-exampleFunction();
-
-function exampleFunction() {
-    console.log("Inside function");
-    console.log(x);
-}
-
-console.log("Outside function");
-console.log(x);
- -

Learn more

- -

General knowledge

- -
    -
  • {{Interwiki("wikipedia", "Scope (computer science)")}} on Wikipedia
    • -
diff --git a/files/de/glossary/server/index.html b/files/de/glossary/server/index.html deleted file mode 100644 index 697baf1ac8e038..00000000000000 --- a/files/de/glossary/server/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Server -slug: Glossary/Server -tags: - - Glossar - - Infrastruktur - - Netzwerk - - Protokoll - - Server -translation_of: Glossary/Server ---- -

Ein Hardware-Server ist ein in einem Netzwerk freigegebener Computer, der Clients Dienste zur Verfügung stellt. Ein Software-Server ist ein Programm, das Client-Programmen Dienste bietet.

- -

Die Dienste werden im Allgemeinen für LANs (local area network) oder WANs (wide area network) angeboten.

- -

Die verbreitetsten Server in lokalen Netzwerken sind Datei-, Domainname-, E-Mail-, Drucker- oder Fax-Server. Ein weitere wichtige Art stellt der mit dem Internet verbundene Web-Server dar. Kleinrechner und Großrechner in Rechenzentren sind ebenfalls Server.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Server")}} bei Wikipedia
    • -
diff --git a/files/de/glossary/sloppy_mode/index.html b/files/de/glossary/sloppy_mode/index.html deleted file mode 100644 index 51077019a308f3..00000000000000 --- a/files/de/glossary/sloppy_mode/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Sloppy mode -slug: Glossary/Sloppy_mode -translation_of: Glossary/Sloppy_mode ---- -

In {{Glossary("ECMAScript")}} 5 und neuer können Skripte in einen strikten Modus wechseln, der die Semantik von JavaScript in vielerlei Hinsicht ändert, um Code robuster und einfacher nachvollziehbar zu machen, falls es zu Problemen kommt.

- -

Der normale, nicht-strikte Modus von JavaScript wird manchmal auch sloppy mode (schlampiger Modus) genannt. Dies ist zwar keine offizielle Bezeichnung, Sie werden aber vermutlich häufiger darauf stoßen, wenn Sie sich eingehender mit JavaScript beschäftigen.

- -

Erfahren Sie mehr

- -

Grundwissen

- -
    -
  • "Strict Mode" in Kapitel 7 ("JavaScript Syntax") aus dem Buch Speaking JavaScript
    • -
diff --git a/files/de/glossary/slug/index.html b/files/de/glossary/slug/index.html deleted file mode 100644 index 329557883b6c51..00000000000000 --- a/files/de/glossary/slug/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Slug -slug: Glossary/Slug -tags: - - Slug -translation_of: Glossary/Slug ---- -

Slug meint den eindeutigen Bezeichner eines Teils einer Webadresse, der typischerweise am Ende einer URL steht. Im MDN Kontext bezeichnet er einen Abschnitt der URL dieser Art "<locale>/docs/".

- -

Es kann sich dabei auch um das letzte Element handeln, wenn ein neues Dokument unterhalb eines Elterndokuments erstellt wird; z.B. ist der Slug dieser Seite Glossary/Slug .

diff --git a/files/de/glossary/specification/index.html b/files/de/glossary/specification/index.html deleted file mode 100644 index f4bd10de94fb38..00000000000000 --- a/files/de/glossary/specification/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Spezifikation -slug: Glossary/Specification -tags: - - Glossar - - Standardisierung -translation_of: Glossary/Specification ---- -

Eine Spezifikation ist ein Dokument das detailliert auslegt was für Funktionalität oder Attribute ein Produkt vor der Veröffentlichung enthalten muss. Im Bezug auf die Beschreibung des Internets, bedeutet das Wort „Spezifikation“ (oft einfach als "spec" abgekürzt) allgemein ein Dokument das eine Sprache, Technologie oder {{Glossary("API")}} beschreibt, welche wiederum die gesamte Reihe von offenen Webtechnologien ausmacht.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Spezification")}} auf Wikipedia
    • -
- -

Technische Referenz

- - diff --git a/files/de/glossary/sql/index.html b/files/de/glossary/sql/index.html deleted file mode 100644 index 7fe4410ba99a80..00000000000000 --- a/files/de/glossary/sql/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: SQL -slug: Glossary/SQL -tags: - - Datenbank - - Glossar - - Programmieren - - Sql -translation_of: Glossary/SQL ---- -

SQL (Structured Query Language) ist eine beschreibende Computersprache, entworfen für die Aktualisierung, das Abrufen und die Berechnung von Daten in einer tabellenbasierten Datenbank.

- -

Mehr erfahren

- -

Allgemein

- -
    -
  • {{Interwiki("wikipedia", "SQL")}} auf Wikipedia
    • -
- -

SQL lernen

- - diff --git a/files/de/glossary/statement/index.html b/files/de/glossary/statement/index.html deleted file mode 100644 index 12ae128d8e82ed..00000000000000 --- a/files/de/glossary/statement/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Anweisung -slug: Glossary/Statement -tags: - - Anweisung - - Glossar - - Glossary - - JavaScript - - befehl -translation_of: Glossary/Statement -original_slug: Glossary/Anweisung ---- -

In einer Programmiersprache ist eine Anweisung eine Vorschrift innerhalb des Codes, die zur Laufzeit des Programmes einem Befehl entspricht. Jedes Programm ist zusammengesetzt aus einer Folge von Anweisungen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "Statement (computer science)")}} auf Wikipedia (englisch)
    • -
- -

Technische Referenz

- - - -
    -
diff --git a/files/de/glossary/string/index.html b/files/de/glossary/string/index.html deleted file mode 100644 index 6d3a8c7cc4b73e..00000000000000 --- a/files/de/glossary/string/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: String -slug: Glossary/String -tags: - - Anfänger - - String - - Wörterbuch - - Zeichenkette -translation_of: Glossary/String ---- -

In jeder Programmiersprache ist ein String eine Zeichenkette von Charakteren bzw. einzelnen Zeichen, welche Text repräsentieren.

- -

In {{Glossary("JavaScript")}} ist ein String ein Standard-Objekt. Es is ein primitiver Wert und das {{jsxref("String")}} Objekt ist ein {{Glossary("wrapper")}} um einen primitiven String.

- -

Lerne mehr

- -

Allgemein

- - diff --git a/files/de/glossary/svg/index.html b/files/de/glossary/svg/index.html deleted file mode 100644 index 36a5c92cfe0112..00000000000000 --- a/files/de/glossary/svg/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: SVG -slug: Glossary/SVG -translation_of: Glossary/SVG ---- -

Scalable Vector Graphics (SVG, englisch für Skalierbare Vektorgrafiken) ist ein 2D-Vektorgrafik-Format mit einer {{Glossary("XML")}}-Syntax.

- -

Das {{Glossary("W3C")}} begann die Arbeit an SVG in den späten 90er Jahren. Beliebt wurde SVG jedoch erst mit der Veröffentlichung des {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9, der SVG unterstützte. Inzwischen unterstützen alle wichtigen {{Glossary("browser","Browser")}} SVG.

- -

Basierend auf einer {{Glossary("XML")}}-Syntax kann SVG mit {{Glossary("CSS")}} gestylt und durch {{Glossary("JavaScript")}} interaktiv gemacht werden. HTML5 erlaubt eine direkte Einbindung von SVG {{Glossary("Tag","tags")}} in ein {{Glossary("HTML")}}-Dokument.

- -

Als {{Interwiki("wikipedia", "Vektorgrafik-Format")}} lassen sich SVG-Grafiken unbegrenzt skalieren, was sie im {{Glossary("responsive design", "Responsive-Design")}} unbezahlbar macht, da sich UI-Elemente und Grafiken erstellen lassen, die sich an jede Bildschirmgröße anpassen. SVG bietet zudem eine Menge nützlicher Werkzeuge wie Abschneiden, Maskieren, Filter und Animationen.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "SVG")}} auf Wikipedia
    • -
- -

SVG lernen

- - - -

Technische Informationen

- - diff --git a/files/de/glossary/tag/index.html b/files/de/glossary/tag/index.html deleted file mode 100644 index 3182ae7521c2a2..00000000000000 --- a/files/de/glossary/tag/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Tag -slug: Glossary/Tag -tags: - - HTML - - tag -translation_of: Glossary/Tag ---- -

In {{Glossary("HTML")}} wird ein tag benutzt, um ein {{Glossary("element")}} zu erstellen. Der Name des HTML-Elements steht zwischen spitzen Klammern wie beispielsweise <p>, das für Paragraf steht. Wichtig ist, dass dem Namen des schließenden Tags ein Schrägstrich vorangestellt wird, so z.B. </p>, und auch, dass in {{glossary("empty element", "empty elements")}} – leeren Elementen – ein schließendes Tag weder nötig noch erlaubt ist. Wenn {{Glossary("attribute", "attributes")}} – Attribute – nicht genannt sind, werden Standardwerte eingesetzt.

- -

Learn more

- -

General Knowledge

- -
    -
  • {{Interwiki("wikipedia", "HTML element")}} on Wikipedia
    • -
  • HTML elements syntax on {{glossary("WHATWG")}}
    • -
- -

Technical reference

- - diff --git a/files/de/glossary/tcp/index.html b/files/de/glossary/tcp/index.html deleted file mode 100644 index d40278f3ff6cd8..00000000000000 --- a/files/de/glossary/tcp/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: TCP -slug: Glossary/TCP -tags: - - Daten - - Glossar - - Infrastruktur - - TCP -translation_of: Glossary/TCP ---- -

TCP (Transmission Control Protocol) ist ein wichtiges Netzwerk-{{Glossary("Protokoll")}} das zwei Hosts miteinander verbinden und Datenströme austauschen lässt. TCP garantiert die Vermittlung von Daten und Paketen in der selben Ordnung in der sie gesendet wurden. Vint Cerf und Bob Kahn, welche zu der Zeit DARPA-Wissenschaftler waren, entwarfen TCP in den 1970ern.

- -

TCP role is to ensure the packets are reliably delivered, error free. TCP has congestion control, which means the initial requests start small, increasing in size to the levels of bandwidth the computers, servers, and network can support.

- -

Siehe auch

- -
    -
  • {{Glossary("IPv4")}}
    • -
  • {{Glossary("IPv6")}}
    • -
  • {{Glossary("Packet")}}
    • -
  • Wikipedia {{Interwiki("wikipedia", "Transmission Control Protocol")}}
    • -
  • http overview
    • -
diff --git a/files/de/glossary/tls/index.html b/files/de/glossary/tls/index.html deleted file mode 100644 index 7d608dc96dfbe5..00000000000000 --- a/files/de/glossary/tls/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: TLS -slug: Glossary/TLS -tags: - - Cryptography - - Glossary - - Infrastructure - - Security -translation_of: Glossary/TLS ---- -

Transport Layer Security (TLS), Nachfolger von Secure Sockets Layer (SSL), ist ein in Applikationen verwendetes {{Glossary("protocol")}} um sicher über ein Netzwerk zu kommunizieren, sowie Manipulation und Abhören von E-Mail, Internetsurfen, Nachrichtenaustausch und weiterer Protokollkommunikationen zu verhindern.

- -

Alle modernen Webbrowser unterstützen das TLS Protokoll mit der Anforderung an den Server, ein valides {{Glossary("Digital certificate", "digital certificate")}} bereitzustellen, das dessen Identität bestätigt um eine sichere Verbindung aufzubauen. Es ist sowohl für den Client wie auch den Server möglich, sich gegenseitig zu authentifizieren, wenn beide Seiten ihr eigenes, individuelles, digitales Zertifikat bereitstellen.

- -

Allgemeines

- - - -

Spezifikationen

- -
    -
  • RFC 5246 (The Transport Layer Security Protocol, Version 1.2)
    • -
diff --git a/files/de/glossary/truthy/index.html b/files/de/glossary/truthy/index.html deleted file mode 100644 index c45968bb3208a5..00000000000000 --- a/files/de/glossary/truthy/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Truthy -slug: Glossary/Truthy -translation_of: Glossary/Truthy ---- -

In {{Glossary("JavaScript")}} gilt ein Wert als truthy, wenn er in einem {{Glossary("Boolean")}} Kontext evaluiert true ergibt. Alle Werte werden als truthy angesehen, solange sie nicht {{Glossary("Falsy", "falsy")}}, also false, 0, "", null, undefined oder NaN sind.

- -

JavaScript benutzt {{Glossary("Type_conversion", "Typ-Konversation")}} in Booleschen Kontexten.

- -

Beispiele

- -

All diese if-statements werden ausgeführt.

- -
if (true)
-if ({})
-if ([])
-if (42)
-if ("foo")
-if (new Date())
-if (-42)
-if (3.14)
-if (-3.14)
-if (Infinity)
-if (-Infinity)
-
- -

Siehe auch

- -
    -
  • {{Glossary("Falsy")}}
    • -
  • {{Glossary("Type_Conversion", "Coercion")}}
    • -
  • {{Glossary("Boolean")}}
    • -
diff --git a/files/de/glossary/type/index.html b/files/de/glossary/type/index.html deleted file mode 100644 index 0aee277a07707d..00000000000000 --- a/files/de/glossary/type/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Typ -slug: Glossary/Type -tags: - - CodingScripting - - Glossary - - JavaScript -translation_of: Glossary/Type -original_slug: Glossary/Typ ---- -

Typen sind Charakteristiken von {{Glossary("Value", "Werten")}}, die festlegen, welche Art von Daten oder Strukturen ein Wert bzw. eine Variable speichern kann.

- -

Spricht man von Datentypen in JavaScript, so kann ein {{domxref("Boolean")}} nur die Werte true/false speichern, während ein {{domxref("String")}} Zeichenketten speichert. Eine {{domxref("Number")}} speichert nur Zahlen jeder Art, und so weiter.

- -

Der Typ eines Wertes bestimmt außerdem, welche Arten von Operationen damit zulässig sind. Z.B. können Zahlen nur mit Zahlen multipliziert werden, nicht aber mit Strings oder Booleans. Dieses Wissen ist auch nützlich für den Vergleich von Typen. Denn neben Primitiven Werten gibt es auch strukturierte Datentypen wie Objekte.

- - diff --git a/files/de/glossary/type_conversion/index.html b/files/de/glossary/type_conversion/index.html deleted file mode 100644 index 0436dd286f036e..00000000000000 --- a/files/de/glossary/type_conversion/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Typumwandlung -slug: Glossary/Type_Conversion -tags: - - CodingScripting - - Glossary - - Typ-Casting - - Typ-Konvertierung - - Typumwandlung -translation_of: Glossary/Type_Conversion ---- -

Typumwandlung (oder Typ-Konvertierung) meint den Transfer von Daten aus Datentyp in einen anderen. Implizite Umwandlung geschieht, wenn der Kompiler automatisch Datentypen zuweist. Der Quellcode kann aber auch explizit die Umwandlung von Typen festlegen.

- -

Beispiel

- -

Gegeben sein die folgende Anweisungen:

- -
var a = 5 + 2.0;
-var b = Number("0x11");
-
- -

(a) Die Gleitkommazahl (float) 2.0 wird hier implizit ein eine Ganzzahl (integer) umgewandelt.

- -

(b) Der String 0x11 wird explizit in die Ganzzahl 17 umgewandelt.

- - diff --git a/files/de/glossary/ui/index.html b/files/de/glossary/ui/index.html deleted file mode 100644 index 7ead5b525230b4..00000000000000 --- a/files/de/glossary/ui/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: UI -slug: Glossary/UI -tags: - - Bedienoberfläche - - Benutzeroberfläche - - Benutzerschnittstelle - - User Interface -translation_of: Glossary/UI ---- -

User Interface (UI) bezeichnet alles, was eine Interaktion zwischen Mensch und Maschine ermöglicht. Im Zusammenhang mit Computern reicht es von einer Tastatur über einen Joystick, einen Bildschirm bis hin zu einem Programm.

- -

Bezogen auf Software kann es sich um eine Kommandozeile handeln, eine Webseite, ein Eingabeformular oder ganz allgemein das Frontend einer Applikation.

- -

Learn More

- -

General Knowledge

- -
    -
  • {{interwiki("wikipedia", "User_interface", "User interface")}} on Wikipedia
    • -
  • {{interwiki("wikipedia", "Front_end_development", "Front end development")}} on Wikipedia
    • -
diff --git a/files/de/glossary/undefined/index.html b/files/de/glossary/undefined/index.html deleted file mode 100644 index a275f34b320664..00000000000000 --- a/files/de/glossary/undefined/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: undefined -slug: Glossary/undefined -tags: - - CodingScripting - - Glossary -translation_of: Glossary/undefined ---- -

Ein {{Glossary("primitive","primitiver")}} Wert, der automatisch gerade erst deklarierten Variablen zugewiesen wird, und der Wert, den angegebene {{Glossary("Argument","Argumente")}} annehmen, wenn sie im Funktionsaufruf nicht verwendet werden.

- -

Mehr lernen

- -

Allgemeine Referenzen

- -
    -
  • {{Interwiki("wikipedia", "Undefined value")}} im englischen Wikipedia
    • -
- -

Technische Referenzen

- - diff --git a/files/de/glossary/uri/index.html b/files/de/glossary/uri/index.html deleted file mode 100644 index 16f6001f308804..00000000000000 --- a/files/de/glossary/uri/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: URI -slug: Glossary/URI -tags: - - Glossary - - HTTP - - URI - - URL -translation_of: Glossary/URI ---- -

Ein URI (Uniform Resource Identifier, deutsch: einheitlicher Bezeichner für Ressourcen) ist ein Textstring, der auf eine Ressource verweist. Die verbreitetsten sind {{Glossary("URL","URLs")}}, die auf eine Ressource verweisen, indem sie ihren Ort im Internet angibt. Im Gegensatz dazu beziehen sich {{Glossary("URN","URNs")}} auf Ressourcen mit einem Namen, der in einem bestimmten Namensraum gültig ist, wie die ISBN eines Buches.

- -

Learn more

- -

General knowledge

- - diff --git a/files/de/glossary/url/index.html b/files/de/glossary/url/index.html deleted file mode 100644 index 878b90515e62dd..00000000000000 --- a/files/de/glossary/url/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: URL -slug: Glossary/URL -tags: - - Glossary - - Infrastructure -translation_of: Glossary/URL ---- -

Ein Uniform Resource Locator (URL) ist ein Text-String, der angibt, wo eine Ressource im Internet gefunden werden kann.

- -

Im Zusammenhang mit {{Glossary("HTTP")}}, werden URLs auch "Web-Adresse" oder "Link" genannt. Der Browser zeigt URLs in der Adressleiste an, zum Beispiel: https://developer.mozilla.org Einige Browser zeigen nur den Teil der URL nach den "//" an, das ist der {{Glossary("Domain name")}}

- -

URLs können auch für den Dateiaustausch ({{Glossary("FTP")}}) , E-Mails ({{Glossary("SMTP")}}), und andere Anwendungen genutzt werden.

- -

Mehr erfahren

- -

Allgemeine Verweise

- -
    -
  • {{Interwiki("wikipedia", "URL")}} auf Wikipedia
    • -
- -

Zum Lernen

- - - -

Spezialisierung

- - diff --git a/files/de/glossary/user_agent/index.html b/files/de/glossary/user_agent/index.html deleted file mode 100644 index 6a6436386cd40b..00000000000000 --- a/files/de/glossary/user_agent/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Nutzeragent -slug: Glossary/User_agent -tags: - - Browser - - Glossary - - Nutzeragent - - agent -translation_of: Glossary/User_agent ---- -

Ein Nutzeragent (Englisch: User Agent) ist ein Programm, das einem Nutzer den Zugriff auf Netzwerkdienste ermöglicht. Auf das {{Glossary("World Wide Web", "Web")}} bezogen handelt es sich meist um den {{Glossary("Browser","Browser")}}.
- Außer einem Browser kann es sich auch um einen Bot handeln, ein automatisches Programm, das das Web durchsucht. Auch Download-Manager sowie andere Programme, die auf das Web zugreifen, fallen in diese Kategorie.

- -

Mit jeder Anfrage, die Browser an einen Server schicken, senden sie die {{Glossary("HTTP")}}-Kopfzeile {{HTTPHeader("User-Agent")}}, mit der sie sich selbst zu erkennen geben. Dieser Text, die User-Agent-Kennung, enthält meistens Informationem über den Browser, seine Version sowie das Betriebssystem des Computers.
- Ein typisches Beispiel ist Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0.

- -

Spambots, Download-Manager und auch manche Browser senden falsche Angaben, um ihre Identität zu verschleiern und so Restriktionen zu umgehen. Im Englischen wird diese Verschleierung als user agent spoofing bezeichnet.

- -

Die User-Agent-Kennung kann im Browser mit {{Glossary("JavaScript")}} über die Eigenschaft {{domxref("navigator.userAgent")}} ausgelesen werden. Sie ist jedoch von eher geringem Nutzen und insbesondere – obwohl diese Methode nach wie vor weit verbreitet ist – kaum geeignet, um spezielle Fähigkeiten des Browsers festzustellen.

- -

Siehe auch

- -

Allgemein

- -
    -
  • {{interwiki("wikipedia", "User agent")}} auf Wikipedia
    • -
- -

Technische Referenzen

- - - - diff --git a/files/de/glossary/ux/index.html b/files/de/glossary/ux/index.html deleted file mode 100644 index 076f215b5d4d5d..00000000000000 --- a/files/de/glossary/ux/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: UX -slug: Glossary/UX -tags: - - Design - - Glossary - - User experience -translation_of: Glossary/UX ---- -

UX steht als Akronym für User eXperience (dt. etwa „Nutzungserlebnis“ oder auch „Anwendererlebnis“). Es untersucht die Interaktion zwischen Nutzer*innen und einem System, bspw. einer Website oder -anwendung. Das Ziel der User Experience ist es, die Bedienung eines Systems aus der Sicht der Nutzer*innen so einfach wie möglich zu gestalten.

- -

Das System kann dabei jegliche Art von Produkt oder Anwendung sein, die von Nutzer*innen bedient wird. Untersuchungen zur UX einer Website können bspw. zeigen, ob die Inhalte der Seite leicht verständlich sind und ob die Navigation zu anderen Themenbereichen oder das erledigen häufiger Aufgaben einfach sind – und an welchen Stellen diese Abläufe verbessert werden könnten.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "User Experience")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/validator/index.html b/files/de/glossary/validator/index.html deleted file mode 100644 index ba8a2a48321051..00000000000000 --- a/files/de/glossary/validator/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Validator -slug: Glossary/Validator -tags: - - Syntaxprüfung - - validator - - überprüfen -translation_of: Glossary/Validator ---- -

Bei einem Validator handelt es sich um ein Programm, das Code auf Syntaxfehler hin prüft. Validatoren können für beliebige Formate und Programmiersprachen erstellt werden, wobei wir uns in unserem Kontext auf Tools beziehen, die {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("XML")}} untersuchen.

- -

Learn more

- -

General knowledge

- - diff --git a/files/de/glossary/value/index.html b/files/de/glossary/value/index.html deleted file mode 100644 index b03c4f550e2c1c..00000000000000 --- a/files/de/glossary/value/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Wert -slug: Glossary/Value -translation_of: Glossary/Value ---- -

Im Zusammenhang mit Daten oder einem Objekt-{{Glossary("Wrapper")}} um diese Daten, ist der Wert der {{Glossary("Primitive","primitive Wert")}}, den der Wrapper enthält. Im Kontext einer {{Glossary("Variable")}} oder {{Glossary("Property","Eigenschaft")}}, kann dieser Wert entweder primitiv oder eine {{Glossary("Object reference","Objektreferenz")}} sein.

- -

Mehr erfahren

- -

Allgemeines

- -
    -
  • {{Interwiki("wikipedia", "Wrapper-Klasse")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/variable/index.html b/files/de/glossary/variable/index.html deleted file mode 100644 index 5c32b4a75a590d..00000000000000 --- a/files/de/glossary/variable/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Variable -slug: Glossary/Variable -tags: - - CodingScripting - - Glossary - - JavaScript -translation_of: Glossary/Variable ---- -

Eine Variable ist ein benannter Ort, um einen {{Glossary("Value", "Wert")}} zu speichern. Damit kann durch einen vorbestimmten Namen auf einen unvorhersehbaren Wert zugegriffen werden.

- -

Mehr erfahren

- -

Algemeines

- -
    -
  • {{Interwiki("wikipedia", "Variable_(Programmierung)","Variable")}} auf Wikipedia
    • -
- -

Rechnische Referenzen

- - diff --git a/files/de/glossary/vendor_prefix/index.html b/files/de/glossary/vendor_prefix/index.html deleted file mode 100644 index 38dea6a7ea3041..00000000000000 --- a/files/de/glossary/vendor_prefix/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Herstellerpräfix -slug: Glossary/Vendor_Prefix -tags: - - '-moz-' - - '-ms-' - - '-o-' - - '-webkit-' - - CSS - - Glossar - - Herstellerpräfix - - JavaScript - - Kodieren - - Präfix - - scripten -translation_of: Glossary/Vendor_Prefix -original_slug: Glossary/Herstellerpräfix ---- -

Browserhersteller fügen manchmal Präfixe zu experimentellen oder nichtstandardisierten CSS-Eigenschaften hinzu, damit Entwickler mit neuen Ideen experimentieren können, während - in der Theorie - verhindert werden soll, dass sie sich auf diese Experimente verlassen und ihr Code dann während des Standardisierungsprozesses bricht. Entwickler sollten mit der Verwendung der Eigenschaft ohne Präfix warten, bis das Browserverhalten standardisiert ist.

- -
-

Browserhersteller arbeiten daran, keine Herstellerpräfixe mehr für experimentelle Features zu verwenden. Webentwickler haben diese auf Produktionswebseiten benutzt, trotz ihrer experimentellen Natur. Dies hat es für Browserhersteller erschwert, Kompatibilität zu sichern und an neuen Funktionen zu arbeiten. Es war außerdem nachteilig für kleinere Browser, die sich gezwungen sehen, die Präfixe anderer Browser hinzuzufügen, um beliebte Webseiten zu laden.

- -

In letzter Zeit geht der Trend dahin, experimentelle Features hinter benutzergesteuerten Flags oder Einstellungen hinzuzufügen und an kleineren Spezifikationen zu arbeiten, die Stabilität wesentlich schneller erreichen.

-
- -

CSS-Präfixe

- -

Die führenden Browser nutzen folgende Präfixe:

- -
    -
  • -webkit- (Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)
    • -
  • -moz- (Firefox)
    • -
  • -o- (Alte Versionen von Opera aus der Zeit vor WebKit)
    • -
  • -ms- (Internet Explorer und Microsoft Edge)
    • -
- -

API-Präfixe

- -

Historisch gesehen haben Hersteller Präfixe auch in experimentellen APIs verwendet. Wenn eine gesamte Schnittstelle experimentell ist, wird ihr Name mit einem Präfix versehen (aber nicht der der enthaltenen Methoden oder Eigenschaften). Wird eine experimentelle Eigenschaft oder Methode einer standardisierten Schnittstelle hinzugefügt, erhält diese einzelne Eigenschaft oder Methode einen Präfix.

- -

Schnittstellenpräfixe

- -

Präfixe für Schnittstellennamen werden groß geschrieben:

- -
    -
  • Webkit (Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)
    • -
  • Moz (Firefox)
    • -
  • O (Alte Versionen von Opera aus der Zeit vor WebKit)
    • -
  • MS (Internet Explorer und Microsoft Edge)
    • -
- -

Präfixe für Methoden und Eigenschaften

- -

Präfixe für Eigenschaften und Methoden werden klein geschrieben:

- -
    -
  • webkit (Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)
    • -
  • moz (Firefox)
    • -
  • o (Alte Versionen von Opera aus der Zeit vor WebKit)
    • -
  • ms (Internet Explorer und Microsoft Edge)
    • -
- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "CSS filter#Prefix_filters", "Vendor prefix")}} auf Wikipedia (englisch)
    • -
diff --git a/files/de/glossary/viewport/index.html b/files/de/glossary/viewport/index.html deleted file mode 100644 index 71da0604b87bc5..00000000000000 --- a/files/de/glossary/viewport/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Viewport -slug: Glossary/Viewport -tags: - - Glossary - - Graphics - - viewport -translation_of: Glossary/Viewport ---- -

Ein viewport (deutsch: Ansichtsfenster) repräsentiert in der Computergrafik den polygonalen (normalerweise rechteckigen) Bereich, der im Moment angezeigt wird. Bei Webbrowsern bezieht es sich auf den Teil des betrachteten Dokuments, der gerade in seinem Fenster sichtbar ist (oder dem Bildschirm, wenn das Dokument im Vollbildmodus betrachtet wird). Inhalte außerhalb des viewports sind nicht auf dem Bildschirm sichtbar, bis man sie in den sichtbaren Bereich scrollt.

- -

Der Teil des viewports, der im Moment sichtbar ist, wird als visual viewport (deutsch etwa: sichtbares Ansichtsfenster) bezeichnet. Dieser kann kleiner sein, als der durch das Layout bestimmte viewport, zum Beispiel, wenn der Nutzer (auf einem Mobilgerät) hineinzoomt. Der layout viewport bleibt dabei gleich, aber der visual viewport ist kleiner geworden.

- -

Mehr dazu

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/visual_viewport/index.html b/files/de/glossary/visual_viewport/index.html deleted file mode 100644 index 0a31701b5a737d..00000000000000 --- a/files/de/glossary/visual_viewport/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Visual Viewport -slug: Glossary/Visual_Viewport -tags: - - Glossary - - Reference - - VisualViewport -translation_of: Glossary/Visual_Viewport ---- -

Der Bereich des viewports, der im Moment sichbar ist, wird visual viewport (deutsch etwa Ansichtsfenster, bzw. sichtbares/visuelles Ansichtsfenster) genannt. Der visual viewport kann dabei kleiner als der viewport des eigentlichen Layouts sein, zum Beispiel wenn der Nutzer in eine Webseite hineinzoomt (hauptsächlich auf Mobilgeräten). Der visual viewport ist der sichtbare Teil des Bildschirms, ohne Bildschirmtastatur, Bereiche außerhalb des gezoomten Ausschnitts oder sämtliche anderen auf dem Bildschirm sichtbaren Objekte, die nicht mit der Größe der Seite skalieren.

- -

Mehr dazu

- -

Allgemeinwissen

- - diff --git a/files/de/glossary/voip/index.html b/files/de/glossary/voip/index.html deleted file mode 100644 index ed3aef58754a65..00000000000000 --- a/files/de/glossary/voip/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: VoIP -slug: Glossary/VoIP -tags: - - Glossary - - Infrastructure - - VoIP -translation_of: Glossary/VoIP ---- -

VoIP (Voice over Internet Protocol, deutsch etwa: "Stimmübertragung über das Internetprotokoll") ist eine Technologie, mit der Sprachnachrichten über IP-Netzwerke (Internet Protocol versendet werden. Gängige VoIP Software-Pakete sind Skype, Msn Messenger, Yahoo und viele weitere. Alles, was über VoIP übermittelt wird, ist digital. Es wird auch als IP-Telefonie oder Internet-Telefonie bezeichnet. Der Hauptgrund für die Benutzung der VoIP-Technologie sind die Kosten.

- -

VoIP ermöglicht es, einen Direktanruf von einem Computer, einem speziellen VoIP-Telefon oder einem klassischen Telefon, das mit einem speziellen Adapter verbunden ist, zu tätigen. Für VoIP wird eine High-Speed-Internetverbindung benötigt. Normalerweise verursachen Telefonanrufe über das Internet keine weiteren Kosten, als das, was der Nutzer für den Internetzugang bezahlt, genauso wie der Nutzer auch nicht für das Versenden einzelner E-mails über das Internet bezahlt.

- -

Mehr dazu

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "VoIP")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/w3c/index.html b/files/de/glossary/w3c/index.html deleted file mode 100644 index aaa1b8a0f048e3..00000000000000 --- a/files/de/glossary/w3c/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: W3C -slug: Glossary/W3C -tags: - - Community - - Consortium - - Glossar - - Intro - - W3C - - Web consortium -translation_of: Glossary/W3C ---- -

Das World Wide Web Consortium (W3C) ist eine internationale Gruppe, die Regeln und Strukturen für das {{Glossary("World Wide Web", "Web")}} vorgibt und pflegt.

- -

Über 350 Organisationen sind Mitglieder im W3C und entwickeln gemeinsam Webstandards, leiten weitere Programme und stellen ein freies Forum zum Austausch über das Web zur Verfügung. Das W3C koordiniert die Unternehmen in der Industrie, damit sie die gleichen W3C-Standards umsetzen.

- -

Alle Standards durchlaufen vier Stadien der Entwicklung: Funktionstüchtiger Entwurf (Working Draft: WD), Mitgliedsempfehlung (Candidate Recommendation: CR), Vorgeschlagene Empfehlung (Proposed Recommendation: PR) und W3C-Empfehlung (W3C Recommendation: REC).

- -

Mehr Erfahren

- -

Allgemeinwissen

- -
    -
  • Webseite des W3C
    • -
  • {{Interwiki("wikipedia", "World_Wide_Web_Consortium", "W3C")}} bei Wikipedia
    • -
diff --git a/files/de/glossary/wai/index.html b/files/de/glossary/wai/index.html deleted file mode 100644 index 3a338098003196..00000000000000 --- a/files/de/glossary/wai/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: WAI -slug: Glossary/WAI -tags: - - Barrierefreiheit - - Glossary -translation_of: Glossary/WAI ---- -

WAI oder Web Accessibility Initiative ist ein Ansatz des World Wide Web Consortium (W3C) um das Internet zugänglicher für Menschen mit verschiedenen Einschränkungen zu machen, die möglicherweise alternative {{Glossary("Browser")}} oder Geräte brauchen.

- -

Mehr dazu

- -

Allgemeines

- -
    -
  • Webseite der WAI
    • -
  • {{Interwiki("wikipedia", "Web Accessibility Initiative")}} auf Wikipedia
    • -
diff --git a/files/de/glossary/webdav/index.html b/files/de/glossary/webdav/index.html deleted file mode 100644 index 3caf3300ac7bf1..00000000000000 --- a/files/de/glossary/webdav/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: WebDAV -slug: Glossary/WebDAV -tags: - - Glossar - - Infrastruktur -translation_of: Glossary/WebDAV ---- -

WebDAV (Web Distributed Authoring and Versioning) ist eine {{Glossary("HTTP")}} Erweiterung die es Webentwicklern erlaubt ihren Inhalt rechnerfern von einem Klienten zu aktualisieren.

- -

WebDAV wird selten allein eingesetzt, aber zwei Erweiterungen sind sehr üblich: {{Glossary("CalDAV")}} (remote-access calendar) und {{Glossary("CardDAV")}} (remote-access address book).

- -

WebDAV erlaubt Klienten

- -
    -
  • Webseiten-Metadaten (e.g. Autor oder Erstellungsdatum) hinzuzufügen, zu löschen und abzurufen
    • -
  • Seiten jedes Medientyps zu relevanten Seiten zu verlinken
    • -
  • Sätze von Dokumenten zu erstellen und hierarchische Listen abzurufen
    • -
  • Webseiten zu kopieren und zu verschieben
    • -
  • ein Dokument zu sperren, damit dieses nicht von mehreren Personen gleichzeitig bearbeitet wird
    • -
- -
-
- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{Interwiki("wikipedia", "WebDAV")}} on Wikipedia
    • -
- -

Technische Referenz

- -
    -
  • {{rfc(2518)}}
    • -
  • {{rfc(3253)}}
    • -
  • {{rfc(3744)}}
    • -
diff --git a/files/de/glossary/webm/index.html b/files/de/glossary/webm/index.html deleted file mode 100644 index f910fc066fc8a9..00000000000000 --- a/files/de/glossary/webm/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: WebM -slug: Glossary/webm -tags: - - Glossary - - Media -translation_of: Glossary/webm ---- -

WebM ist ein u.a. von Google entwickeltes Containerformat für audiovisuelle Dateien, das überwiegend für die verlustbehaftete Komprimierung von Videodateien im Web genutzt wird. Der Programmcode von WebM (sowie der eingesetzten Video- und Audio-{{Glossary("Codec", "Codecs")}} ist quelloffen und soll als offener, lizenzgebührenfreier Standard eine Alternative vor allem zum weit verbreiteten MP4-Format bieten.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "WebM")}} auf Wikipedia
    • -
- - diff --git a/files/de/glossary/webp/index.html b/files/de/glossary/webp/index.html deleted file mode 100644 index 614ed8c56613df..00000000000000 --- a/files/de/glossary/webp/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: WebP -slug: Glossary/webp -tags: - - Glossary - - Media -translation_of: Glossary/webp ---- -

WebP ist ein von Google entwickeltes Grafikformat mit verlustfreier oder verlustbehafteter Komprimierung. Der Programmcode von WebP ist quelloffen und soll als offener Standard eine moderne Alternative vor allem zum {{Glossary("JPEG")}}-Format darstellen, kann aber auch als Ersatz für {{Glossary("PNG")}}- oder (animierte) {{Glossary("GIF")}}-Dateien genutzt werden.

- -

Mehr erfahren

- -

Allgemeinwissen

- -
    -
  • {{interwiki("wikipedia", "WebP")}} auf Wikipedia
    • -
- - diff --git a/files/de/glossary/webrtc/index.html b/files/de/glossary/webrtc/index.html deleted file mode 100644 index 4b1c31422fa594..00000000000000 --- a/files/de/glossary/webrtc/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: WebRTC -slug: Glossary/WebRTC -translation_of: Glossary/WebRTC ---- -

WebRTC (Web Real-Time Communication (übersetzt: Web Echtzeit Kommunikation)) ist eine {{Glossary("API")}}, die zum Erstellen von Video-Chat-, Audiogespräch- und P2P-Dateiaustausch
- Web-Anwendungen benutzt wird.

- -

WebRTC besteht hauptsächtlich aus folgenden Teilen:

- -
-
{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}
-
Gewährt Zugang zu einer Kamera und/oder Mikrofon des Geräts, dessen Signale an eine RTC-Verbindung übergeben werden können.
-
{{domxref("RTCPeerConnection")}}
-
Eine Schnittstelle zum Konfigurieren von Video- oder Audio-Gespächen.
-
{{domxref("RTCDataChannel")}}
-
Stellt eine Methode zum Erstellen von {{Glossary("P2P")}} Daten Kanälen zwischen Browsern bereit.
-
- -

Learn more

- - diff --git a/files/de/glossary/websockets/index.html b/files/de/glossary/websockets/index.html deleted file mode 100644 index c7f446ea8aa824..00000000000000 --- a/files/de/glossary/websockets/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: WebSockets -slug: Glossary/WebSockets -tags: - - Glossar - - Infrastruktur - - Kommunikation - - Netzwerke - - Persistent - - Protokolle - - Stateless - - Verbindung - - Web - - WebSocket - - realtime -translation_of: Glossary/WebSockets ---- -

WebSocket ist ein {{Glossary("protocol", "Protokoll")}}, welches eine persistente {{Glossary("TCP")}} Verbindung zwischen {{Glossary("Server", "Server")}} und {{Glossary("client", "Client")}} herstellt, um jederzeit Daten austauschen zu können.

- -

Jede Client- oder Serveranwendung kann WebSockets verwenden, jedoch prinzipiell Web-Browser und Web-Server. Durch WebSocket kann ein Server Daten an einen Client übertragen ohne eine vorherige Anfrage von diesem erhalten zu haben. Dies ermöglicht dynamisches Aktualisieren von Inhalten.

- -

Erfahre mehr

- -

Allgemeines Wissen

- - - -

Technische Referenzen

- - - -

Lerne mehr darüber

- - diff --git a/files/de/glossary/wrapper/index.html b/files/de/glossary/wrapper/index.html deleted file mode 100644 index e2d06988494879..00000000000000 --- a/files/de/glossary/wrapper/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Wrapper -slug: Glossary/Wrapper -tags: - - Wrapper - - Wrapper-Funktionen -translation_of: Glossary/Wrapper ---- -

In Programmiersprachen wie JavaScript ist ein Wrapper eine Funktion, die dazu dient, eine oder mehrere andere Funktionen aufzurufen - manchmal aus Bequemlichkeit, manchmal aber auch, um diese an eine leicht abweichende Aufgabe im Prozess anzupassen.

- -

SDK Libraries für AWS sind beispielsweise Wrapper.

- -

Learn more

- -

General knowledge

- -

{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia

- - diff --git a/files/de/glossary/xml/index.html b/files/de/glossary/xml/index.html deleted file mode 100644 index 4c91829a120044..00000000000000 --- a/files/de/glossary/xml/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: XML -slug: Glossary/XML -tags: - - CodingScripting - - Glossary - - XML -translation_of: Glossary/XML ---- -

Die Erweiterbare Auszeichungssprache (englisch: eXtensible Markup Language, kurz XML) ist eine generische Auszeichnungssprache, die vom {{Glossary("W3C")}} spezifiziert wird. Die IT-Industrie verwendet viele Sprachen, die auf XML basieren, zur Datenbeschreibung.

- -

XML-Tags ähneln HTML-Tags, aber XML ist wesentlich flexibler, denn es erlaubt Nutzern, eigene Tags zu definieren. So verhält sich XML wie eine Meta-Sprache - das heißt, sie kann verwendet werden, um andere Sprachen zu definieren, wie zum Beispiel {{Glossary("RSS")}}. Außerdem ist HTML Sprache zur Darstellung von Inhalten, während XML eine deskriptive Sprache ist. Das heißt, dass XML viel größere Anwendungsgebiete als nur das Web hat. Zum Beispiel können Webdienste XML nutzen, um Anfragen und Antworten zu übertragen.

- -

Mehr Erfahren

- - diff --git a/files/de/learn/accessibility/accessibility_troubleshooting/index.html b/files/de/learn/accessibility/accessibility_troubleshooting/index.html deleted file mode 100644 index 78011e61ab83a0..00000000000000 --- a/files/de/learn/accessibility/accessibility_troubleshooting/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 'Aufgabe: Probleme bei der Zugänglichkeit beheben' -slug: Learn/Accessibility/Accessibility_troubleshooting -tags: - - Anfänger - - Aufgabe - - Barrierefreiheit - - CSS - - CodingSc - - HTML - - JavaScript - - Lernen - - WAI-ARIA -translation_of: Learn/Accessibility/Accessibility_troubleshooting ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
- -

In der Aufgabe dieses Moduls müssen Sie Probleme hinsichtlich Barrierefreiheit und Zugänglichkeit einer Beispielwebsite erkennen und beheben.

- - - - - - - - - - - - -
Voraussetzung:Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the previous articles in the course.
Lernziel:To test basic knowledge of accessibility fundamentals.
- -

Ausgangspunkt

- -

Um mit der Aufgabe zu beginnen, laden Sie den ZIP-Ordner mit den Beispieldateien herunter. Extrahieren Sie die Inhalte in ein neues Verzeichnis auf Ihrem Computer.

- -

Die fertige Beispielseite sollte so aussehen:

- -

- -

Sie werden einige Unterschiede / Probleme bei der Anzeige des Ausgangszustands der Aufgabe bemerken - dies ist hauptsächlich auf die Unterschiede im Markup zurückzuführen, die wiederum einige Stilprobleme verursachen, da das CSS nicht ordnungsgemäß angewendet wird. Keine Sorge - Sie werden diese Probleme in den nächsten Abschnitten beheben!

- -

Projektbeschreibung

- -

Für dieses Projekt wird Ihnen eine fiktive Naturseite präsentiert, die einen "sachlichen" Artikel über Bären enthält. Gegenwärtig gibt es eine Reihe von Problemen mit der Barrierefreiheit. Ihre Aufgabe ist es, die vorhandene Website zu erkunden und sie nach besten Kräften zu beheben, indem Sie die unten stehenden Fragen beantworten.

- -

Farben

- -

Aufgrund des momentanen Farbschemas ist der Text der Webseite schwierig zu lesen. Können Sie den momentanen Farbkontrast (Text/Hintergrund) testen und die Farben so ändern, um das Problem mit dem Farbkontrast zu lösen?

- -

Semantisches HTML

- -
    -
  1. Der Inhalt der Website ist momentan nicht besonders zugänglich. Probieren Sie aus was passiert, wenn Sie durch die Website navigieren.
    2. -
  2. Können Sie den Text des Artikels so ändern, um einfacher mit einem Screenreader navigieren zu können?
    3. -
  3. Das Navigationsmenü der Website (eingebunden in <div class="nav"></div>) könnte zugänglicher werden, indem man es in das geignete semantische HTML5-Element einbettet.
    4. -
- -
-

Hinweis: Sie müssen die CSS-Regelselektoren aktualisieren, die die Tags so formatieren, dass sie den semantischen Überschriften entsprechen. Sobald Sie Absatzelemente hinzufügen, werden Sie feststellen, dass das Styling besser aussieht.

-
- -

Die Bilder

- -

Die Bilder sind momenten nicht zugänglich für Benutzer von Screenreadern. Können Sie dies beheben?

- -

Der Musikplayer

- -
    -
  1. The <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
    2. -
  2. The <audio> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
    3. -
- -

Die Formulare

- -
    -
  1. The <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
    2. -
  2. The two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
    3. -
- -

Schaltfläche zum Ein- und Ausblenden von Kommentaren

- -

Die Schaltfläche für das Ein- und Ausblenden der Kommentare ist momentan nicht zugänglich für die Benutzung mit der Tastatur. Können Sie die Schaltfläche so ändern, damit sie für die Benutzung mit der Tastatur zugänglich wird - hinsichtlich Fokussieren mit der Tabulator-Taste und Aktivieren mit der Return-Taste.

- -

Die Tabelle

- -

Im momentanen Zustand ist die Datentabelle nicht sehr zugänglich. Es ist schwer für den Benutzer eines Screenreaders Datenreihen und Datenspalten miteinander zu verknüpen. Außerdem besitzt die Tabelle keine Zusammenfassung. Können Sie das HTML so erweitern, damit das Problem gelöst werden kann?

- -

Weitere Überlegungen

- -

Fallen Ihnen noch 2 weitere Verbesserungen für diese Seite ein um die Zugänglichkeit der Website zu verbessern?

- -

Einschätzung

- -

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Diskussionsthread für diese Übung, nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

- -

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

In diesem Modul

- - diff --git a/files/de/learn/accessibility/index.html b/files/de/learn/accessibility/index.html deleted file mode 100644 index a202c2bd1c0e64..00000000000000 --- a/files/de/learn/accessibility/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Barrierefreiheit -slug: Learn/Accessibility -tags: - - ARIA - - Anfänger - - Artikel - - Barrierefreiheit - - CSS - - Code Scripting - - HTML - - JavaScript - - Landing - - Lernen - - Modul -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

Das Erlernen von HTML, CSS und JavaScript ist nützlich, wenn Sie ein Webentwickler werden wollen, aber Ihr Wissen muss weiter gehen als nur mit den Technologien - Sie müssen sie verantwortungsvoll nutzen, damit Sie das Publikum für ihre Websites maximieren und niemand daran hindern, sie zu benutzen. Um dies zu erreichen, müssen Sie sich an allgemeine "Best Practices halten (die in allen HTML-, CSS und JavaScript-Themen demonstriert werden), Cross-Browser-Tests durchführen und die Barrierefreiheit von anfang an berücksichtigen. In diesem Modul werden wir uns ausführlich mit Letzterem beschäftigen.

- -

Voraussetzungen

- -

Um das Meiste aus diesem Modul herauszuholen, wäre es eine gute Idee, entweder mindestens die ersten beiden Module der HTML-, CSS- und JavaScript-Themen durchzuarbeiten, oder vielleicht sogar noch besser, die relevanten Teile des Barrierefreiheit Moduls durchzuarbeiten, während Sie die entsprechenden Technologiethemen durcharbeiten.

- -
-

Hinweis: Wenn Sie auf einem Computer/Tablet/anderem Gerät arbeiten, auf dem sie keine eigenen Dateien erstellen können, können Sie die meisten Codebeispiele in einem Online-Codeprogramm wie JSBin oder Thimble ausprobieren.

-
- -

Leitfäden

- -
-
Was ist Barrierefreiheit?
-
Dieser Artikel beginnt das Modul mit einem Blick auf was Barrierefreiheit eigentlich ist - das schließt ein, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge verschiedene Leute verwenden, um mit dem Web zu interagieren, und wie wir Barrierefreitheit zu einem Teil unseres Web-Entwicklungs-Workflows machen können
-
HTML: Eine gute Basis für Erreichbarkeit
-
Ein großer Teil der Webinhalte kann zugänglich gemacht werden, indem sichergestellt wird, dass immer die richtigen HTML-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel behandelt im Detail, wie HTML verwendet werden kann, um eine maximale Barrierefreiheit zu gewährleisten.
-
Best Practices für CSS and JavaScript Barrierefreiheit
-
CSS und JavaScript haben bei richtiger Anwendung auch das Potenzial, barrierefreie Web-Erlebnisse zu ermöglichen, können aber bei Missbrauch die Barrierefreiheit erheblich einschränken. Dieser Artikel beschreibt einige CSS- und JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.
-
WAI-ARIA Grundlagen
-
-

In Anlehnung an den vorangegangenen Artikel kann es manchmal schwierig sein, komplexe UI-Controls zu erstellen, die nicht semantisches HTML und dynamische, mit JavaScript aktualisierte Inhalte beinhalten. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie weitere Semantiken hinzufügt, die Browser und unterstützende Technologien erkennen und verwenden können, um den Benutzern mitzuteilen, was vor sich geht. Hier zeigen wir, wie man es grundlegend einsetzt, um die Barrierefreiheit zu verbessern.

-
-
Barrierefreies Multimedia
-
Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme verursachen können, sind Multimedia - Video-, Audio- und Bildinhalte. Diese müssen mit geeigneten textlichen Alternativen ausgestattet werden, damit sie von unterstützenden Technologien und ihren Nutzern verstanden werden können. Dieser Artikel zeigt wie dies richtig umgesetzt wird.
-
Mobile Barrierefreiheit
-
Da der Webzugriff auf mobilen Geräten heute so beliebt ist und Plattformen wie iOS und Android über vollwertige Barrierefreiheitswerkzeuge verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobilfunkspezifischen Überlegungen zur Barrierefreiheit.
-
- -

Aufgaben

- -
-
Troubleshooting für Barrierefreiheit
-
In den Aufgaben für dieses Modul geben wir Ihnen eine einfache Seite mit einer Reihe von Problemen in der Barrierefreiheit, die Sie diagnostizieren und beheben müssen.
-
- -

Siehe auch

- - diff --git a/files/de/learn/common_questions/index.html b/files/de/learn/common_questions/index.html deleted file mode 100644 index 4aafae4a3227fb..00000000000000 --- a/files/de/learn/common_questions/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Common questions -slug: Learn/Common_questions -tags: - - CodingScripting - - Infrastructure - - Learn - - NeedsTranslation - - TopicStub - - Web - - WebMechanics -translation_of: Learn/Common_questions ---- -
{{LearnSidebar}}
- -

This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

- -

How the Web works

- -

This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.

- -
-
-

How does the Internet work?

-
-
The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.
-
-

What is the difference between webpage, website, web server, and search engine?

-
-
In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!
-
-

What is a URL?

-
-
With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.
-
-

What is a domain name?

-
-
Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.
-
-

What is a web server?

-
-
The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.
-
- -
-
In this article, we'll go over what hyperlinks are and why they matter.
-
- -

Tools and setup

- -

Questions related to the tools/software you can use to build websites.

- -
-
-

How much does it cost to do something on the Web?

-
-
When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).
-
-

What software do I need to build a website?

-
-
In this article we explain which software components you need when you're editing, uploading, or viewing a website.
-
-

What text editors are available?

-
-
In this article we highlight some things to think about when choosing and installing a text editor for web development.
-
-

What are browser developer tools?

-
-
Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.
-
-

How do you make sure your website works properly?

-
-
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
-
-

How do you set up a local testing server?

-
-
-
-

This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.

-
-
-
-

How do you upload files to a web server?

-
-
This article shows how to publish your site online with FTP tools — one of the most common ways to get a website online so others can access it from their computers.
-
-

How do I use GitHub Pages?

-
-
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
-
-

How do you host your website on Google App Engine?

-
-
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
-
-

What tools are available to debug and improve website performance?

-
-
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
-
- -

Design and accessibility

- -

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

- -
-
-

How do I start to design my website?

-
-
This article covers the all-important first step of every project: define what you want to accomplish with it.
-
-

What do common web layouts contain?

-
-
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
-
-

What is accessibility?

-
-
This article introduces the basic concepts behind web accessibility.
-
-

How can we design for all types of users?

-
-
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
-
-

What HTML features promote accessibility?

-
-
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
-
- -

HTML, CSS and JavaScript questions

- -

For common solutions to HTML/CSS/JavaScript problems, try the following articles:

- - diff --git a/files/de/learn/common_questions/upload_files_to_a_web_server/index.html b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html deleted file mode 100644 index 00a9fd14b7b337..00000000000000 --- a/files/de/learn/common_questions/upload_files_to_a_web_server/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Wie lädst Du deine Dateien auf einem Webserver hoch? -slug: Learn/Common_questions/Upload_files_to_a_web_server -tags: - - FTP - - GitHub - - Uploading - - rsync - - sftp -translation_of: Learn/Common_questions/Upload_files_to_a_web_server ---- -
-

Dieser Artikel zeigt dir wie Du deine Seite online mithilfe von Dateiübertragungs-Tools veröffentlichen kannst.

-
- - - - - - - - - - - - -
Vorraussetzungen:Du musst wissen was ein Webserver ist und wie Domainnamen funktionieren. Du musst ebenfalls wissen wie man eine einfache Umgebung einrichtet und wie man eine einfache Webseite schreibt.
Ziel:Lerne wie man Dateien mithilfe von verschiedenen Dateiübertragungs Tools auf einem Server hochlädt.
- -

Zusammenfassung

- -

Falls Du eine einfache Webseite erstellt hast (siehe HTML basics für ein Beispiel), willst Du diese wahrscheinlich auf einem Webserver online stellen. In diesem Artikel diskutieren wir darüber wie man dies mit Verwendung verschiedener Optionen wie SFTP-Klienten, Rsync and GitHub macht.

- -

SFTP

- -

Es gibt mehrere SFTP-Klienten. Unsere Demo umfasst FileZilla, da es kostenlos und verfügbar ist für Windows, macOS und Linux. Um FileZilla zu installieren, gehe zur FileZilla Download-Seite, klicke auf die große Download-Schaltfläche und installiere dann mithilfe der Installationsdatei auf dem üblichen Weg.

- -
-

Bemerkung: Natürlich gibt es eine Menge anderer Möglichkeiten. Siehe Publishing tools für mehr Informationen.

-
- -

Öffne das FileZilla Programm. So sollte es in etwa aussehen:

- -

- -

Einloggen

- -

Für dieses Beispiel nehmen wir an, dass unser Hosting-Anbieter (der Service welcher unseren HTTP Web-Server hosten wird) eine fiktive Firma namens "Example Hosting Provider" ist, dessen URLs so aussehen: mypersonalwebsite.examplehostingprovider.net.

- -

Wir haben soeben einen Account eröffnet und diese Informationen von ihnen erhalten:

- -
-

Gratulation zum Eröffnen eines Accounts bei Example Hosting Provider.

- -

Ihr Account ist: demozilla

- -

Ihre Webseite wird sichtbar sein unter demozilla.examplehostingprovider.net

- -

Um diesen Account zu veröffentlichen, verbinden Sie sich durch SFTP mit den folgenden Zugangsdaten:

- -
    -
  • SFTP-Server: sftp://demozilla.examplehostingprovider.net
    • -
  • Benutzername: demozilla
    • -
  • Passwort: quickbrownfox
    • -
  • Port: 5548
    • -
  • Um etwas im Netz zu veröffentlichen, legen Sie ihre Dateien in den Public/htdocs Ordner.
    • -
-
- -

Lasse uns zuerst einen Blick auf http://demozilla.examplehostingprovider.net/ werfen — wie Du sehen kannst, ist dort bisher nichts:

- -

Our demozilla personal website, seen in a browser: it's empty

- -
-

Bemerkung: Abhängig von deinem Hosting-Anbieter wirst Du die meiste Zeit eine Seite sehen die so etwas wie “Diese Website wird gehosted von [Hosting Service].” anzeigt, wenn Du deine Webadresse zum ersten mal besuchst.

-
- -

Um deinen SFTP-Klienten mit dem Remoteserver zu verbinden, folge diesen Schritten:

- -
    -
  1. Wähle File > Site Manager... vom Hauptmenü.
    2. -
  2. Im Site Manager Fenster, klicke auf die New Site Schaltfläche, dann fülle den Seitennamen als demozilla im angegebenen Feld aus.
    3. -
  3. Fülle den SFTP-Server, welcher dein Host bereitgestellt hat in das Host: Feld.
    4. -
  4. In dem Logon Type: Drop-down-Menü, wähle Normal, dann fülle deinen angegebenen Nutzernamen und Passwort in die entsprechenden Felder.
    5. -
  5. Fülle den korrent Port aus und andere Informationen.
    6. -
- -

Dein Fenster sollte nun in etwa so aussehen:

- -

- -

Klicke jetzt Verbinden um zum SFTP-Server zu verbinden.

- -

Bemerkung: Stelle sicher, dass dein Hosting-Anbieter eine SFTP (Secure FTP)-Verbindung zu deinem Webspace anbietet. FTP ist grundsätzlich unsicher und Du solltest es nicht verwenden.

- -

Hier und dort: Lokale und remote Ansicht

- -

Einmal verbunden, sollte dein Bildschirm etwa so aussehen (wir haben uns mit einem eigenen Beispiel verbunden um dir einen Eindruck zu geben):

- -

- -

Lasse uns prüfen was du siehst:

- -
    -
  • On the center left pane, you see your local files. Navigate into the directory where you store your website (e.g. mdn).
    • -
  • On the center right pane, you see remote files. We are logged into our distant FTP root (in this case, users/demozilla)
    • -
  • You can ignore the bottom and top panes for now. Respectively, these are a log of messages showing the connection status between your computer and the SFTP server, and a live log of every interaction between your SFTP client and the server.
    • -
- -

Uploading to the server

- -

Our example host instructions told us "To publish on the web, put your files into the Public/htdocs directory." You need to navigate to the specified directory in your right pane. This directory is effectively the root of your website — where your index.html file and other assets will go.

- -

Once you've found the correct remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.

- -

Sind sie wirklich online?

- -

So far, so good, but are the files really online? You can double-check by going back to your website (e.g. http://demozilla.examplehostingprovider.net/) in your browser:

- -

Here we go: our website is live!

- -

Und voilà! Unsere Webseite ist live!

- -

Rsync

- -

{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.

- -

It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:

- -
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
- -
    -
  • -options is a dash followed by a one or more letters, for example -v for verbose error messages, and -b to make backups. You can see the full list at the rsync man page (search for "Options summary").
    • -
  • SOURCE is the path to the local file or directory that you want to copy files over from.
    • -
  • user@ is the credentials of the user on the remote server you want to copy files over to.
    • -
  • x.x.x.x is the IP address of the remote server.
    • -
  • DESTINATION is the path to the location you want to copy your directory or files to on the remote server.
    • -
- -

You'd need to get such details from your hosting provider.

- -

For more information and further eamples, see How to Use Rsync to Copy/Sync Files Between Servers.

- -

Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the -e option. For example:

- -
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
- -

You can find more details of what is needed at How To Copy Files With Rsync Over SSH.

- -

Rsync GUI Tools

- -

As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. Acrosync is one such tool, and it is available for Windows and macOS.

- -

Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.

- -

GitHub

- -

GitHub erlaubt Die Webseiten via GitHub pages (gh-pages) zu veröffentlichen.

- -

We've covered the basics of using this in the Publishing your website article from our Getting started with the Web guide, so we aren't going to repeat it all here.

- -

However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See Using a custom domain with GitHub Pages for a detailed guide.

- -

Andere Methoden um Dateien hochzuladen

- -

The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:

- -
    -
  • Web interfaces. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.
    • -
  • {{Glossary("WebDAV")}}. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.
    • -
diff --git a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 5c0eaed03b5660..00000000000000 --- a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Kaskadierung und Vererbung -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung ---- -
{{LearnSidebar}}
- -

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}Das ist der vierte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.

- -

Information: Kaskadierung und Vererbung

- -

Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.

- -

Drei Hauptquellen von Styleinformationen bilden eine Kaskade. Diese sind:

- -
    -
  • Die standardmäßigen Styles des Webbrowsers für die Markup Language.
    • -
  • Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.
    • -
  • Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden: -
      -
    • In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.
      • -
    • In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.
      • -
    • Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.
      • -
    -
    • -
- -

Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.

- -
-
Beispiel
- -

Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.

- -

Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei userContent.css innerhalb Ihres Browserprofils an.

- -

Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.

-
- -

Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.

- -

Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.

- -

Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.

- -

Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.

- -

Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.

- -

Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.

- -
-
Mehr Details
- -

CSS ermöglicht es auch mit dem Schlüsselwort !important die Styles vom Autor zu überschreiben.

- -

Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.

- -

Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite Assigning property values, Cascading, and Inheritance in der CSS Spezifikation auf.

-
- -

Aktion: Vererbung verwenden

- -
    -
  1. Editieren Sie Ihre CSS Datei.
    2. -
  2. Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist: - 
    p {
-  color: blue;
-  text-decoration: underline;
-}
-
    -
    3. -
  3. Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.
    - -

    Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.

    -
    4. -
- -

Davor

- -

HTML Inhalt

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

CSS Inhalt

- -
strong {
-  color:red
-}
-
- -

{{ EmbedLiveSample('Before') }}

- -

Danach

- -

HTML Inhalt

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
- -

CSS Inhalt

- -
p {
-  color:blue;
-  text-decoration:underline;
-}
-
-strong {
-  color:red;
-}
- -

{{ EmbedLiveSample('After') }}

- -

- -
-
Herausforderung
-Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind: - - - - - - - -
Cascading Style Sheets
- -
-
Mögliche Lösung
- -

Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:

- -
p {
-  color: blue;
-}
-
-strong {
-  color: red;
-  text-decoration: underline;
-}
-
- -

-Lösung ausblenden
-Sehen Sie sich die Lösung an.
- -

- -

Was kommt als Nächstes?

- -

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <p> und <strong>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch selektivere Art angeben können.

diff --git a/files/de/learn/css/building_blocks/index.html b/files/de/learn/css/building_blocks/index.html deleted file mode 100644 index c6ffe05a5e1d66..00000000000000 --- a/files/de/learn/css/building_blocks/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: CSS building blocks -slug: Learn/CSS/Building_blocks -tags: - - Beginner - - CSS - - Learn -translation_of: Learn/CSS/Building_blocks ---- -
{{LearnSidebar}}
- -

Dieses Modul betreibt ab CSS Ersten Schritte Endung — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

- -

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

- -

Prerequisites

- -

Before starting this module, you should have:

- -
    -
  1. Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)
    2. -
  2. A basic work environment set up as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
    3. -
  3. Basic familiarity with HTML, as discussed in the Introduction to HTML module.
    4. -
  4. An understanding of the basics of CSS, as discussed in the CSS first steps module.
    5. -
- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -

This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.

- -
-
Cascade and inheritance
-
The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.
-
CSS selectors
-
There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: - -
-
The box model
-
Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS Box Model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.
-
Backgrounds and borders
-
In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.
-
Handling different text directions
-
In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.
-
Overflowing content
-
In this lesson we will look at another important concept in CSS — overflow. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.
-
CSS values and units
-
Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.
-
Sizing items in CSS
-
In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.
-
Images, media, and form elements
-
In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
-
Styling tables
-
Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.
-
Debugging CSS
-
Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.
-
Organizing your CSS
-
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
-
- -

Assessments

- -

Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.

- -
-
Fundamental CSS comprehension
-
This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.
-
Creating fancy letterheaded paper
-
If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.
-
A cool looking box
-
Here you'll get some practice in using background and border styling to create an eye-catching box.
-
- -

See also

- -
-
Advanced styling effects
-
This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
-
diff --git a/files/de/learn/css/building_blocks/organizing/index.html b/files/de/learn/css/building_blocks/organizing/index.html deleted file mode 100644 index f43a6b5c283add..00000000000000 --- a/files/de/learn/css/building_blocks/organizing/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Organizing your CSS -slug: Learn/CSS/Building_blocks/Organizing -tags: - - Anfänger - - CSS - - Formatierung - - Kommentare - - Lernen - - Methoden - - Organisieren - - Stlyeguide - - post-processor - - pre-processor -translation_of: Learn/CSS/Building_blocks/Organizing ---- -
{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
- -

Wenn Sie anfangen an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie herausfinden, dass es eine echte Herausforderung sein kann, eine sehr umfangreiche CSS-Datei instand zu halten. In diesem Artikel werden wir einen kurzen Blick werfen auf einige bewährte Methoden, CSS so zu schreiben, dass es leicht zu pflegen ist. Einige der Lösungen werden Sie auch bei anderen finden, die damit die Wartbarkeit verbessern.

- - - - - - - - - - - - -
Voraussetzungen: -

Grundlegende Computerkenntnisse, installierte Basissoftware, Grundkenntnisse im Umgang mit Dateien, HTML-Grundlagen (lesen Sie Einführung in HTML) und eine Vorstellung davon, wie CSS funktioniert (lesen Sie erste Schritte mit CSS).

-
Ziel:Hier finden Sie einige Tipps und bewährte Verfahren für die Organisation von Stylesheets sowie einige allgemein gebräuchliche Namenskonventionen und Tools, die bei der Organisation von CSS und der Teamarbeit helfen.
- -

Tipps, um Ihr CSS übersichtlich zu halten

- -

Hier finden Sie einige allgemeine Vorschläge, wie Sie Ihre Stylsheet organisiert und übersichtlich halten können.

- -

Gibt es einen Coding Style Guide in Ihrem Projekt?

- -

Wenn Sie im Team an einem bestehenden Projekt arbeiten, sollten Sie als erstes abklären, ob das Projekt einen Style Guide für CSS hat. Der Style Guide des Teams sollte immer Priorität vor Ihren persönlichen Vorlieben haben. Oft gibt es nicht den einen richtigen Weg etwas umzusetzen, wichtig aber ist Konsistenz.

- -

Sehen Sie sich beispielsweise die CSS-Richtlinien für MDN Codebeispiele an.

- -

Bleiben Sie konsistent

- -

Wenn Sie die Regeln für das Projekt festlegen oder alleine arbeiten, dann ist es am wichtigsten, die Dinge konsistent zu halten. Konsistenz kann auf alle möglichen Arten angewendet werden, wie z.B. die Verwendung derselben Namenskonventionen für Klassen, die Wahl einer Methode zur Beschreibung von Farbe oder die Beibehaltung einer konsistenten Formatierung (werden Sie z.B. Tabulatoren oder Leerzeichen verwenden, um Ihren Code einzurücken? Wenn Leerzeichen, wie viele Leerzeichen?)

- -

Ein Regelsystem, das Sie immer befolgen, reduziert den mentalen Aufwand beim Schreiben von CSS, da einige der Entscheidungen bereits getroffen sind.

- -

CSS lesbar formatieren

- -

Es gibt unterschiedliche Arten CSS zu formatieren. Einige Entwickler*innen schreiben alle Regeln in eine einzige Zeile, wie hier:

- -
.box { background-color: #567895; }
-h2 { background-color: black; color: white; }
- -

Andere Entwickler*innen schreiben lieber jede Regel in eine neue Zeile:

- -
.box {
-  background-color: #567895;
-}
-
-h2 {
-  background-color: black;
-  color: white;
-}
- -

Dem CSS ist es egal, welche dieser Arten Sie nutzen. Wir persönlich finden, dass es besser lesbar ist, jede Eigenschaft und jedes Wertepaar in einer neuen Zeile.

- -

CSS kommentieren

- -

Kommentare in Stylesheets zu schreiben hilft jeder*m künftigen*m Entwickler*in mit Ihrem Stylesheet zu arbeiten. Aber es wird auch Ihnen helfen, wenn Sie nach einer Pause wieder an dem Projekt arbeiten.

- -
/* This is a CSS comment
-It can be broken onto multiple lines. */
- -

Ein guter Tipp ist es, auch zwischen logischen Abschnitten in Ihrem Stylesheet einen Block von Kommentaren einzufügen, um verschiedene Abschnitte beim Durchsuchen schnell zu finden, oder um Ihnen sogar etwas zum Suchen zu geben, damit Sie direkt in diesen Teil des CSS springen können. Wenn Sie eine Zeichenfolge verwenden, die nicht im Code erscheint, können Sie von Abschnitt zu Abschnitt springen, indem Sie danach suchen - unten haben wir || verwendet.

- -
/* || General styles */
-
-...
-
-/* || Typography */
-
-...
-
-/* || Header and Main Navigation */
-
-...
-
-
- -

Sie müssen nicht jede einzelne Regel in Ihrem CSS kommentieren, da vieles davon selbsterklärend sein wird. Was Sie kommentieren sollten, sind die Dinge, bei denen Sie aus einem bestimmten Grund eine bestimmte Entscheidung getroffen haben.

- -

Möglicherweise haben Sie eine CSS-Eigenschaft auf eine bestimmte Art und Weise verwendet, um z.B. Inkompatibilitäten älterer Browser zu umgehen:

- -
.box {
-  background-color: red; /* Fallback für ältere Browser, die keine Gradients unterstützen. */
-  background-image: linear-gradient(to right, #ff0000, #aa0000);
-}
-
- -

Vielleicht haben Sie ein Tutorial befolgt, um etwas zu erreichen, und das CSS ist ein nicht selbsterklärend. In diesem Fall könnten Sie die URL des Tutorials zu den Kommentaren hinzufügen. Sie werden sich freuen, wenn Sie in einem Jahr oder so zu diesem Projekt zurückkehren und sich vage daran erinnern können, dass es ein großartiges Tutorial zu diesem Ding gab, aber wo ist es?

- -

Logische Abschnitte im Stylesheet schaffen

- -

Es ist eine gute Idee, alle häufig verwendeten Stile zuerst im Stylesheet zu haben. Das bedeutet alle Stile, die im Allgemeinen gelten, es sei denn, Sie machen etwas Besonderes mit diesem Element. In der Regel werden Sie Regeln dafür aufgestellt haben:

- -
    -
  • body
    • -
  • p
    • -
  • h1, h2, h3, h4, h5
    • -
  • ul and ol
    • -
  • The table properties
    • -
  • Links
    • -
- -

In diesem Abschnitt des Stylesheets stellen wir das Standard-Styling für den Schrifttyp auf der Site zur Verfügung, richten ein Standard-Styling für Datentabellen und Listen ein und so weiter.

- -
/* || ALLGEMEINE STYLES */
-
-body { ... }
-
-h1, h2, h3, h4 { ... }
-
-ul { ... }
-
-blockquote { ... }
-
- -

Nach diesem Abschnitt könnten wir einige Hilfsklassen definieren, z.B. eine Klasse, die den Standardlistenstil für Listen entfernt, die wir als Flex Items oder auf andere Weise anzeigen wollen. Wenn Sie ein paar Dinge haben, von denen Sie wissen, dass Sie sie auf viele verschiedene Elemente anwenden wollen, können sie in diesem Abschnitt behandelt werden.

- -
/* || HILFSKLASSEN */
-
-.nobullets {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-...
-
-
- -

Dann können wir alles hinzufügen, was überall auf der Website verwendet wird. Das können Dinge wie das grundlegende Seitenlayout, die Kopfzeile, die Gestaltung der Navigation und so weiter sein.

- -
/* || STILE, DIE AUF DER GANZEN SEITE VERWENDET WERDEN */
-
-.main-nav { ... }
-
-.logo { ... }
-
- -

Schließlich werden wir CSS für bestimmte Dinge aufnehmen, aufgeschlüsselt nach dem Kontext, der Seite oder sogar der Komponente, in der sie verwendet werden.

- -
/* || SHOP SEITEN */
-
-.product-listing { ... }
-
-.product-box { ... }
-
- -

Indem wir die Dinge auf diese Weise anordnen, haben wir zumindest eine Vorstellung davon, in welchem Teil des Stylesheets wir nach etwas suchen werden, das wir ändern wollen.

- -

Allzu spezifische Selektoren vermeiden

- -

Wenn Sie sehr spezifische Selektoren erstellen, werden Sie oft feststellen, dass Sie Teile Ihres CSS duplizieren müssen, um die gleichen Regeln auf ein anderes Element anzuwenden. Zum Beispiel könnten Sie etwas wie den unten stehenden Selektor haben, der die Regel auf ein <p> mit der Klasse box innerhalb eines <article> mit der Klasse main anwendet.

- -
article.main p.box {
-  border: 1px solid #ccc;
-}
- -

Wenn Sie nun die gleiche Regel außerhalb von main oder bei etwas anderem als <p> anwenden möchten, müssten Sie einen weiteren Selektor zu dieser Regel hinzufügen oder ein ganz neues Regelset erstellen. Stattdessen sollten Sie den Selektor .box verwenden, damit die Regel auf alle Elemente mit der Klasse box angewendet wird:

- -
.box {
-  border: 1px solid #ccc;
-}
- -

In einigen Fällen kann es sinnvoll sein, eine höhere Spezifizität zu verwenden. Das wird aber eher die Ausnahme als die übliche Praxis sein.

- -

Große Stylesheets in mehrere kleine aufteilen

- -

Insbesondere in Fällen, in denen Sie sehr unterschiedliche Stile für verschiedene Teile der Website haben, sollten Sie vielleicht ein Stylesheet haben, das alle globalen Regeln enthält, und dann kleinere, die die spezifischen Regeln enthalten, die für diese Abschnitte benötigt werden. Sie können von einer Seite aus auf mehrere Stylesheets verweisen, und es gelten die normalen Regeln der Kaskade, wobei Regeln in später verknüpften Stylesheets auf Regeln in früher verknüpften Stylesheets folgen.

- -

Zum Beispiel könnten wir einen Online-Shop als Teil der Website haben, wobei viel CSS nur für das Styling der Produktauflistungen und Formulare verwendet wird, die für den Shop benötigt werden. Es wäre sinnvoll, diese Dinge in einem anderen Stylesheet zu haben, auf das nur auf den Shop-Seiten verwiesen wird.

- -

Dies kann die Organisation Ihres CSS erleichtern und bedeutet auch, dass Sie weniger Situationen haben werden, in denen zwei Personen gleichzeitig am selben Stylesheet arbeiten müssen, was zu Konflikten bei der Quellcodekontrolle führt, wenn mehrere Personen an dem CSS arbeiten.

- -

Andere hilfreiche Tools

- -

CSS an sich hat nicht viel an eingebauter Struktur zu bieten, daher müssen Sie die Arbeit erledigen, um Konsistenz und Regeln für die Erstellung von CSS zu schaffen. Die Web-Community hat auch verschiedene Tools und Ansätze entwickelt, die Ihnen bei der Verwaltung größerer CSS-Projekte helfen können. Da sie für Sie bei der Untersuchung hilfreich sein können und Sie bei der Arbeit mit anderen Personen wahrscheinlich auf diese Dinge stoßen werden, haben wir einen kurzen Leitfaden zu einigen davon beigefügt.

- -

CSS Verfahren

- -

Anstatt sich eigene Regeln für die Erstellung von CSS ausdenken zu müssen, können Sie einen der Ansätze zu übernehmen, die bereits von der Community entworfen und in vielen Projekten getestet wurden. Bei diesen Methoden handelt es sich im Wesentlichen um CSS-Codierungsleitfäden, die einen sehr strukturierten Ansatz zum Schreiben und Organisieren von CSS verfolgen. In der Regel führen sie zu einer umfassenderen Verwendung von CSS, als wenn Sie jeden Selektor nach einem eigenen Regelsatz für dieses Projekt schreiben und optimieren würden.

- -

Da viele dieser Systeme sehr weit verbreitet sind, ist es wahrscheinlicher, dass andere Entwickler*innen den von Ihnen verwendeten Ansatz verstehen und ihr CSS auf die gleiche Art und Weise schreiben können, anstatt Ihre persönliche Methodik von Grund auf neu erarbeiten zu müssen.

- -

OOCSS

- -

Die meisten Ansätze, denen Sie begegnen werden, beruhen auf dem Konzept des objektorientierten CSS (Object Oriented CSS, OOCSS), ein Ansatz, der populär wurde durch die Arbeiten von Nicole Sullivan. Die Grundidee von OOCSS besteht darin, Ihr CSS in wiederverwendbare Objekte zu zerlegen, die überall auf Ihrer Website verwendet werden können. Das Standardbeispiel für OOCSS ist das als The Media Object beschriebene Modell. Dabei handelt es sich um ein Modell mit einem Bild, einem Video oder einem anderen Element fester Größe auf der einen Seite und flexiblem Inhalt auf der anderen Seite. Es ist ein Modell, das wir überall auf Websites für Kommentare, Auflistungen und so weiter sehen.

- -

Wenn Sie keinen OOCSS-Ansatz verfolgen, können Sie für die verschiedenen Stellen, an denen dieses Modell verwendet wird, benutzerdefiniertes CSS erstellen, z.B. eine Klasse namens comment mit einem Bündel von Regeln für die Komponententeile, dann eine Klasse namens list-item mit fast denselben Regeln wie die Klasse comment, abgesehen von einigen winzigen Unterschieden. Der Unterschied zwischen diesen beiden Komponenten besteht darin, dass das Listenelement einen unteren Rand hat und Bilder in Kommentaren einen Rand haben, während Bilder von Listenelementen keinen Rand haben.

- -
.comment {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.comment img {
-  border: 1px solid grey;
-}
-
-.comment .content {
-  font-size: .8rem;
-}
-
-.list-item {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  border-bottom: 1px solid grey;
-}
-
-.list-item .content {
-  font-size: .8rem;
-}
- -

In OOCSS würden Sie ein Schema namens media erstellen, das das gesamte gemeinsame CSS für beide Schemata hat - eine Basisklasse für Dinge, die im Allgemeinen die Form des Medienobjekts darstellen. Dann fügen wir eine zusätzliche Klasse hinzu, die sich mit diesen winzigen Unterschieden befasst und so dieses Styling auf spezifische Weise erweitert.

- -
.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.media .content {
-  font-size: .8rem;
-}
-
-.comment img {
-  border: 1px solid grey;
-}
-
-.list-item {
-  border-bottom: 1px solid grey;
-}
- -

In Ihrem HTML-Code müsste für den Kommentar sowohl die Medien- als auch die Kommentarklasse (media und comment) verwendet werden:

- -
<div class="media comment">
-  <img />
-  <div class="content"></div>
-</div>
-
- -

Auf das Listenelement würde man die Klassen media und list-item anwenden:

- -
<ul>
-  <li class="media list-item">
-    <img />
-    <div class="content"></div>
-  </li>
-</ul>
- -

Die Arbeit, die Nicole Sullivan geleistet hat, um diesen Ansatz zu beschreiben und zu fördern, bedeutet, dass selbst Personen, die heute nicht strikt einem OOCSS-Ansatz folgen, CSS im Allgemeinen auf diese Weise wiederverwenden werden - es hat sich in unserem Verständnis als eine gute Vorgehensweise im Allgemeinen etabliert.

- -

BEM

- -

BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about BEM Naming conventions:

- -
<form class="form form--theme-xmas form--simple">
-  <input class="form__input" type="text" />
-  <input
-    class="form__submit form__submit--disabled"
-    type="submit" />
-</form>
- -

The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.

- -

BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.

- -

To read more about the system read BEM 101 on CSS Tricks.

- -

Other common systems

- -

There are a large number of these systems in use. Other popular approaches include Scalable and Modular Architecture for CSS (SMACSS), created by Jonathan Snook, ITCSS from Harry Roberts, and Atomic CSS (ACSS), originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.

- -

The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.

- -

Build systems for CSS

- -

Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as pre-processors and post-processors. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.

- -

Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.

- -

The most popular pre-processor is Sass. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features. If you want to learn a lot more about Sass, start with the Sass basics article, then move on to their other documentation.

- -

Defining variables

- -

CSS now has native custom properties, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.

- -

If we created a variable called $base-color as in the first line below, we could then use it through the stylesheet anywhere that required that color.

- -
$base-color: #c6538c;
-
-.alert {
-  border: 1px solid $base-color;
-}
- -

Once compiled to CSS, you would end up with the following CSS in the final stylesheet.

- -
.alert {
-  border: 1px solid #c6538c;
-}
- -

Compiling component stylesheets

- -

I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass (partials) these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.

- -

So for example, with partials, you could have several style files inside a directory, say foundation/_code.scss, foundation/_lists.scss, foundation/_footer.scss, foundation/_links.scss, etc., then use the Sass @use role to load them into other stylesheets:

- -
// foundation/_index.sass
-@use 'code'
-@use 'lists'
-@use 'footer'
-@use 'links'
- -

If the partials are all loaded into an index file, as implied above, you can then load that entire directory into another stylesheet in one go:

- -
// style.sass
-@use 'foundation'
- -
-

Note: A simple way to try out Sass is to use CodePen — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.

-
- -

Post-processing for optimization

- -

If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unnecessary in the production version. An example of a post-processor solution for doing this would be cssnano.

- -

Wrapping up

- -

This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.

- -

To learn more about layout in CSS, see the Learn CSS Layout section.

- -

You should also now have the skills to explore the rest of the MDN CSS material. You can look up properties and values, explore our CSS Cookbook for patterns to use, and read more in some of the specific guides such as our Guide to CSS Grid Layout.

- -

{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/de/learn/css/building_blocks/selectors/index.html b/files/de/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 1614f40c736bbb..00000000000000 --- a/files/de/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Selektoren -slug: Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/Guide/CSS/Getting_started/Selektoren ---- -
{{LearnSidebar}}
- -

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung & Vererbung")}}Das ist der fünfte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.

- -

Information: Selektoren

- -

CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:

- -
strong {
-  color: red;
-}
-
- -

In der CSS Terminologie ist die gesamte Zeile eine Regel. Diese Regel beginnt mit strong, welches ein Selektor ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.

- -
-
Mehr Details
- -

Der Teil innerhalb der geschwungenen Klammern ist die Deklaration.

- -

Das Schlüsselwort color ist eine Eigenschaft (Property) und red is ein Wert (value).

- -

Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.

- -

Dieser Tutorial bezeichnet einen Selektor wie strong als einen Tag-Selektor. Die CSS Spezifikation bezeichnet es als Type-Selector.

-
- -

Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.

- -

Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.

- -

Zwei Attribute haben einen speziellen Status in CSS. Diese sind class und id.

- -

Class Selektoren

- -

Verwenden Sie das class Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.

- -

Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.

- -

ID Selektoren

- -

Verwenden Sie das id Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.

- -

Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.

- -
-
Beispiel
-Dieser HTML Tag hat ein class Attribut und ein id Attribute: - -
<p class="key" id="principal">
-
- -

Der id Wert, principal, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben Klassennamen, key, haben.

- -

In einem CSS Stylesheet macht diese Regel alle Elemente mit der class key grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)

- -
.key {
-  color: green;
-}
-
- -

Diese Regel macht das eine Element mit der id principal fettgedruckt:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.

- -
-
Mehr Details
- -

Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.

- -

Der Selektor .key zum Beispiel selektier alle Elements mit der Klasse key. Der Selektor p.key selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse key haben.

- -

Sie sind nicht auf die zwei speziellen Attribute class und id eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor [type='button'] zum Beispiel selektiert alle Elemente, die ein type Attribut mit dem Wert button haben.

-
- -

Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.

- -

Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.

- -

Pseudo-classes Selektoren

- -

Eine CSS pseudo-class ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.

- -

Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter CSS3 Selectors working spec zu finden.

- -
-
Syntax
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Liste von pseudo-classes

- -
    -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":nth-child") }}
    • -
  • {{ Cssxref(":nth-last-child") }}
    • -
  • {{ Cssxref(":nth-of-type") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":disabled") }}
    • -
- -

Information: Selektoren basieren auf Beziehungen

- -

CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Gängige Selektoren basierend auf Beziehungen
SelektorSelektiert
A EJedes E Element, das ein Nachfolger eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, etc.)
A > EJedes E Element, das ein Kind eines A Elements ist
E:first-childJedes E Element, das das erste Kind seines Parent ist
B + EJedes E Element, das das nächste Sibling eines B Elements ist (das heißt: das nächste Kind von demselben Parent)
- -

Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.

- -

Sie können auch das Symbol * (asterisk) verwenden, welches "jedes Element" bedeutet.

- -
-
Beispiel
- -

Eine HTML Tabelle hat ein id Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:

- -
#data-table-1 td:first-child {
-  font-weight: bolder;
-}
-
-#data-table-1 td:first-child + td {
-  font-family: monospace;
-}
-
- -

Das Ergebnis sieht so aus:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
Mehr Details
- -

Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.

- -

Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein class oder ein id Attribut zu geben. Stattdessen erledigt CSS die Arbeit.

- -

In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.

- -

Mehr Beispiele zu Tabellen finden Sie auf der CSS Referenzseite.

-
- -

Aktion: class und ID Selektoren verwenden

- -
    -
  1. Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.
    2. -
  2. Danach setzen Sie ein id und class Attribut auf den ersten Absatz und ein id Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: - 
    strong {
-  color: red;
-}
-
-.carrot {
-  color: orange;
-}
-
-.spinach {
-  color: green;
-}
-
-#first {
-  font-style: italic;
-}
-
    -
    4. -
  4. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.

    - -

    Die class Selektoren .carrot und .spinach haben Priorität gegenüber dem tag Selektor strong.

    - -

    Der ID Selektor #first hat Priorität gegenüber den class und den tag Selektoren.

    -
    5. -
- -
-
Herausforderungen
- -
    -
  1. Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Mögliche Lösung
- -
    -
  1. Fügen Sie eine Regel mit dem ID Selektor #second und einer Deklaration color: blue; wie unten dargestellt hinzu: - - 
    #second {
-  color: blue;
-}
-
    - Ein noch spezifischerer Selektor p#second funktioniert auch.
    2. -
  2. Ändern Sie den Selektor der neuen Regel auf p, damit er ein Tag-Selektor ist: - 
    p {
-  color: blue;
-}
-
    -
    3. -
-Lösung ausblenden
-Sehen Sie sich die Lösung an.
- -

Aktion: pseudo-classes Selektoren verwenden

- -
    -
  1. Erstellen Sie eine HTML Datei wie folgt: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen): - - - - - - -
    Go to our Home page
    -
    4. -
- -

Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden

- -

Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel reine CSS Dropdown Menüs zu erstellen (die nur aus CSS ohne JavaScript bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:

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

Angewendet auf eine HTML Struktur wie die folgende:

- -
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</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>
-
- -

Sehen sie in das komplette CSS-basierte Dropdown Menü Beispiel für mögliche Hinweise.

- -

Was kommt als Nächstes?

- -

Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um CSS leichter lesbar zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}

diff --git a/files/de/learn/css/css_layout/flexbox/index.html b/files/de/learn/css/css_layout/flexbox/index.html deleted file mode 100644 index 921d558ee6eef2..00000000000000 --- a/files/de/learn/css/css_layout/flexbox/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Flexbox -slug: Learn/CSS/CSS_layout/Flexbox -tags: - - Anfänger - - Artikel - - CSS - - CSS layouts - - Flexible Boxen - - Layout - - Layouts - - Leitfaden - - Lernen - - flexbox -translation_of: Learn/CSS/CSS_layout/Flexbox ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
- -

Flexbox ist eine Layoutmethode zum Anordnen von Elementen in Zeilen oder Spalten. Elemente werden gestreckt, um zusätzlichen Platz zu füllen, und schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle Grundlagen.

- - - - - - - - - - - - -
Voraussetzungen:HTML Grundlagen (siehe Introduction to HTML), und eine Vorstellung davon, wie CSS funktioniert (study Introduction to CSS.)
Zielsetzung:Erfahren Sie, wie Sie mit dem Flexbox-Layoutsystem Weblayouts erstellen.
- -

Warum Flexbox?

- -

Lange Zeit waren die einzigen zuverlässigen browserübergreifenden Tools zum Erstellen von CSS-Layouts Dinge wie Floats und Positionierung. Diese sind in Ordnung und funktionieren, aber in gewisser Weise sind sie auch eher einschränkend und frustrierend.

- -

Die folgenden einfachen Layoutanforderungen sind mit solchen Werkzeugen auf bequeme und flexible Weise entweder schwierig oder unmöglich zu erreichen:

- -
    -
  • Vertikales Zentrieren eines Inhaltsblocks in seinem übergeordneten Element.
    • -
  • Alle untergeordneten Elemente eines Containers sollen die gleichen Anteil der Breite / Höhe einnehmen, unabhängig davon, wie viel Breite / Höhe verfügbar ist.
    • -
  • Alle Spalten in einem mehrspaltigen Layout mit einheitlicher Höhe gestalten, auch wenn sie eine andere Menge an Inhalt enthalten.
    • -
- -

Wie Sie in den folgenden Abschnitten sehen werden, erleichtert Flexbox viele Layoutaufgaben erheblich. Lass uns eintauchen!

- -

Ein einfaches Beispiel

- -

In diesem Artikel werden Sie eine Reihe von Übungen durcharbeiten, um zu verstehen, wie Flexbox funktioniert. Zuerst sollten Sie eine lokale Kopie der ersten Startdatei - flexbox0.html aus unserem Github-Repo - erstellen, sie in einen modernen Browser (wie Firefox oder Chrome) laden und den Code in Ihrem Code-Editor anzeigen. Sie können es auch hier live sehen.

- -

Sie werden sehen, dass wir ein {{htmlelement ("header")}} Element mit einer Überschrift der obersten Ebene und ein {{htmlelement ("section")}} Element mit drei {{htmlelement ("article") }} haben. Wir werden damit ein standardmäßiges dreispaltiges Layout erstellen.

- -

- -

Festlegen der Elemente für flexible Boxen

- -

Zunächst müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von {{cssxref ("display")}} für das übergeordnete Element der Elemente, die Sie beeinflussen möchten. In diesem Fall möchten wir die {{htmlelement ("article")}} Elemente anordnen, also setzen wir dies auf das {{htmlelement ("section")}}:

- -
section {
-  display: flex;
-}
- -

Dies führt dazu, dass das <section> -Element zu einem Flex-Container wird und seine untergeordneten Elemente zu Flex-Elementen werden. Das Ergebnis sollte ungefähr so sein:

- -

- -

Diese Deklaration erzeugt alles, was wir brauchen - unglaublich, oder? Wir haben unser mehrspaltiges Layout mit gleich großen Spalten, und die Spalten haben alle die gleiche Höhe. Dies liegt an de Standardwerte für Flex-Elemente (die untergeordneten Elemente des Flex-Containers), die so eingerichtet sind, um solche häufig auftretenden Probleme wie dieses zu lösen.

- -

Lassen Sie uns noch einmal wiederholen, was hier passiert. Das Element, dem wir einen {{cssxref ("display")}} -Wert flex zugewiesen haben, verhält sich in Bezug auf die Interaktion mit dem Rest der Seite wie ein Element auf Blockebene, aber seine untergeordneten Elemente werden als Flex-Elemente angeordnet - Im nächsten Abschnitt wird detaillierter erläutert, was das bedeutet. Beachten Sie auch, dass Sie den display Wert inline-flex verwenden können, wenn Sie die untergeordneten Elemente eines Elements als Flex-Elemente auslegen möchten, dieses Element sich jedoch wie ein Inline-Element verhält.

- -

Das flex Modell

- -

Wenn Elemente als flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:

- -

flex_terms.png

- -
    -
  • Die Hauptachse (main axis) ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind (z. B. als Zeilen auf der Seite oder Spalten auf der Seite). Anfang und Ende dieser Achse werden als main start und main end bezeichnet.
    • -
  • Die Querachse (cross axis) verläuft senkrecht dazu. Anfang und Ende dieser Achse werden als cross start und cross end bezeichnet.
    • -
  • Das übergeordnete Element, auf dem display: flex festgelegt ist (in unserem Beispiel das {{htmlelement ("section")}}), wird als Flex-Container bezeichnet.
    • -
  • Die als flexible Boxen im Flex-Container angeordnetrn Elemente werden als Flex-Elemente (flex-items) bezeichnet (in unserem Beispiel die Elemente {{htmlelement ("article")}}).
    • -
- -

Beachten Sie diese Terminologie, wenn Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie über einen der verwendeten Begriffe verwirrt sind.

- -

Spalten oder Zeilen?

- -

Flexbox bietet eine Eigenschaft namens {{cssxref ("flex-direction")}}, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die untergeordneten Flexbox-Elemente angeordnet sind). Standardmäßig ist dies auf row festgelegt, wodurch sie veranlasst werden in einer Reihe in der Richtung angeordnet sein, in der die Standardsprache Ihres Browsers funktioniert (von links nach rechts, im Fall eines englischen Browsers).

- -

Fügen Sie Ihrer {{htmlelement ("section")}} Regel die folgende Deklaration hinzu:

- -
flex-direction: column;
- -

Sie sehen, dass die Elemente dadurch wieder in ein Spaltenlayout versetzt werden, ähnlich wie vor dem Hinzufügen von CSS. Bevor Sie fortfahren, löschen Sie diese Deklaration aus Ihrem Beispiel.

- -
-

Hinweis: Sie können Flex-Elemente auch in umgekehrter Richtung auslegen, indem Sie die Werte row-reverse für Zeilenumkehr und column-reverse für Spaltenumkehr verwenden. Experimentieren Sie auch mit diesen Werten!

-
- -

Umbruch

- -

Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder möglicherweise ihren Container überlaufen und das Layout beschädigen. Schauen Sie sich unser Beispiel flexbox-wrap0.html an und versuchen Sie, es live anzuzeigen (erstellen Sie jetzt eine lokale Kopie dieser Datei, wenn Sie diesem Beispiel folgen möchten):

- -

- -

Hier sehen wir die Kind-Elemente tatsächlich aus ihrem Container laufen. Eine Möglichkeit, dies zu beheben, besteht darin, Ihrer {{htmlelement ("section")}} -Regel die folgende Deklaration hinzuzufügen:

- -
flex-wrap: wrap;
- -

Fügen Sie Ihrer {{htmlelement ("article")}} Regel außerdem die folgende Deklaration hinzu:

- -
flex: 200px;
- -

Sie werden sehen, dass das Layout damit viel besser aussieht:

- -

- -

Wir haben jetzt mehrere Zeilen - so viele Flexbox-Kinder werden in jede Zeile eingefügt, wie sinnvoll ist, und jeder Überlauf wird in die nächste Zeile verschoben. Die auf den Artikeln festgelegte flex: 200px-Deklaration bedeutet, dass jede mindestens 200px breit ist. Wir werden diese Eigenschaft später genauer besprechen. Möglicherweise stellen Sie auch fest, dass die letzten untergeordneten Elemente in der letzten Zeile jeweils breiter sind, sodass die gesamte Zeile noch gefüllt ist.

- -

Aber wir können hier noch mehr tun. Versuchen Sie zunächst, den Eigenschaftswert {{cssxref ("flex-direction")}} in row-reverse zu ändern. Jetzt sehen Sie, dass Sie immer noch über ein Layout mit mehreren Zeilen verfügen, das jedoch in der gegenüberliegenden Seite des Browsers beginnt Fenster und in umgekehrter Richtung fließt.

- -

flex-flow shorthand

- -

An dieser Stelle ist anzumerken, dass eine Abkürzung für {{cssxref ("Flex-Wrap")}} und {{cssxref ("Flex-Wrap")}} - {{cssxref ("Flex-Flow")}} existiert . So können Sie beispielsweise

- -
flex-direction: row;
-flex-wrap: wrap;
- -

ersetzen mit

- -
flex-flow: row wrap;
- -

Flexible Dimensionierung von flex-Artikeln

- -

Kehren wir nun zu unserem ersten Beispiel zurück und schauen wir uns an, wie wir steuern können, welchen Anteil der Space-Flex-Elemente im Vergleich zu den anderen Flex-Elementen einnehmen. Starten Sie Ihre lokale Kopie von flexbox0.html oder nehmen Sie eine Kopie von flexbox1.html als neuen Ausgangspunkt (hier auch live).

- -

Fügen Sie zunächst die folgende Regel am Ende Ihres CSS hinzu:

- -
article {
-  flex: 1;
-}
- -

Dies ist ein einheitloser Proportionswert, der bestimmt, wie viel des verfügbaren Platzes entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnimmt. In diesem Fall geben wir jedem {{htmlelement ("article")}} Element den gleichen Wert (den Wert 1), was bedeutet, dass alle gleich viel Platz nach dem Auffüllen und dem Rand beanspruchen. Es ist relativ zu anderen Flex-Elementen, was bedeutet, dass ein Wert von 400000 für jedes Flex-Element genau den gleichen Effekt hätte.

- -

Fügen Sie nun die folgende Regel unter der vorherigen hinzu:

- -
article:nth-of-type(3) {
-  flex: 2;
-}
- -

Wenn Sie jetzt aktualisieren, werden Sie feststellen, dass das dritte {{htmlelement ("article")}} doppelt so viel der verfügbaren Breite einnimmt wie die beiden anderen - es sind jetzt insgesamt vier Proportionseinheiten verfügbar (1 + 1) + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, sodass sie jeweils 1/4 des verfügbaren Platzes beanspruchen. Die dritte hat zwei Einheiten, nimmt also 2/4 des verfügbaren Platzes (oder die Hälfte) ein.

- -

Sie können auch einen Mindestgrößenwert innerhalb des Flex-Werts angeben. Versuchen Sie, Ihre vorhandenen Artikelregeln wie folgt zu aktualisieren:

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 2 200px;
-}
- -

Das heißt im Wesentlichen: "Jedes Flex-Element erhält zuerst 200 Pixel des verfügbaren Speicherplatzes. Danach wird der Rest des verfügbaren Speicherplatzes entsprechend den Proportionseinheiten aufgeteilt." Versuchen Sie es mit einer Aktualisierung, und Sie werden einen Unterschied in der Aufteilung des Speicherplatzes feststellen.

- -

- -

Der wahre Wert von flexbox zeigt sich in seiner Flexibilität / Responsiveness. Wenn Sie die Größe des Browserfensters ändern oder ein weiteres {{htmlelement ("article")}} Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.

- -

flex: Kurzform versus Langform

- -

{{cssxref ("flex")}} ist eine Kurzform-Eigenschaft, die bis zu drei verschiedene Werte angeben kann:

- -
    -
  • Der Anteil des Anteils ohne Einheit, den wir oben besprochen haben. Dies kann individuell mit der Langform {{cssxref ("flex-grow")}} angegeben werden.
    • -
  • Ein zweiter uneinheitlicher Proportionswert - {{cssxref ("flex-shrink")}} -, der ins Spiel kommt, wenn die flexiblen Elemente ihren Container überlaufen. Dies gibt an, wie viel der überlaufenden Menge von der Größe jedes Flex-Elements entfernt wird, um zu verhindern, dass sie ihren Behälter überlaufen. Dies ist eine erweiterte Flexbox-Funktion, auf die wir in diesem Artikel nicht weiter eingehen werden.
    • -
  • Der oben diskutierte Mindestgrößenwert. Dies kann individuell mit dem Lang-Wert {{cssxref ("flex-base")}} angegeben werden.
    • -
- -

Wir raten davon ab, die lLangform Flex-Eigenschaften zu verwenden, es sei denn, Sie müssen dies wirklich tun (z. B. um etwas zuvor festgelegtes zu überschreiben). Sie führen dazu, dass viel zusätzlicher Code geschrieben wird, und sie können etwas verwirrend sein.

- -

Horizontale und vertikale Ausrichtung

- -

Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Schauen wir uns dies anhand eines neuen Beispiels an - flex-align0.html (siehe auch live) - das wir in eine übersichtliche, flexible Schaltfläche / Symbolleiste verwandeln werden. Im Moment sehen Sie eine horizontale Menüleiste mit einigen Schaltflächen in der oberen linken Ecke.

- -

- -

Nehmen Sie zunächst eine lokale Kopie dieses Beispiels.

- -

Fügen Sie nun am Ende des CSS des Beispiels Folgendes hinzu:

- -
div {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
- -

- -

Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt horizontal und vertikal gut zentriert sind. Wir haben dies über zwei neue Eigenschaften getan.

- -

{{cssxref ("align-items")}} steuert, wo sich die Flex-Elemente auf der Querachse befinden.

- -
    -
  • Standardwert ist stretch, wodurch alle Flex-Elemente gestreckt werden, um das übergeordnete Element in Richtung der Querachse zu füllen. Wenn das übergeordnete Element in Querrichtung keine feste Breite hat, werden alle Flex-Elemente so lang wie die längsten Flex-Elemente. So hat unser erstes Beispiel standardmäßig Spalten gleicher Höhe erhalten.
    • -
  • Der center-wert, den wir in unserem obigen Code verwendet haben, bewirkt, dass die Elemente ihre intrinsischen Abmessungen beibehalten, jedoch entlang der Querachse zentriert werden. Aus diesem Grund sind die Schaltflächen unseres aktuellen Beispiels vertikal zentriert.
    • -
  • Sie können auch Werte wie flex-start und flex-end festlegen, mit denen alle Elemente am Anfang bzw. Ende der Querachse ausgerichtet werden. Ausführliche Informationen finden Sie unter {{cssxref ("align-items")}}.
    • -
- -

Sie können das Verhalten {{cssxref ("align-items")}} für einzelne Flex-Elemente überschreiben, indem Sie die Eigenschaft {{cssxref ("align-self")}} auf diese anwenden. Versuchen Sie beispielsweise, Ihrem CSS Folgendes hinzuzufügen:

- -
button:first-child {
-  align-self: flex-end;
-}
- -

- -

Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie ihn erneut, wenn Sie fertig sind.

- -

{{cssxref ("Berechtigungsinhalt")}} steuert, wo sich die Flex-Elemente auf der Hauptachse befinden.

- -
    -
  • Der Standardwert ist flex-start, wodurch alle Elemente am Anfang der Hauptachse sitzen.
    • -
  • Sie können flex-end verwenden, damit sie am Ende sitzen.
    • -
  • center ist auch ein Wert für justify-content und lässt die flexiblen Elemente in der Mitte der Hauptachse sitzen.
    • -
  • Der oben verwendete Wert space-around ist nützlich - er verteilt alle Elemente gleichmäßig entlang der Hauptachse, wobei an beiden Enden etwas Platz verbleibt.
    • -
  • Es gibt einen anderen Wert, space-between, der dem space-around sehr ähnlich ist, außer dass an beiden Enden kein Leerzeichen verbleibt.
    • -
- -

Spielen Sie mit diesen Werten, um zu sehen, wie sie funktionieren, bevor Sie fortfahren.

- -

Flex-Elemente ordnen

- -

Flexbox bietet auch eine Funktion zum Ändern der Layoutreihenfolge von Flex-Elementen, ohne die Quellreihenfolge zu beeinflussen. Dies ist eine andere Sache, die mit herkömmlichen Layoutmethoden nicht möglich ist.

- -

Der Code hierfür ist einfach: Fügen Sie Ihrem Beispielcode für die Schaltflächenleiste das folgende CSS hinzu:

- -
button:first-child {
-  order: 1;
-}
- -

Aktualisieren Sie, und Sie werden jetzt sehen, dass die Schaltfläche "Lächeln" an das Ende der Hauptachse verschoben wurde. Lassen Sie uns etwas detaillierter darüber sprechen, wie dies funktioniert:

- -
    -
  • Standardmäßig haben alle Flex-Elemente den Wert {{cssxref ("order")}} von 0.
    • -
  • Flex-Artikel mit höheren Ordnungswerten werden später in der Anzeigereihenfolge angezeigt als Artikel mit niedrigeren Ordnungswerten.
    • -
  • Flex-Artikel mit demselben Ordnungswert werden in ihrer Quellreihenfolge angezeigt. Wenn Sie also vier Elemente mit den Ordnungswerten 2, 1, 1 und 0 festgelegt haben, lautet die Anzeigereihenfolge 4., 2., 3. und dann 1 ..
    • -
  • Das 3. Element wird nach dem 2. angezeigt, da es denselben Wert hat und sich in der Quelloreihenfolge dahinter befindet.
    • -
- -

Sie können negative Werte festlegen, damit Elemente vor Elementen mit 0 angezeigt werden. Sie können beispielsweise die Schaltfläche "Blush" am Anfang der Hauptachse mit der folgenden Regel anzeigen lassen:

- -
button:last-child {
-  order: -1;
-}
- -

Verschachtelte Flexboxen

- -

Mit der Flexbox können einige recht komplexe Layouts erstellt werden. Es ist vollkommen in Ordnung, ein Flex-Element auch als Flex-Container festzulegen, damit seine untergeordneten Elemente auch wie flexible Boxen angeordnet sind. Schauen Sie sich complex-flexbox.html an (Live-Ansicht).

- -

- -

Das HTML dafür ist ziemlich einfach. Wir haben ein {{htmlelement ("section")}} Element, das drei {{htmlelement ("article")}} enthält. Das dritte {{htmlelement ("article")}} enthält drei {{htmlelement ("div")}}. ::

- -
section - article
-          article
-          article - div - button
-                    div   button
-                    div   button
-                          button
-                          button
- -

Schauen wir uns den Code an, den wir für das Layout verwendet haben.

- -

Zunächst legen wir fest, dass die untergeordneten Elemente des {{htmlelement ("section")}} als flexible Boxen angeordnet werden.

- -
section {
-  display: flex;
-}
- -

Als nächstes setzen wir einige Flex-Werte für die {{htmlelement ("article")}} selbst. Beachten Sie hier besonders die 2. Regel - wir setzen das dritte {{htmlelement ("article")}} so, dass seine Kindelemente auch wie flexible Elemente angeordnet sind, aber diesmal legen wir sie wie eine Spalte an.

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 3 200px;
-  display: flex;
-  flex-flow: column;
-}
-
- -

Als nächstes wählen wir das erste {{htmlelement ("div")}} aus. Wir verwenden zuerst flex: 1 100px; Um eine effektive Höhe von 100 Pixel zu erreichen, setzen wir die untergeordneten Elemente (die {{htmlelement ("button")}} Elemente) so, dass sie auch wie flexible Elemente angeordnet sind. Hier legen wir sie in einer Umbruchreihe an und richten sie in der Mitte des verfügbaren Platzes aus, wie wir es in dem Beispiel für einzelne Schaltflächen getan haben, das wir zuvor gesehen haben.

- -
article:nth-of-type(3) div:first-child {
-  flex:1 100px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Schließlich haben wir einige Größen für die Schaltfläche festgelegt, aber interessanterweise geben wir ihr einen Flex-Wert von 1 Auto. Dies hat einen sehr interessanten Effekt, den Sie sehen, wenn Sie versuchen, die Breite Ihres Browserfensters zu ändern. Die Schaltflächen nehmen so viel Platz wie möglich ein und sitzen so viele auf derselben Linie wie möglich. Wenn sie jedoch nicht mehr bequem auf dieselbe Linie passen, werden sie nach unten fallen gelassen, um neue Linien zu erstellen.

- -
button {
-  flex: 1 auto;
-  margin: 5px;
-  font-size: 18px;
-  line-height: 1.5;
-}
- -

Cross-Browser-Kompatibilität

- -

Die Flexbox-Unterstützung ist in den meisten neuen Browsern verfügbar - Firefox, Chrome, Opera, Microsoft Edge und IE 11, neuere Versionen von Android / iOS usw. Sie sollten sich jedoch bewusst sein, dass noch ältere Browser verwendet werden, die Flexbox nicht unterstützen (oder aber eine veraltete Version davon unterstützen.)

- -

Während Sie nur lernen und experimentieren, spielt dies keine große Rolle. Wenn Sie jedoch die Verwendung von Flexbox in einer echten Website in Betracht ziehen, müssen Sie Tests durchführen und sicherstellen, dass Ihre Benutzererfahrung in möglichst vielen Browsern noch akzeptabel ist.

- -

Flexbox ist etwas kniffliger als einige CSS-Funktionen. Wenn einem Browser beispielsweise ein CSS-Schlagschatten fehlt, kann die Site wahrscheinlich weiterhin verwendet werden. Wenn Flexbox-Funktionen nicht unterstützt werden, wird ein Layout wahrscheinlich vollständig beschädigt, wodurch es unbrauchbar wird.

- -

In unserem Cross-Browser-Testmodul diskutieren wir Strategien zur Überwindung von Problemen mit der Cross-Browser-Unterstützung.

- -

Testen Sie Ihre Fähigkeiten!

- -

Wir haben in diesem Artikel viel behandelt, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen beibehalten haben, bevor Sie fortfahren - siehe Testen Sie Ihre Fähigkeiten: Flexbox.

- -

Zusammenfassung

- -

Damit ist unsere Tour durch die Grundlagen der Flexbox abgeschlossen. Wir hoffen, Sie hatten Spaß und werden ein gutes Stück damit herumspielen, wenn Sie Ihr Lernen vorantreiben. Als nächstes werfen wir einen Blick auf einen weiteren wichtigen Aspekt von CSS-Layouts - CSS-Raster.

- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
- -
-

In diesem Modul

- - -
diff --git a/files/de/learn/css/css_layout/index.html b/files/de/learn/css/css_layout/index.html deleted file mode 100644 index 0c1f7325c5c7e4..00000000000000 --- a/files/de/learn/css/css_layout/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: CSS layout -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - NeedsTranslation - - Positioning - - TopicStub - - alignment - - flexbox - - float - - table -translation_of: Learn/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

Before starting this module, you should already:

- -
    -
  1. Have basic familiarity with HTML, as discussed in the Introduction to HTML module.
    2. -
  2. Be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
    3. -
  3. Understand how to style boxes.
    4. -
- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -

These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.

- -
-
Introduction to CSS layout
-
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.
-
Normal flow
-
Elements on webpages lay themselves out according to normal flow - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.
-
Flexbox
-
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can test your flexbox skills to check your understanding before moving on.
-
Grids
-
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then test your grid skills before moving on.
-
Floats
-
Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.
-
Positioning
-
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.
-
Multiple-column layout
-
The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.
-
Responsive design
-
As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.
-
Beginner's guide to media queries
-
The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.
-
Legacy layout methods
-
Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.
-
Supporting older browsers
-
-

In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.

-
-
Assessment: Fundamental layout comprehension
-
An assessment to test your knowledge of different layout methods by laying out a webpage.
-
- -

See also

- -
-
Practical positioning examples
-
This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
-
diff --git a/files/de/learn/css/first_steps/how_css_is_structured/index.html b/files/de/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index 184333ad58c581..00000000000000 --- a/files/de/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Lesbares CSS -slug: Learn/CSS/First_steps/How_CSS_is_structured -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS -original_slug: Web/Guide/CSS/Getting_started/Lesbares_CSS ---- -
{{LearnSidebar}}
- -

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}Das ist der sechste Teil des CSS Getting Started Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.

- -

Information: Lesbares CSS

- -

Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.

- -

Leerstellen

- -

Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.

- -

Im Kontext eines Seitenlayouts und -zusammenstellung sind Leerstellen die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.

- -

Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.

- -

Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.

- -
-
Beispiele
- -

Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:

- -
.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
- -

Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:

- -
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
- -

Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:

- -
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
- -

Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):

- -
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
- -

Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.

- -
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
- -

Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.

- -

Kommentare

- -

Kommentare in CSS beginnen mit /* und enden mit */.

- -

Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke auskommentieren.

- -

Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.

- -
-
Beispiel
- -
/* style for initial letter C in first paragraph */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
- -

Gruppierte Selektoren

- -

Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.

- -

An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.

- -
-
Beispiel
- -

Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.

- -

Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.

- -
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
- -

Aktion: Kommentare hinzufügen und das Layout verbessern

- -
    -
  1. Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.
    3. -
  3. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
- -
-
Herausforderung
- -

Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

(Es gibt mehrere Wege dies zu erreichen.)

- -
-
Mögliche Lösung
-Eine mögliche Lösung wäre das Auskommentieren der Regel .carrot: - -
/*.carrot {
-  color: orange;
-}*/
-Lösung ausblenden
-Sehen Sie sich die Lösung an.
- -

Was kommt als Nächstes?

- -

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um das Aussehen von Text in Ihrem Dokument zu spezifizieren.

diff --git a/files/de/learn/css/first_steps/how_css_works/index.html b/files/de/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 4d3705bf64546f..00000000000000 --- a/files/de/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Was ist CSS -slug: Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/Guide/CSS/Getting_started/Was_ist_CSS ---- -
{{LearnSidebar}}
- -

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} Das erste Kapitel von CSS für Einsteiger erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.

- -

Was ist CSS

- -

Cascading Style Sheets (CSS für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.

- -

Ein Dokument ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer Auszeichnungssprache (Markup Language) strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.

- -

Ein solches Dokument einem Benutzer zu präsentieren bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.

- -
-

Beispiele

- -
    -
  • Eine Webseite, wie diese hier, ist ein Dokument.
    - Die Information, die Sie auf einer Webseite sehen können, ist normalerweise mit der Auszeichnungssprache HTML (HyperText Markup Language) geschrieben.
    • -
  • Auch Dialoge in einer Anwendung - auch Dialogfenster genannt - sind oft Dokumente. Solche Dialoge können auch mit einer Auszeichnugssprache, wie XUL (XML User Interface Language für XML Benutzeroberflächensprache), strukturiert sein. XML oder XUL sind also Beispiele für andere Auszeichungssprachen.
    • -
-
- -

In dieser Anleitung gibt es Boxen mit der Beschriftung Weitere Details, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.

- -
-
Weitere Details
- -

Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.

- -

Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.

- -

Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.

- -

Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:

- - - - - - - - - - - - - - - - - - - - -
HTMLfür Webseiten
XMLallgemein für strukturierte Dokumente
SVGfür Grafiken
XULfür Userinterfaces in Mozilla
- -

Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.

-
- -
-
Weitere Details
- -

In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt user agent (UA) genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.

- -

Für korrekte Definitionen der CSS-Terminologie sehen Sie unter Definitions in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.

-
- -

Action: Ein Dokument erstellen

- -
<!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
- -

{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}

- -
    -
  1. Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.
    2. -
  2. Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.
    3. -
  3. Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen doc1.html
    4. -
  4. Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:
    5. -
- - - - - - - -
Cascading Style Sheets
- -

Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.

- -

Was nun?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im nächsten Abschnitt werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.

diff --git a/files/de/learn/css/first_steps/index.html b/files/de/learn/css/first_steps/index.html deleted file mode 100644 index bc494a6db6a6b4..00000000000000 --- a/files/de/learn/css/first_steps/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Erste Schritte mit CSS -slug: Learn/CSS/First_steps -translation_of: Learn/CSS/First_steps ---- -
{{LearnSidebar}}
- -

CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand von Seiteninhalten ändern, Inhalt in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in CSS, beginnend mit einem Überblick über Funktionsweise, Syntax und wie Sie mit CSS Darstellungsstile zu HTML-Seiten hinzufügen können.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Voraussetzungen

- -

Bevor Sie mit diesem Lernmodul beginnen, sollten Sie:

- -
    -
  1. grundsätzlich mit Computern umgehen und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren) können.
    2. -
  2. sich bereits eine einfache Arbeitsumgebung eingerichtet haben (wie in Notwendige Software installieren beschrieben) und wissen, wie Sie Dateien erstellen und ordnen (wie in Dateien nutzen erklärt).
    3. -
  3. über grundlegende HTML-Kenntnisse (entsprechend dem Lernmodul Einführung in HTML) verfügen.
    4. -
- -
-

Hinweis: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie JSBin oder Thimble ausprobieren.

-
- -

Lerneinheiten

- -

Die Lerneinheiten dieses Moduls werden Ihnen alle grundlegenden Konzepte von CSS vermitteln. Dazu erhalten Sie auch immer wieder Gelegenheit, Ihr neu erworbenes Wissen gleich auszuprobieren.

- -
-
Was ist CSS?
-
Mit {{Glossary("CSS")}} (Cascading Style Sheets) können Sie toll aussehende Webseiten erstellen. Diese Lerneinheit gibt einen Vorgeschmack darauf anhand eines einfachen Code-Beispiels und erklärt einige Schlüsselelemente der Sprache.
-
CSS kennenlernen
-
In dieser Lerneinheit wenden Sie CSS auf ein einfaches HTML-Dokument an und lernen dabei einige nützliche Dinge über die Sprache.
-
Wie CSS aufgebaut ist
-
Nachdem Sie jetzt eine Vorstellung davon haben, was CSS ist und wie es benutzt wird, befassen wir uns etwas genauer mit dem Aufbau der Sprache. Diese Lerneinheit eignet sich auch gut zum Nachlesen, wenn Sie in späteren Abschnitten auf Verständnisschwierigkeiten stoßen.
-
Wie CSS funktioniert
-
Bis jetzt haben wir uns damit beschäftigt, wie sich CSS nutzen lässt, um einfache stylesheets zu schreiben. In dieser Lerneinheit schauen wir uns, wie ein Browser CSS and HTML verarbeitet und in eine Webseite verwandelt.
-
Nutzen Sie Ihr neues Wissen
-
Die Kenntnisse, die Sie sich in den vorherigen Lerneinheiten angeeignet haben, sollten es Ihnen erlauben, einfache Textseiten mit Hilfe von CSS zu formatieren. Hier erhalten Sie genau dazu Gelegenheit!
-
- -

See also

- -
-
Intermediate Web Literacy 1: Intro to CSS
-
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.
-
diff --git a/files/de/learn/css/index.html b/files/de/learn/css/index.html deleted file mode 100644 index 9e1158a286a102..00000000000000 --- a/files/de/learn/css/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: CSS -slug: Learn/CSS -tags: - - Anfänger - - CSS - - Debuggen - - Einsteiger -translation_of: Learn/CSS ---- -
{{LearnSidebar}}
- -

Cascading Stylesheets — oder {{glossary("CSS")}} — ist die zweite Technologie, die Sie nach {{glossary("HTML")}} lernen sollten. Während HTML genutzt wird, um die Struktur und Semantik Ihrer Inhalte zu definieren, dient CSS dazu, deren Erscheinung und Layout zu beeinflussen. So lässt sich CSS beispielsweise nutzen, um die Schriftarten, Farben, Größen und räumliche Abstände Ihrer Inhalte zu verändern, Inhalte in mehreren Spalten anzuordnen oder Animationen und andere dekorative Merkmale hinzuzufügen.

- -

Lernprozess

- -

Sie sollten sich unbedingt mit den Grundlagen von HTML auseinandersetzen, bevor Sie sich an CSS versuchen. Wir empfehlen Ihnen, zunächst unser "Einführung in HTML"-Modul durchzuarbeiten — anschließend können Sie folgende Themen angehen:

- -
    -
  • CSS, beginnend mit diesem Modul "Einführung in CSS"
    • -
  • Fortgeschrittene HTML Module
    • -
  • JavaScript, und wie man es einsetzt, um Webseiten dynamische Funktionalität hinzuzufügen
    • -
- -

Wir empfehlen, HTML und CSS gleichzeitig zu lernen und immer wieder zwischen beiden Themen hin- und her zu springen. Denn HTML ist sehr viel interessanter mit CSS, und CSS lässt sich schwerlich ohne HMTL erlernen.

- -

Bevor Sie in dieses Thema starten, sollten Sie zumindest ein grundlegendes Verständnis im Umgang mit Computern sowie dem passiven Gebrauch des Internets (also einfach nur Surfen und Inhalte konsumieren) haben. Sie sollten eine einfache Arbeitsumgebung eingerichtet haben, wie im Artikel "Nötige Software installieren" ausführlich beschrieben, und wissen, wie Sie Dateien erzeugen und verwalten, wie im Artikel "Dateien nutzen" beschrieben — beides Teil unseres Anfängerkurses "Das Web für Einsteiger".

- -

Es ist empfehlenswert, im Vorfeld den Artikel "Das Web für Einsteiger" durchzuarbeiten, bevor Sie sich an diesem Thema versuchen, aber es ist keinesfalls zwingend erforderlich; das Meiste, was im CSS Grundlagenartikel angerissen wird, wird auch in unserem Modul "Einführung in CSS" behandelt, allerdings weit ausführlicher.

- -

Module

- -

Dieses Thema unterteilt sich in die folgenden Module, die Sie in der vorgeschlagenen Reihenfolge abarbeiten sollten. Sie sollten definitiv mit dem Ersten beginnen.

- -
-
Einführung in CSS
-
Dieses Modul vermittelt Ihnen, wie CSS grundlegend funktioniert, inklusive Selektoren und Eigenschaften, CSS-Schreibregeln, Anwendung von CSS auf HTML, wie man Maße, Farben und andere Einheiten in CSS spezifiziert, Kaskadierung und Vererbung, Box-Modell Grundlagen, und das Debuggen von CSS.
-
Textgestaltung
-
Hier lernen wir Grundlagen der Textgestaltung, wie das Setzen der Schriftart, Fett- und Kursivdruck, Zeilen- und Buchstabenabstand, und Schattierung sowie andere Textmerkmale. Abgerundet wird dieses Modul mit der Anwendung von eigenen Schriftarten auf Ihre Webseite und die Gestaltung von Listen und Links.
-
Boxgestaltung
-
Als Nächstes befassen wir uns mit der Gestaltung von Boxen, einem der grundlegenden Schritte in Richtung Webseitenlayout. In diesem Modul rekapitulieren wir das Box-Modell, anschließend schauen wir uns an, wie man das Layout einer Box kontrolliert, indem man Polsterung, Rahmen und Randabstände festlegt, Hintergrundfarben, -bilder und andere Eigenschaften einsetzt, und ausgefallene Dinge wie Schattenwurf und Filter einstellt.
-
CSS-Layout
-
Jetzt haben wir uns die Grundlagen von CSS angeeignet: Wir wissen wie man Texte formatiert und wie man Boxen gestaltet und manipuliert, die Ihre Inhalte umfassen. Nun wird es Zeit sich anzusehen, wie Sie Ihre Boxen an die richtige Stelle und in richtiger Relation zum Darstellungsfeld setzen, und umgekehrt. Wir haben alle nötigen Voraussetzungen, um tief in's Thema CSS-Layout einzutauchen, uns verschiedene Bildschirm-Einstellungen anzusehen, traditionelle Methoden wie Schweben und Positionierung, und neumodische Layoutwerkzeuge wie Flexboxen.
-
Responsives Design (ausstehend)
-
Mit einer Vielzahl verschiedener Endgeräte kann man heutzutage im Netz surfen, infolge dessen ist Responsives Webdesign (RWD) zu einer Kerndisziplin des Webdesigns geworden. Dieses Modul wird die grundlegenden Prinzipien und Werkzeuge des RWD behandeln, das Anwenden verschiedener CSS auf ein Dokument in Abhängigkeit von Geräteeigenschaften wie Bildschirmgröße, -format und -auflösung erklären, und die verfügbaren Technologien zum Darstellen von Videos und Bildern in Abhängigkeit von jenen Eigenschaften ausloten.
-
- -

Lösen typischer CSS-Probleme

- -

CSS nutzen, um typische Probleme zu lösen verweist auf Artikelabschnitte, die erklären, wie man mit CSS die häufigsten Problems beim Erstellen einer Webseite behebt.

- -

Von Anfang an werden sie meist HTML-Elemente und deren Hintergründe einfärben, Größe, Form und Position von Elementen ändern sowie Rahmen definieren und hinzufügen. Aber es gibt nicht viel, was Sie nicht tun können, sobald Sie auch nur ein solides Verständnis der Grundlagen von CSS haben. Das Beste am CSS-Lernprozesses ist, dass man nur mit Grundlagenwissen bereits ein gutes Gefühl dafür entwickelt, was möglich und was nicht möglich ist, selbst wenn Sie noch nicht wirklich wissen, wie diese mögliche Lösung aussieht.

- -

Siehe auch

- -
-
CSS auf MDN
-
Die Hauptübersicht für die CSS-Dokumentation auf MDN, wo Sie ausführliche Referenzdokumente für alle Merkmale der CSS-Sprache finden. Möchten Sie nachschlagen, welche verschieden Werte eine Eigenschaft annehmen kann? Dann ist dies der richtige Ort zum stöbern.
-
diff --git a/files/de/learn/css/styling_text/fundamentals/index.html b/files/de/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index e7b8d56d5060b9..00000000000000 --- a/files/de/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Textstyles -slug: Learn/CSS/Styling_text/Fundamentals -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/Guide/CSS/Getting_started/Textstyles ---- -
{{LearnSidebar}}
- -

{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}Das ist der siebte Teil des CSS Getting Started Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.

- -

Information: Textstyles

- -

CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.

- -

Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:

- -
    -
  • Fettgedruckt, kursiv und kleine Großbuchstaben
    • -
  • Schriftgröße
    • -
  • Zeilenhöhe
    • -
  • Schriftart
    • -
- -
-
Beispiel
- -
p {
-  font: italic 75%/125% "Comic Sans MS", cursive;
-}
-
- -

Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.

- -

Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.

- -

Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.

- -

Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf normal zurückgesetzt werden.

-
- -

Schriftarten

- -

Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.

- -

Beenden Sie die Liste mit einer eingebauten Standardschriftart: serif, sans-serif, cursive, fantasy oder monospace.

- -

Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.

- -

Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.

- -

Schriftgrößen

- -

Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.

- -

Sie können die bereits vordefinierten Werte wie small, medium und large verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie smaller, larger, 150% oder 1.5em verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind 1.5em eineinhalb Mal so groß als die Schrift im Elternelement.

- -

Wenn nötig können Sie eine genaue Größe wie 14px (14 Pixel) für einen Bildschirm oder 14pt (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.

- -

Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.

- -

Zeilenhöhe

- -

Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.

- -

Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.

- -

Textdekoration

- -

Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie underline oder line-through definieren. Sie können sie auf none setzen, um explizit jede Textdekoration zu entfernen.

- -

Andere Eigenschaften

- -

Um nur kursiv anzugeben, verwenden Sie {{ cssxref("font-style") }}: italic;
- Um nur fettgedruckt anzugeben, verwenden Sie {{ cssxref("font-weight") }}: bold;
- Um nur kleine Großbuchstaben anzugeben, verwenden Sie {{ cssxref("font-variant") }}: small-caps;

- -

Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert normal oder inherit angeben.

- -
-
Mehr Details
- -

Sie können Textstyles auf viele andere Wege angeben.

- -

Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.

- -

Vermeiden Sie in einem komplexen Stylesheet die abgekürzte font Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).

- -

Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf Fonts in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter Text.

- -

Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.

-
- -

Aktion: Schriftart angeben

- -

Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.

- -
    -
  1. Bearbeiten Sie Ihre CSS Datei.
    2. -
  2. Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt: - 
    body {
-  font: 16px "Comic Sans MS", cursive;
-}
-
    -
    3. -
  3. Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.
    4. -
  4. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. Wählen Sie Ansicht > Schirftgröße > Vergrößern (oder Ansicht > Zoom > Vergrößern) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.
    6. -
- -
-
Herausforderung
- -

Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Mögliche Lösung
- -

Fügen Sie die folgende Style Deklaration zur strong Regel hinzu:

- -
  font: 200% serif;
-
-Wenn Sie getrennte Deklarationen für font-size und font-family verwenden, dann wird die font-style Einstellung auf dem ersten Absatz nicht überschrieben. - -

-Hide solution
-Sehen Sie sich die Lösung an.
- -

Was kommt als Nächstes?

- -

{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der nächste Teil listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können.

diff --git a/files/de/learn/css/styling_text/index.html b/files/de/learn/css/styling_text/index.html deleted file mode 100644 index f71e334b556d46..00000000000000 --- a/files/de/learn/css/styling_text/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Styling text -slug: Learn/CSS/Styling_text -tags: - - Beginner - - CSS - - CodingScripting - - Fonts - - Landing - - Links - - Module - - NeedsTranslation - - Text - - TopicStub - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Glitch.

-
- -

Guides

- -

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

- -
-
Fundamental text and font styling
-
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
-
Styling lists
-
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
-
Styling links
-
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
-
Web fonts
-
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
-
- -

Assessments

- -

The following assessments will test your understanding of the text styling techniques covered in the guides above.

- -
-
Typesetting a community school homepage
-
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
-
diff --git a/files/de/learn/forms/index.html b/files/de/learn/forms/index.html deleted file mode 100644 index a4bf773600f0ae..00000000000000 --- a/files/de/learn/forms/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTML forms -slug: Learn/Forms -tags: - - Anleitung - - Beginner - - Formular - - HTML - - Lernen - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -
{{LearnSidebar}}
- -

Dieser Abschnitt bietet eine Reihe von Artikeln, die Dir helfen werden, HTML-Formulare zu meistern. HTML-Formulare sind sehr mächtige Werkzeuge, um mit Nutzern zu interagieren — am häufigsten werden sie benutzt, um Daten von Nutzern zu erheben oder um ihnen zu erlauben, eine Benutzerschnittstelle zu bedienen. Auch ist klar, dass wegen historischen und technischen Gründen es nicht immer offensichtlich ist, wie man diese volkommen effektiv nutzt. In dieser Anleitung werden wir alle Aspekte der HTML-Formulare abdecken, einschließlich das Auszeichnen ihrer HTML-Struktur, das Styling von Formelementen, das Validieren von Formulardaten und das Senden von Daten an den Server.

- -

Voraussetzungen

- -

Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest durch unsere Einführung in HTML durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer Nativen-Formular-Komponenten-Anleitung zu machen.

- -

Das Meistern von Formularen benötigt allerdings mehr als nur HTML-Kenntnisse — Du wirst auch einige spezielle Techniken zum Stylen von Formular-Komponenten lernen müssen. Daneben ist ein wenig Scripting-Wissen erforderliche, um Dinge wie Validierung und das erstellen eigener Formular-Komponenten zu erledigen. Daher würden wir empfehlen, dass du diese Seite zunächst verlässt, um ein wenig CSS und JavaScript zu erlernen und danndie anderen Abschnitte durchliest.

- -

Der obenstehende Text ist ein guter Indikator, warum wir Web-Formulare in ein eigenständiges Modul gepackt haben anstatt Teile davon in die HTML, CSS, und JavaScript Themengebiete zu legen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und benötigen dazu eine enge Verbindung von CSS- und JavaScript-Techniken, um das meiste aus ihnen herauszuholen.

- -
-

Notiz: Wenn du auf einem Computer/Tablet/anderem Gerät arbeitest, wo du nicht die Möglichkeit hast, eigene Dateien zu erstellen, kannst du (die meisten) Code-Beispiele in einem Online-Coding-Programm, wie JSBin oder Glitch nutzen.

-
- -

Grundlagen

- -
-
Dein erstes HTML-Formular
-
Der erste Artikel in unserer Reihe bietet Dir deine erste Erfarung, ein HTML-Formular zu erstellen, was das einfache Designen eines Formulars, Einbinden mit den richtigen HTML-Element, dezentes Styling mit CSS und Weitergabe der Daten zu einem Server mit einschließt.
-
Wie man ein HTML-Formular strukturiert
-
Nach dem Abhandeln der Grundlagen, können wir jetzt mehr detalliert in die Elemente, die Struktur bieten, hereingucken und die Bedeutung verschiedener Teile des Formulars verstehen.
-
- -

Die verschiedenen Formular-Komponeneten

- -
-
Die nativen Formular-Komponenten
-
Wir gucken jetzt auf die Funktionalität der verschiedenen {{htmlelement("input")}} Formular-Komponenten im Detail - Welche Optionen verfügbar sind, um verschiedene Dateitypen zu sammeln.
-
Die HTML5 Eingabetypen
-
Hier setzen wir unsere Vertiefung in das <input>-Element fort, schauen auf die verschiedenen zusätzlichen input-Typen, die mit der Veröffentlichung von HTML5 bereitgestellt wurden und die verschiedenen UI-Komponenten und die Verbesserung der Datenerhebung, welche sie ermöglichen. Zusätzlich schauen wir uns das {{htmlelement('output')}}-Element an.
-
Andere Formular-Komponentent
-
Next we take a look at all the non-<input> form controls and associated tools, such as {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.
-
- -

Form styling guides

- -
-
Stylen von Web-Formularen
-
Dieser Artikel stellt eine Einführung in das Stylen von Formularen mit CSS bereit. Er beinhaltet Grundlagen, die Du vielleicht für einfache Styling-Aufgaben benötigen wirst.
-
Fortgeschrittenes Stylen von Formularen
-
Hier schauen wir uns einige fortgeschrittene Techniken zum Stylen von Formularen an, die benötigt werden, sobald einige der schwieriger zu stylende Formular-Elemente gehandhabt werden sollen.
-
UI pseudo-Klassen
-
Eine Einführung in die UI pseudo-Klassen, die ermöglichen, dass HTML Formular-Komponenten auf Basis ihres aktuellen Status anvisiert werden können.
-
- -

Prüfen und Abschicken von Daten

- -
-
Clientseitige Formulardaten-Validation
-
Das Senden von Daten ist noch nicht genug - wir müssen auch prüfen, ob die Daten, die der Nutzer eingegeben hat, im korrektem Format sind, um sie erfolgreich verarbeiten zu können und diese unserer Anwendung nicht zerstören. Wir möchten dem Nutzer beim Ausfüllen der Daten helfen, und ihn nicht frustrieren, wenn er versucht unsere Anwendung zu nutzen. Formular-Validation hilft uns, diiese Ziele zu erreichen - Dieser Artikel erklärt Dir alles, was du wissen musst.
-
Das Senden von Daten
-
Dieser Artikel zeigt, was passiert, wenn ein Benutzer ein Formular abschickt — wohin gehen die Daten und wie werden diese genutzt, wenn diese dort angekommen sind? Wir gucken ebenfalls auf ein paar Sicherheitsbedenken, die mit dem Senden von Daten verbunden sind.
-
- -

Weiterführende Anleitungen

- -

Die nachfolgenden Artikel sind nicht zwingend notwendig für den Lernpfad, aber sie erweisen sich als interessant und nützlich, wenn Du die obenstehenden Techniken gemeistert hast und mehr lernen möchtest.

- -
-
Wie man eigene Formular-Komponenten baut
-
Du wirst über ein paar Fälle stoßen, wo die nativen Formuar-Komponenten nicht das bieten, was Du brauchst, wie zum Beispiel aus Styling-Gründen oder Funktionalität. In diesen Fällen musst Du eventuell Deine eigenen Formular-Komponenten aus purem HTML bauen. Dieser Artikel erklärt, wie Du dies tun kannst und welchen Überlegungen Du Dir im Klaren sein musst - mit einem praktischen Fall-Beispiel.
-
Senden von Formularen mit JavaScript
-
Dieser Artikel betrachtet Möglichkeiten, wie ein Formular genutzt werden kann, um eine HTTP-Anfrage zu erstellen und diese mit JavaScript versandt werden kann statt dem üblichen Formularversand. Es schaut auch auf die Gründe, warum Du dies machen wolltest und die Folgen davon. (Siehe auch Using FormData objects.)
-
HTML-Formulare in veralteten Browsern
-
Dieser Artikel beinhaltet das Erkennen von Features usw. Er sollte zum Artikel über das Testen von plattformunabhängigen Features umleiten, da der selbe Inhalt dort besser erklärt wird.
-
- -

Siehe auch

- - diff --git a/files/de/learn/getting_started_with_the_web/css_basics/index.html b/files/de/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index ec75998dfc08b0..00000000000000 --- a/files/de/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: CSS-Grundlagen -slug: Learn/Getting_started_with_the_web/CSS_basics -tags: - - Anfänger - - CSS - - Coding - - Design - - Lernen - - Stylesheets - - Web -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (engl.: Cascading Style Sheets = gestufte Gestaltungsbögen) ist die Sprache, die Sie benutzen, um Ihre Webseite zu gestalten. CSS Grundlagen führt Sie durch die Grundlagen dieser Stylesheet-Sprache. Wir beantworten damit solche Fragen wie: »Wie kann ich die Farbe meines Textes ändern? Wie kann ich diesen Inhalt genau an einer bestimmten Stelle anzeigen lassen? Wie kann ich meine Webseite mit Hintergrundbildern und -farben versehen?«

-
- -

Was ist CSS jetzt wirklich?

- -

Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elemente auf der Seite das Aussehen festzulegen. Zum Beispiel benötigt man folgengen CSS-Code, um alle Absätze (<p>) auszuwählen und deren Inhalt rot einzufärben:

- -
p {
-  color: red;
-}
- -

Probieren Sie es aus: Kopieren Sie diese drei Zeilen CSS in eine neue Datei in einen Texteditor und speichern Sie die Datei unter dem Namen style.css im Verzeichnis styles.

- -

Aber wir müssen das CSS noch im HTML-Dokument verknüpfen, sonst würde die CSS-Datei von dem Browser nicht berücksichtigt. (Wenn Sie unserem Projekt nicht von Anfang an gefolgt sind, lesen Sie erst Dateien nutzen und HTML-Grundlagen, um zu erfahren, was Sie davor tun müssen.)

- -
    -
  1. Öffnen Sie die Datei index.html und fügen die folgende Zeile irgendwo in den Kopf (zwischen die <head>- und </head>-Tags) ein: - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. Speichern Sie die Datei index.html und öffnen Sie diese in einem Browser. Es sollte wie in diesem Beispiel aussehen:
    3. -
- -

Das Mozilla-Logo und ein paar Absätze. Der Text in den Absätzen ist rot gefärbt durch CSS.Wenn der Absatz jetzt rot ist: Herzlichen Glückwunsch! Sie haben nun zum ersten Mal Ihre eigene CSS-Datei geschrieben und eingebunden!

- -

Aufbau einer CSS-Regel

- -

Lassen Sie uns nun das CSS von oben etwas genauer anschauen:

- -

- -

Die ganze Struktur wird Regelsatz (oder oft nur »Regel«) genannt.

- -

Jetzt zu den Namen der einzelnen Teile:

- -
-
Selektor
-
Der HTML-Elementname steht direkt am Anfang der Regel. Er wählt die Elemente, die gestaltet werden sollen (in diesem Beispiel p) aus. Um ein anderes Element zu gestalten, muss man nur den Selektor ändern.
-
Deklaration
-
Eine einzelne Regel wie color: red; gibt an, welche Eigenschaft des Elements gestaltet werden soll.
-
Eigenschaft (englisch: property)
-
Art, auf die das ausgewählte HTML-Element gestaltet werden soll. (In diesem Fall ist color eine Eigenschaft des {{htmlelement("p")}} Elements.) In CSS wählen Sie aus, welche Eigenschaften Sie in der Regel setzen wollen.
-
Eigenschafts-Wert (englisch: property value)
-
Rechts neben der Eigenschaft, nach dem Doppelpunk, steht der Wert der Eigenschaft. Dieser gibt eine von vielen Möglichkeiten wieder, wie die Eigenschaft das Aussehen eines Elements verändern kann. (Es gibt viele andere Werte für color außer red).
-
- -

Beachten Sie die anderen wichtigen Teile der Syntax! Die Syntax ist sozusagen die Grammatik des Codes:

- -
    -
  • Hinter dem Selektor stehen die zugehörigen Regelsätze innerhalb geschwungener Klammern ({}).
    • -
  • Innerhalb einer Deklaration muss man einen Doppelpunkt (:) nutzen, um Eigenschaft und Wert zu trennen.
    • -
  • Am Ende jeder Deklaration muss ein Semikolon (;) gesetzt werden.
    • -
- -

Um mehrere Eigenschaften eines HTML-Elements auf einmal zu verändern, trennt man die Deklarationen innerhalb eines Regelsatzes mit Semikolons, wie folgt:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Mehrere Elemente auswählen

- -

Sie können auch mehrere Elemente auswählen, um einen einzigen Regelsatz auf diese alle anzuwenden. Schreiben Sie einfach mehrere Selektoren hintereinander, getrennt durch Kommas. So zum Beispiel:

- -
p,li,h1 {
-  color: red;
-}
- -

Verschiedene Arten von Selektoren

- -

Es gibt viele verschiedene Arten von Selektoren. Bisher haben wir nur Element-Selektoren genutzt, welche alle Elemente eines bestimmten Typs innerhalb eines HTML-Dokumentes auswählen. Aber wir können auch eine spezifischere Auswahl nutzen. Hier sind einige weitere Arten von Selektoren, welche häufig genutzt werden:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Selector nameWas wird ausgewählt?Beispiel
Element- Selektor (auch Tag- oder Typ-Selektor genannt)Alle HTML-Elemente eines bestimmten Typs. -

p
- Wählt alle <p>-Elemente aus.

-
ID-SelektorElement mit der entsprechenden ID wird ausgewählt. (Eine ID kann immer nur einem einzigen Element innerhalb eines Dokuments zugeordnet werden) -

#my-id
- Wählt <p id="my-id"> oder <a id="my-id"> aus.

-
Klassen-SelektorElement(e) mit der entprechenden Klasse werden ausgewählt. (Klassen können mehreren Elementen innerhalb eines Dokuments zugeordnet werden).my-class
- Wählt <p class="my-class"> und <a class="my-class"> aus.
Attribut-SelektorElement(e) mit entsprechendem Attribut werden ausgewählt.img[src]
- Wählt <img src="myimage.png"> , aber nicht <img> aus.
Pseudoklassen-SelektorenElement(e) eines bestimmten Typs, welche sich in einem bestimmten Zustand befinden (z.B.: Mauszeiger ist über dem Element)a:hover
- Wählt <a> nur dann aus, wenn der Mauszeiger darüber bewegt wird.
- -

Es gibt viele weitere Selektoren. Sie können alle in folgender Liste finden: Selektoren.

- -

Schriftart und Text

- -

Jetzt, da wir uns einige CSS-Grundlagen angeschaut haben, lassen Sie uns damit anfangen, mehr Regelsätze und Eigenschaften zu unserer style.css-Datei hinzuzufügen. Zuerst ändern wir die Schrift, damit unser Text besser aussieht.

- -
    -
  1. In einem vorherigen Artikel haben Sie schon eine Schriftart von Google Fonts ausgewählt, den zugehörigen Code sollten Sie schon irgendwo gespeichert haben. Fügen Sie das <link ... > Element in den Kopf Ihrer index.html Datei ein (zwischen den <head> und </head> Tags). Das <link> Element sollte wie folgt aussehen: - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. Löschen Sie die existierende Regel in Ihrer style.css-Datei. Es war ein guter Test, aber roter Text sieht doch nicht so schön aus.
    3. -
  3. Fügen Sie stattdessen die folgenden Zeilen in die CSS-Datei ein. Ersetzen Sie 'Platzhalter' mit der Schriftart, welche Sie auf Google Fonts ausgewählt haben (font-family bedeutet soviel wie "Schriftfamilie" und deutet auf die Schriftarten, welche Sie benutzen möchten). Diese Regel setzt eine globale Schriftart (font-family) und Schriftgröße(font-size) für die ganze Webseite, da im <html>-Element alle anderen Elemente enthalten sind. Die Eigenschaften font-family und font-size werden an die Elemente innerhalb eines Elements weiter vererbt: - 
    html {
-  font-size: 10px; /* px bedeutet 'pixels': die Schriftgröße wird auf 10 Pixel gesetzt  */
-  font-family: Platzhalter; /* hier kommt der Name der ausgewählten Schriftfamilie hin */
-}
    - -
    -

    Hinweis: In einem Kommentar wurde hinzugefügt, was "px" bedeutet. Alles in einem CSS-Dokument, was zwischen /* und */ steht, ist ein CSS-Kommentar, welchen der Browser ignoriert. Kommentare sind für Sie selbst gedacht, hier können Sie für sich hilfreiche Notizen machen.

    -
    -
    4. -
  4. Nun setzen wir die Schriftgröße für die textbeinhaltenden HTML-Elemente {{htmlelement("h1")}}, {{htmlelement("li")}} und {{htmlelement("p")}} fest. Wir zentrieren auch den Text von unseren Überschriften mit text-align: center; und ändern die Linienhöhe (line-height) und den Buchstabenabstand (letter-spacing), um den Text der p und li Elemente etwas lesbarer zu machen: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

Sie können die Schriftgröße über den Wert vor 'px' ändern, wie Sie möchten. Ihre Webseite sollte jetzt ungefähr so aussehen:

- -

Mozilla Logo und ein paar Absätze. Eine sans-serif Schrift wurde gesetzt, die Schriftgröße, Linienhöhe und Buchstabenabstand wurden angepasst und die Hauptüberschrift zentriert.

- -

Boxen, überall Boxen - das CSS Box-Modell

- -

Eine Sache, welche Sie bemerken werden, wenn Sie CSS-Code schreiben, ist, dass es sich oft um das Gestalten von Boxen dreht - Sie werden die Größe, die Farbe, die Position, usw. von Boxen bestimmen. Die meisten HTML-Elemente auf Ihrer Seite können als Boxen oder Schachteln betrachtet werden, welche übereinander sitzen.

- -

a big stack of boxes or crates sat on top of one another

- -

Es ist daher nicht überraschend, dass das CSS-Layout auf dem Box-Modell basiert. Jede Box, die einen Raum auf Ihrer Webseite einnimmt, hat folgende Eigenschaften:

- -
    -
  • padding, der Innenabstand: das ist der Raum direkt um den Inhalt des Elements (z.B. direkt um einen Absatz <p> drumherum)
    • -
  • border, der Rahmen: eine Linie, welche direkt außerhalb des padding sitzt
    • -
  • margin, der Außenabstand: der Raum außerhalb des Rahmens
    • -
- -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

Wir werden hier auch die folgenden Eigenschaften benutzen:

- -
    -
  • width, die Breite eines Elements
    • -
  • background-color, die Farbe hinter dem Inhalt und padding des Elements
    • -
  • color, die Farbe des Inhaltes des Elements (meistens Text)
    • -
  • text-shadow, gibt dem Text innerhalb des Elements einen Schatten
    • -
  • display, Ändert die Darstellungsweise der Box (diese Eigenschaft werden wir uns später noch genauer anschauen)
    • -
- -

Lassen Sie uns nun unserem Beispiel etwas mehr CSS-Code hinzufügen! Fügen Sie die folgenden neuen Regeln am Ende Ihrer CSS-Datei ein. Haben Sie keine Angst mit den Werten zu experimentieren.

- -

Ändern der Hintergrundfarbe für die ganzen Seite

- -
html {
-  background-color: #00539F;
-}
- -

Dieser Regelsatz ändert die Hintergrundfarbe auf der ganzen Seite. Ändern Sie die Hintergrundfarbe in die, welche Sie sich ausgesucht haben, als Sie Ihre Webseite geplant haben.

- -

Dem body Form geben

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Jetzt widmen wir uns dem <body>-Element. Hier habe wir einige neue Deklarationen, lassen Sie uns diese genauer anschauen:

- -
    -
  • width: 600px; — die Breite (engl.: width) des <body>-Elements wird auf 600 Pixel festgelegt.
    • -
  • margin: 0 auto; — Wenn man bei den Eigenschaften margin oder padding zwei Werte setzt, dann steht der erste Wert für den Abstand nach oben und nach unten (welcher in diesem Fall 0 ist) und der zweite Wert steht für den Abstand links und rechts von dem Element (in diesem Fall setzen wir den Wert auf auto, wodurch der vorhandene Platz auf beiden Seiten des Elements gleichmäßig aufgeteilt wird). Man kann auch nur einen, drei oder vier verschiedene Werte benutzen, wie dies das Element beeinflusst können Sie in der Dokumentation nachlesen.
    • -
  • background-color: #FF9500; — dies setzt die Hintergrundfarbe des <body>-Elements. Hier wurde eine rötliche Farbe ausgewählt, aber Sie können gerne eine andere Farbe nehmen.
    • -
  • padding: 0 20px 20px 20px; — für den Innenabstand haben wir vier Werte gesetzt, um etwas Raum um unseren Inhalt zu schaffen. Oben setzen wir keinen Abstand, aber auf der linken und rechten Seite, sowie unten setzen wir jeweils 20 Pixel. Die Werte werden in folgender Reihenfolge gesetzt: oben, rechts, unten, links.
    • -
  • border: 5px solid black; — dies setzt einen 5 Pixel starken, soliden, schwarzen Rahmen um unser Element.
    • -
- -

Positionierung und Design der Hauptüberschrift

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Lassen Sie uns das {{htmlelement("h1")}}-Element stylen. Wenn Sie Ihre Webseite im Browser anschauen, werden Sie feststellen, das ein komischer Abstand oberhalb des <body>-Elements ist. Dies passiert, da Browser einige Eigenschaften automatisch stylen, auch wenn Sie selbst überhaupt kein CSS dafür geschrieben haben! Das klingt nach einem schlechten Verhalten seitens des Browsers, aber auch Webseiten, die gar keine Stylesheets haben, sollen lesbar bleiben. Um den automatischen Abstand beim <h1>-Element los zu werden haben wir das automatische Styling des Browsers überschrieben mit margin: 0; .

- -

Als nächstes haben wir den oberen und unteren inneren Abstand der Überschrift auf 20 Pixel gesetzt (padding: 20px 0;) und dem Text dieselbe Farbe gegeben wie dem Hintergrund des <html>-Elements.

- -

Eine interessante Eigenschaft ist text-shadow. Diese fügt dem Textinhalt eines Elements einen Schatten hinzu. Die vier Werte bedeuten:

- -
    -
  • Der erste Wert in Pixeln setzt den horizontalen Versatz des Schattens vom Text weg nach rechts - so weit fällt der Schatten: ein negativer Wert würde den Schatten nach links fallen lassen.
    • -
  • Der zweite Wert setzt den vertikalen Versatz des Schattens in Pixeln. Der Schatten fällt so weit nach unten, ein negativer Wert würde den Schatten nach oben fallen lassen.
    • -
  • Der dritte Wert setzt den Radius in Pixeln für den Bereich, in dem der Schatten verwischt ist. Ein größerer Wert hier bedeutet einen leichteren Schatteneffekt.
    • -
  • Der vierte Wert setzt die Grundfarbe des Schattens.
    • -
- -

Auch hier können Sie mit den verschiedenen Werten experimentieren, um zu sehen was dabei heraus kommt.

- -

Das Bild zentrieren

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Zuletzt werden wir das Bild auf unserer Seite zentrieren. Wir können das wieder mit margin: 0 auto; erreichen, allerdings müssen wir noch etwas anderes tun, damit dies funktioniert. Das <body>-Element ist ein Block bzw. eine Box, weswegen es ein margin und padding hat. Das <img>-Element ist ein Inline-Element, es wird nicht als Box angezeigt und hat kein margin oder padding. Um das Bild in ein Block-Element umzuwandeln, geben wir ihm einfach die folgende Deklaration: display: block;.

- -
-

Hinweis: Wenn Sie diplay: block; jetzt noch nicht ganz verstehen, ist das nicht schlimm. Wenn Sie CSS mehr studieren, dann werden Sie auch den Unterschied zwischen Inline-Elementen und Block-Elementen verstehen. Mehr zu den Möglichen display Werten können Sie in unserer Display Referenz lesen.

-
- -

Zusammenfassung

- -

Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite aussehen, die so aussieht (hier können Sie sich unsere Version ansehen) :

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

Falls Ihr Resultat nicht so aussieht, dann gehen Sie den Artikel noch einmal durch und versuchen Sie mögliche Fehler in Ihrem Code zu finden. Wenn Sie wirklich nicht weiter wissen, dann können Sie sich unseren Code auf Github ansehen.

- -

Wir haben hier wirklich nur die Grundlagen von CSS gesehen. Um mehr CSS zu lernen gehen Sie zu unserem CSS Lernbereich.

- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index 1b6f1c127a17a9..00000000000000 --- a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Dateien nutzen -slug: Learn/Getting_started_with_the_web/Dealing_with_files -tags: - - Anfänger - - Datei - - Dateien - - HTML - - Pfad - - Webseite -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files -original_slug: Learn/Getting_started_with_the_web/dateien_nutzen ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Eine Webseite besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn Sie eine Webseite erstellen, müssen Sie diese Dateien in einer sinnvollen Struktur speichern und sicherstellen, dass die Dateien miteinander kommunizieren können. Die Webseite sollte reibungslos funktionieren, bevor Sie alles auf einen Server hochladen. Dieser Artikel erklärt den Umgang mit Dateien, sodass Sie eine sinnvolle Dateistruktur für Ihre Website erstellen können.

-
- -

Wo auf Ihrem Computer soll die Webseite liegen?

- -

Wenn Sie an der Webseite »lokal« (auf dem eigenen Computer) arbeiten, sollten Sie alle zusammengehörigen Dateien in einem Ordner haben. Dieser Ordner sollte die Struktur der Dateien auf dem Server (dem Computer, über den die Dateien im Internet zugänglich sind) wiederspiegeln. Der lokale Ordner kann überall liegen, aber Sie sollten ihn dort speichern, wo Sie ihn wiederfinden können - vielleicht auf ihrem Desktop oder in einem Nutzerordner.

- -
    -
  1. Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der »webprojekte« heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.
    2. -
  2. In diesem Ordner erstellen Sie einen weiteren Ordner, in dem Sie ein bestimmtes Projekt speichern, in diesem Fall Ihre erste Webseite. Nennen Sie den Ordner »erste-webseite«.
    3. -
- -

Eine Bemerkung zu Großschreibung und Leerzeichen

- -

In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:

- -
    -
  1. Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens MeinBild.jpg abspeichern und dann darauf zugreifen möchten, funktoniert meinbild.jpg nicht. Für den Computer sind MeinBild.jpg und meinbild.jpg ganz unterschiedliche Dateien.
    2. -
  2. Browser, Webserver und Programmiersprachen gehen nicht immer gleich mit Leerzeichen um. Wenn z.B. ein Leerzeichen in einem Dateinamen vorkommt, könnte angenommen werden, es handle sich um zwei Dateien deren Namen durch das Leerzeichen getrennt sind: Mein Bild.jpg würde als eine Datei namens Mein und eine Datei namens Bild.jpg interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge "%20" (der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen: Mein Bild.jpg wird nämlich zu Mein%20Bild.jpg.
    3. -
- -

Deshalb ist es am besten, sich anzugewöhnen Namen von Ordnern und Dateien ohne Leerzeichen und nur in Kleinbuchstaben zu vergeben. So vermeidet man Probleme.

- -

In welcher Struktur sollten Sie Ihre Dateien ablegen?

- -

In dem Ordner Ihres Webseiten-Projektes (siehe oben) werden Sie meistens eine index.html-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:

- -
    -
  1. index.html: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Datei index.html. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namen index.html in Ihrem Projektordner (der mit dem Namen »erste-website«) ab.
    2. -
  2. Bilder-Ordner: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namen bilder in dem Projektordner (»erste-website«).
    3. -
  3. Styles-Ordner: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namens styles in Ihrem Projektordner.
    4. -
  4. Scripts-Ordner: Dieser Ordner wird Dateien enthalten, die interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstellen Sie einen Ordner mit den Namen scripts in Ihrem Projektordner.
    5. -
- -
-

Hinweis: Auf Windows-Computern kann es sein, dass die Dateinamen nicht ganz zu sehen sind. Es gibt eine Option mit dem Namen »Erweiterungen bei bekannten Dateitypen ausblenden«. Diese ist normalerweise eingeschaltet. Man kann die Funktion deaktivieren, wenn man in den Windows-Explorer geht, Ordner-Optionen wählt und Erweiterungen bei bekannten Dateitypen ausblenden abwählt und dann OK drückt.

-
- -

Dateipfade

- -

Damit Dateien untereinander kommunizieren können (wenn z.B. in der .html-Datei einer Seite ein Bild eingebunden ist), müssen Sie einen Dateipfad angeben. Das ist eine Art "Wegbeschreibung", anhand derer eine Datei eine andere Datei finden kann. Um zu zeigen, wie dies funktioniert, werden wir ein wenig HTML in unsere index.html-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel ("Wie soll Ihre Webseite aussehen?") ausgewählt haben, anzeigen.

- -
    -
  1. -

    Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner bilder.

    -
    2. -
  2. -

    Öffnen Sie die Datei index.html in einem Texteditor und fügen den folgenden Code genau so ein. (Keine Angst, Sie werden die Bedeutung dieser Befehle später noch kennen lernen.)

    - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mein Testseite</title>
-  </head>
-  <body>
-    <img src="" alt="Mein Testbild">
-  </body>
-</html>
    -
    3. -
  3. Die Zeile <img src="" alt="Mein Testbild"> ist der HTML-Code, welcher das Bild in die Seite einfügt. Jetzt müssen wir noch angeben, wo das Bild gespeichert ist. Das Bild ist im Ordner bilder, welcher in dem selben Ordner wie index.html ist. Um in diesen Unterordner zu gelangen, müssen wir bilder/DeinBildName eingeben. Wenn das Bild z.B. firefox-icon.png genannt ist, müssen wir bilder/firefox-icon.png eintippen.
    4. -
  4. Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei src="" ein.
    5. -
  5. Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Ein paar Grundregeln für Dateipfade:

- -
    -
  • Um eine Zieldatei am selben Speicherort zu verlinken, können Sie einfach den Dateinamen eingeben. Beispiel: mein-bild.jpg
    • -
  • Um eine Datei in einem Unterordner zu verlinken müssen Sie es so machen wie in dem Beispielprojekt oben. Beispiel: bilder/mein-bild.jpg
    • -
  • Wenn Sie ein Bild in dem Ordner darüber verlinken wollen, müssen Sie zuerst zwei Punkte machen: ../mein-bild.jpg
    • -
  • Dies können Sie kombinieren, so viel Sie wollen: ../irgendeinordner/einandererordner/usw/mein-bild.jpg
    • -
- -

Momentan ist das alles, was Sie wissen müssen.

- -
-

Achtung: Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. C:\windows. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.

-
- -

Was sollte sonst noch getan werden?

- -

Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 3d4d1dcd01c5b7..00000000000000 --- a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Wie das Internet funktioniert -slug: Learn/Getting_started_with_the_web/How_the_Web_works -tags: - - Anfänger - - Client - - DNS - - HTTP - - IP - - Infrastruktur - - Internet - - Lernen - - Server - - TCP - - Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Wie das Internet funktioniert gibt eine vereinfachte Übersicht darüber, was passiert, wenn Sie eine Webseite in einem Webbrowser auf Ihrem Computer oder auf Ihrem Smartphone aufrufen.

-
- -

Dieser Artikel ist sehr theoretisch und ist für den Anfang nicht essentiell um Code für Webseiten zu schreiben, aber nach einiger Zeit werden Sie feststellen, das es von Vorteil ist zu wissen, was im Hintergrund geschieht.

- -

Client und Server

- -

Computer welche über das Internet verbunden sind werden als Client oder als Server bezeichnet. Dieses Diagramm veranschaulicht, vereinacht, wie diese beiden Computer miteinander interagieren:

- -

- -
    -
  • Als Client (engl.: Nutzer oder Kunde) werden die Computer bezeichnet, welche mit dem Internet verbunden sind und typischerweise von einem Benutzer genutzt werden. Zum Beispiel Ihr Computer der via Wi-Fi mit dem Netzwerk verbunden ist, oder ihr Smartphone das über ein mobiles Netzwerk verbunden ist. Auch die Software, welche auf Benutzerseite das Internet veranschaulicht, normalerweise Webbrowser wie Firefox oder Chome, wird als Client bezeichnet.
    • -
  • Server sind Computer, welche Webseiten, Dateien oder Apps speichern. Wenn ein clientseitiger Computer auf eine Webseite zugreifen möchte, wird eine Kopie dieser Webseite von dem Server heruntergeladen, um dann in dem Browser des Benutzers angezeigt zu werden.
    • -
- -

Die anderen Teile der Werkzeugkiste

- -

Der Client und der Server, wie wir sie oben beschrieben haben sind nicht alles. Es gibt weitere Dinge, die involviert sind, um eine Webseite anzuzeigen und wir werden diese hier erläutern.

- -

Versuchen Sie sich vorzustellen, das Internet wäre eine Straße. An einem Ende der Straße ist der Client, was wie Ihr Haus sein könnte. An dem anderen Ende der Straße ist der Server, der wie ein Einkaufsladen ist, bei dem Sie etwas kaufen möchten.

- -

- -

Auf dem Weg von Ihrem Haus zum Shop müssen Sie an einigen anderen Stellen vorbei und "Hallo" sagen:

- -
    -
  • Ihre Internetverbindung: Erlaubt Ihnen Daten über das Internet zu senden und zu empfangen. Dies ist wie die eigentliche Straße auf der Sie entlang gehen, um von Ihrem Haus zum Laden zu gelangen.
    • -
  • TCP/IP: Transmission Control Protocol und Internet Protocol sind Kommunikationsprotokolle, welche bestimmen wie Daten über das Internet übertragen werden. Dies ist vergleichbar mit dem Transportvehikel, mit dem Sie zu dem Laden kommen, welches ein Auto oder ein Fahrad oder ein anderes Fahrzeug sein könnte.
    • -
  • DNS: Domain Name Servers sind wie ein Adressbuch für Internetseiten. Wenn Sie nach einer Internetadresse suchen, dann schaut der Browser auf dem DNS nach, um die wirkliche Adresse dieser Webseite zu finden. Der Browser muss herausfinden, auf welchem Server die Webseite liegt, damit er eine HTTP Anfrage an die richtige Stelle senden kann. Dies ist vergleichbar mit dem heraussuchen der Adresse des Geschäftes, in dem Sie einkaufen gehen wollen, damit Sie dieses auch finden.
    • -
  • HTTP: Hypertext Transfer Protocol ist ein Applikations {{Glossary("Protocol" , "protocol")}} welches eine Sprache definiert mit welcher Client und Server miteinander kommunizieren können. Dies ist wie die Sprache, mit der Sie im Laden Ihre Bestellung machen.
    • -
  • Zusätzliche Dateien: Eine Webseite wir aus verschiedenen Dateien zusammengesetzt, ähnlich wie sie aus verschiedenen Teilen aus dem Laden etwas sinnvolles bauen können. Diese Dateien kommen in zwei Haupttypen: -
      -
    • Code Dateien: Webseiten sind hauptsächlich aus HTML, CSS, und JavaScript, aber es gibt noch weitere Möglichkeiten.
      • -
    • Inhalte: Dies ist alles andere, was auf einer Webeite zu finden ist, wie Bilder, Musik, Videos, Word-Dokumente oder PDFs.
      • -
    -
    • -
- -

Was passiert jetzt also genau?

- -

Wenn Sie eine Internetadresse in Ihren Browser eintippen (wie wenn Sie zu dem Laden gehen):

- -
    -
  1. Der Browser kontaktiert den DNS Server und findet die echte Adresse von derm Server auf dem die Webseite liegt (Sie finden die Adresse des Ladens).
    2. -
  2. Der Browser sendet eine HTTP-Anfrage an den Server und fragt nach einer Kopie der Webseite für den Client (Sie gehen zu dem Laden und bestellen Ihre Waren). Diese Nachricht und alle anderen Daten, welche zwischen Client und Server gesendet werden, nutzen Ihre Internetverbindung und nutzen TCP/IP für die Übertragung.
    3. -
  3. Wenn der Server die Anfrage entgegennimmt, sendet dieser an den Client eine "200 OK" Nachricht, welche soviel bedeutet wie "Natürlich können Sie sich die Webseite anschauen! Hier ist sie." Danach sendet der Server die Dateien der Webseite, in kleinen Datenpaketen, an den Browser. (Im Laden bekommen Sie Ihre Waren und bringen diese nach Hause)
    4. -
  4. Im Browser werden die kleinen Datenpakete zusammengesetzt und zeigt Ihnen die komplette Webseite. (die Waren kommen bei Ihnen daheim an)
    5. -
- -

DNS erklärt

- -

Echte Webadressen sind keine schönen, leicht zu merkenden Strings, welche Sie in die Adressleiste Ihres Browsers eingeben, um Ihre Lieblingswebseiten zu finden. Es sind spezielle Nummern, welche so aussehen: 63.245.215.20.

- -

Dies ist eine {{Glossary("IP Address", "IP address")}} und repräsentiert eine einzigartige Adresse im Internet. Diese kann man sich aber nicht so leicht merken. Deswegen wurden Domain Name Server erfunden. Dies sind spezielle Server, welche zu der Adresse die Sie im Browser eintippen(z.B. "mozilla.org"), die richtige (IP) Adresse finden.

- -

Webseiten können direkt über ihre IP Adresse erreicht werden. Versuchen Sie es: Gehen Sie zur Mozilla Webseite, indem sie die folgende IP Adresse in der Adresszeile Ihres Browsers in einem neuen Tab eingeben: 63.245.215.20

- -

A domain name is just another form of an IP address

- -

Datenpakete erklärt

- -

Vorhin haben wir das Wort "Datenpakete" genutzt, um zu beschreiben in welcher Form die Daten vom Server zum Client gelangen. Was ist damit gemeint? Wenn Daten über das Internet gesendet werden, dann wird es in tausenden von kleinen Stückchen geschickt, damit verschiedene Benutzer einer Webseite, diese zur selbern Zeit herunterladen können. Wenn Webseiten in einem großen Paket gesendet werden würde, dann könnte nur ein Benutzer auf einmal diese herunterladen, was das Internet nicht sehr effizient machen würde.

- -

Lesen Sie weiter (englisch)

- - - -

Credit

- -

Street photo: Street composing, by Kevin D.

- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/html_basics/index.html b/files/de/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index 9b7dbe0ac2a3d5..00000000000000 --- a/files/de/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: HTML-Grundlagen -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - Anfänger - - Grundlagen - - HTML - - Internet - - Lernen - - Webentwicklung - - Webseiten -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
- -
-

HTML (Hypertext Markup Language) ist der Code, welcher benötigt wird, um den Webinhalt zu strukturieren und ihm eine Bedeutung und einen Zweck zu geben. Zum Beispiel könnte Ihr Inhalt Absätze und Grafiken, aber auch Bilder und Tabellen enthalten. Wie der Titel dieses Artikels verspricht, soll Ihnen hier ein grundsätzliches Verständnis vermittelt werden, wie HTML eingesetzt wird.

-
- -

Was ist HTML?

- -

HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:

- -
Meine Katze ist sehr frech.
- -

Wenn wir möchten, dass der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, dass es sich um einen Absatz handelt:

- -
<p>Meine Katze ist sehr frech.</p>
- -

Aufbau eines HTML-Elements

- -

Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.

- -

- -

(Content=Inhalt, Element=HTML-Element)

- -

Die Hauptteile unseres Elements sind:

- -
    -
  1. Das öffnende Tag: Diese besteht aus dem Namen des Elements (in diesem Fall ein p für paragraph (engl.: Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
    2. -
  2. Der Inhalt: Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.
    3. -
  3. Das schließende Tag: Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
    4. -
  4. Das Element: Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.
    5. -
- -

Elemente können auch Attribute enthalten, das sieht dann so aus:

- -

- -

Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt angezeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, um dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.

- -

In unserem Beispiel ist der Name des Attributes class und editor-note ist der diesem Attribut zugeordnete Wert.

- -

Ein Attribut sollte immer haben:

- -
    -
  1. Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
    2. -
  2. Den Attributnamen, gefolgt von Gleichheitszeichen
    3. -
  3. Anführungs- und Schlusszeichen um den Wert. (bsp. "editor-note")
    4. -
- -

Verschachtelte Elemente

- -

Sie können einzelne Elemente ineinander verschachteln. Wenn wir also besonders betonen wollen, dass unsere Katze sehr frech ist, können wir dieses einzelne Wort in einem {{htmlelement("strong")}} Element verpacken.

- -
<p>Meine Katze ist <strong>sehr</strong> frech.</p>
- -

Folgendes Beispiel ist nicht richtig, da die Elemente nicht ineinander verschachtelt sind, sondern ineinander verkettet. Das letzte Element, welches geöffnet wird, muss auch zuerst geschlossen werden.

- -
<p>Meine Katze ist <strong>sehr frech.</p></strong>
- -

Dies funktioniert wie mit Schachteln: Wenn die kleine Schachtel in der Großen ist, kann man auch nicht zuerst den großen Deckel schließen, bevor man den kleinen Deckel draufsetzt. Die einzelnen Elemente dürfen sich also nicht überlappen, sie dürfen nur ineinander stehen.

- -

Leere Elemente

- -

Gewisse Elemente haben keinen Inhalt, diese werden leere Elemente genannt. Beispielsweise das {{htmlelement("img")}} Element, welches wir schon in unserer HTML-Datei haben:

- -
<img src="images/firefox-icon.png" alt="Mein Testbild">
- -

Dies beinhaltet zwei Attribute, aber es gibt kein schließendes </img> Tag und keinen Inhalt in dem Element. Das <img> Tag braucht keinen Inhalt um einen Effekt zu haben. Es bindet ein Bild an der entsprechenden Stelle in der HTML Seite ein.

- -

Aufbau eines HTML-Dokumentes

- -

Jetzt wissen Sie, wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um eine HTML Seite aufzubauen. Schauen wir den Code wieder an, welchen wir vorher in die index.html-Datei eingefügt haben (welche wir im Artikel "Dateien nutzen" erstellt haben):

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Meine Testseite</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="Mein Testbild">
-  </body>
-</html>
- -

Hier haben wir:

- -
    -
  • <!DOCTYPE html> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.
    • -
  • <html></html> — das <html> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet
    • -
  • <head></head> — das <head> Element. In dieses Element ist alles eingeschlossen, was nicht auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.
    • -
  • <body></body> — das <body> Element. Dies beinhaltet alles, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.
    • -
  • <meta charset="utf-8"> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf utf-8, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.
    • -
  • <title></title> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.
    • -
- -

Bilder

- -

Schauen wir jetzt unser Bild-Element nochmals an:

- -
<img src="images/firefox-icon.png" alt="Mein Testbild">
- -

Wie wir vorher gesagt haben, ist ein Bild an der Stelle unserer Seite eingebettet, wo es erscheint. Es tut dies mit dem {{htmlattrdef("src")}} (src ist Abkürzung für engl.: "source" = deutsch: "Quelle") Attribut, welches den Pfad unseres Bildes beinhaltet.

- -

Aber wir haben auch einen {{htmlattrdef("alt")}} (alternative) Befehl, welcher einen Text anzeigt, falls das Bild nicht angezeitg werden kann. Dies ist nützlich für:

- -
    -
  1. Sehbehinderte. Diese haben häufig Programme, welche ihnen den alternativen Text vorlesen.
    2. -
  2. Wenn es einen Fehler im Code gibt, was bedeutet, dass das Bild nicht angezeigt werden kann. Verändern Sie beispielsweise den Code bei {{htmlattrdef("src")}} und speichern ihn ab. Öffnen Sie das Dokument dann mit dem Browser. Jetzt sollte statt dem Bild folgende Meldung angezeigt werden:
    3. -
- -

- -

Dieser alternative Satz sollte dem Leser eine Informationen geben, damit er sich vorstellen kann, was auf dem Bild angezeigt ist. Dieser Beispielsatz ist also nicht so gut. Viel besser wäre die Beschreibung "Das Firefox-Logo: Ein brennender Fuchs, welcher die Erde umkreist."

- -

Schreiben Sie jetzt einen besseren Alternativtext für Ihr Bild.

- -
-

Hinweis: Finden Sie mehr über Zugänglichkeit unter MDN's Accessibility landing page heraus.

-
- -

Textdarstellung

- -

Diese Lektion enthält ein paar HTML Grundlagen, welche man benötigt, um Text darzustellen.

- -

Überschriften

- -

Mit Überschriftelementen können Sie bestimmte Teile des Inhaltes als Überschrift deklarieren. Wie ein Buch einen Hauptitel und Kapitelüberschriften haben kann, können HTML-Dokumente eine Hauptüberschrift" und weitere Überschriften haben.

- -

HTML besitzt 6 Überschrifttypen, wobei meist nur 3-4 gebraucht werden: {{htmlelement("h1")}}–{{htmlelement("h6")}}

- -
<h1>Meine Hauptüberschrift</h1>
-<h2>Meine Top-Level Unterüberschrift</h2>
-<h3>Meine Unterüberschrift</h3>
-<h4>Meine weitere Unterüberschrift</h4>
- -

Probieren Sie nun einen geeigneten Titel in Ihre HTML-Seite einzufügen, direkt über dem {{htmlelement("img")}} Element.

- -

Absätze

- -

Wie oben erklärt benutzt man {{htmlelement("p")}}, Elemente um Absätze zu erstellen. Sie werden diese oft benutzen, um Texte zu strukturieren.

- -
<p>Dies ist ein Absatz (p ist Abkürzung für engl.:"Paragraph")</p>
- -

Ergänzen Sie Ihren Beispieltext (Sie sollten sich den Textinhalt beim Planen der Webseite überlegt haben: Wie sollte Ihre Website aussehen?) in einem oder mehreren Absätzen direkt unter Ihrem {{HTMLElement("img")}} (Bildelement).

- -

Listen

- -

Viele Webseiten enthalten Listen , deshalb hält HTML dafür Elemente bereit. Die Kennzeichnung von Listen besteht immer aus zwei Elementen. Man unterscheidet geordnete und ungeordnete Listen.

- -
    -
  1. Ungeordnete Listen sind Listen, bei denen die Reihenfolge der Gegenstände keine Rolle spielt, wie eine Einkaufsliste. Diese werden eingehüllt von einem {{htmlelement("ul")}} Element.
    2. -
  2. Geordnete Listen werden verwendet, wenn die Reihenfolge der Bestandteile wichtig ist, wie bei einem Rezept. Diese werden eingehüllt von einem {{htmlelement("ol")}} Element.
    3. -
- -

Jeder Gegenstand der Liste wird einzeln in ein {{htmlelement("li")}} Listen-Element gepackt.

- -

Wenn wir zum Beispiel die einzelnen Teile dieses Absatzes in eine geeignete Liste verwandeln wollen:

- -
<p>Hier bei Mozilla sind wir eine globale Gemeinschaft aus Entwicklern, Vorausdenkern, Erschaffern, welche zusammen daran arbeiten...</p>
- -

Könnten wir das so machen:

- -
<p>Hier bei Mozilla sind wir eine globale Gemeinschaft aus</p>
-
-
-<ul>
-  <li>Entwicklern</li>
-  <li>Vorausdenkern</li>
-  <li>Erschaffern</li>
-</ul>
-
-<p>welche zusammen daran arbeiten ... </p>
- -

Probieren Sie eine geordnete oder ungeordnete Liste in Ihre Beispielseite einzufügen.

- - - -

Links sind sehr wichtig — sie sind, was das Internet EIN NETZ macht. Um einen Link zu implementieren, müssen wir ein einfaches Element — {{htmlelement("a")}} — verwenden. Das a ist die Kurzform für "Anker" (engl. "anchor"). Um einen Text innerhalb des Absatzes in einen Link zu verwandeln, führen Sie folgenden Schritte durch:

- -
    -
  1. Suchen Sie einen Text aus. Wir benutzen in unserem Beispiel "Mozilla Manifesto".
    2. -
  2. Betten Sie den Text in ein <a>-Element ein: - 
    <a>Mozilla Manifesto</a>
    -
    3. -
  3. Geben Sie dem <a>-Element ein href-Attribut: - 
    <a href="">Mozilla Manifesto</a>
    -
    4. -
  4. Füllen Sie für den Wert des Attributs die Internetadresse ein, auf die Sie verlinken wollen: - 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    -
    5. -
- -

Es kann sein, dass Sie komische Ergebnisse bekommen, wenn Sie https:// oder http:// , genannt Protokoll, vergessen. Überprüfen Sie deshalb immer nachdem Sie den Link gesetzt haben, ob er wie gewünscht funktioniert.

- -
-

{{htmlattrdef("href")}} mag sich etwas komisch für einen Attributnamen anhören. Wenn Sie Probleme haben sich an den Namen zu erinnern, merken Sie sich, dass es die Kurzform von Hypertext Referenz (engl. hypertext reference) ist.

-
- -

Fügen Sie jetzt einen Link Ihrer Seite hinzu, falls Sie es noch nicht getan haben.

- -

Ergebnis

- -

Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, sollten Sie als Ergebnis eine Seite erhalten, die ähnlich wie diese aussieht (Sie können unsere Version davon auch hier anschauen):
-
- Ein Screenshot einer Webseite, welche das Firefox-Logo enthält, Absätze und eine Liste

- -

Wenn Sie nicht dasselbe Ergebnis haben und nicht wissen, wo das Problem liegt, können Sie Ihren Code mit dem fertigen Code auf Github vergleichen.

- -

Hier haben wir nur an der Oberfläche von HTML gekratzt. Um mehr über HTML zu lernen, gehen Sie zu der HTML-Lernseite.

- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/index.html b/files/de/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 08249c4e160328..00000000000000 --- a/files/de/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Lerne das Internet kennen -slug: Learn/Getting_started_with_the_web -tags: - - Anfänger - - CSS - - Gestaltung - - HTML - - Index - - Leitfaden - - Theorie - - Veröffentlichung -translation_of: Learn/Getting_started_with_the_web ---- -

{{LearnSidebar}}

- -

{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web")}}

- -

Lerne das Internet kennen ist eine kurze Serie von Artikeln, die in angewandte Webentwicklung einführt. Sie werden die Werkzeuge erlernen, die Sie brauchen, um eine einfache Webseite zu erstellen und eigenen Code zu veröffentlichen.

- -

Die Geschichte Ihrer ersten Webseite

- -

Es ist viel Arbeit, eine professionelle Webseite zu gestalten. Wenn Sie mit der Webentwicklung erst anfangen, ermutigen wie Sie klein zu beginnen. Sie werden nicht sofort das nächste Facebook erstellen, aber es ist nicht schwer eine eigene, einfache Webseite online zu stellen, also beginnen wir damit.

- -

Wenn Sie sich durch diese Artikelserie der Reihe nach durcharbeiten, können Sie ohne Vorwissen Ihre erste eigene Webseite online erstellen. Lassen Sie uns anfangen!

- -

Nötige Software installieren

- -

Es gibt eine große Auswahl an Werkzeugen für das Erstellen von Webseiten. Wenn Sie gerade erst beginnen, könnten Sie von der Menge an Code-Editoren, Frameworks und Testwerkzeugen erschlagen sein. In unserem Artikel Nötige Software installieren zeigen wir Ihnen Schritt für Schritt, wie Sie diese Software installieren.

- -

Wie wird Ihre erste Webseite aussehen?

- -

Bevor Sie mit dem Schreiben von Code für die Webseite beginnen, planen Sie Ihre Webseite. Welche Informationen möchten Sie zeigen? Welche Schriftarten und Farben möchten Sie nutzen? Wie wird Ihre erste Webseite aussehen? Wir zeigen Ihnen eine einfache Methode, um Inhalt und Design Ihrer Seite zu planen.

- -

Dateien nutzen

- -

Eine Website besteht aus vielen Dateien: Textinhalt, Code, Stylesheets, Medien und so weiter. Wenn Sie eine Webseite erstellen, müssen Sie die Dateien in eine sinnvolle Struktur bringen und sicherstellen, dass diese voneinander "wissen". Dateien nutzen erklärt, wie Sie von Anfang an eine sinnvolle Dateistruktur erstellen.

- -

HTML-Grundlagen

- -

Hypertext Markup Language (HTML) ist der Code, den Sie nutzen werden, um eine Webseite zu strukturieren und ihr Bedeutung und einen Zweck zu geben. Zum Beispiel: Ist mein Text ein Listenpunkt oder ein Absatz? Füge ich Bilder auf meine Webseite ein? Stelle ich Daten in Form einer Tabelle übersichtlich dar? Die HTML-Grundlagen geben Ihnen genug Informationen, um sich mit HTML vertraut zu machen.

- -

CSS-Grundlagen

- -

Cascading Stylesheets (CSS) ist der Code, mit welchem Sie Stil und Aussehen Ihrer Seite bestimmen: Soll der Text lieber rot oder schwarz sein? Wo soll dieser Abschnitt auf dem Bildschirm erscheinen? Welche Bilder und Farben sollen im Hintergrund benutzt werden? CSS-Grundlagen zeigt Ihnen, wie Sie eine Webseite visuell gestalten können.

- -

JavaScript-Grundlagen

- -

JavaScript ist die Programmiersprache, mit welcher Sie Webinhalte interaktiv machen können. Sie bestimmen damit zum Beispiel Aktionen für einen Button, berechnen Werte oder verarbeiten Eingaben aus Formularen, dynamisieren die Gestaltung, lenken Animationen und vieles mehr. JavaScript-Grundlagen vermittelt Ihnen erste Ideen, was mit dieser fantastischen Programmiersprache möglich ist und wie Sie anfangen können, damit zu programmieren.

- -

Ihre Webseite veröffentlichen

- -

Wenn Sie Ihren Code geschrieben haben und die Dateien Ihrer neuen Webseite organisiert haben, dann können Sie Ihre Webseite online stellen, sodass andere Menschen sie finden können. Ihre Webseite veröffentlichen zeigt, wie Sie diese im Internet zugänglich machen.

- -

Wie das Web funktioniert

- -

Wenn Sie auf Ihre Lieblingswebseite zugreifen, passieren eine Menge komplexer Dinge, ohne dass Sie etwas davon mitbekommen. Wie das Web funktioniert gibt eine Übersicht über die Vorgänge, die im Hintergrund einer Webseite ablaufen.

- -

Siehe auch

- -
    -
  • Web Demystified (das Web entzaubert): Eine großartige Reihe von Videos, die die Web-Grundlagen erklären und sich an absolute Anfänger in der Webentwicklung richten. Erstellt von Jérémie Patonnier.
    • -
  • Das Web und Web Standards: Dieser Artikel liefert einige nützliche Hintergründe über das Web - wie es entstanden ist, was die wichtigsten Technologien im Web sind, wie sie zusammenarbeiten, warum "Web Designer" ein großartiger Beruf ist und welche Arten der "besten Praxis" Sie in diesem Kurs lernen.
    • -
- -

{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}

diff --git a/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index 8c01b6d7c85ef0..00000000000000 --- a/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Notwendige Software installieren -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Anfänger - - Beginner - - Browser - - Einrichtung - - Erste Schritte - - Grundlagen - - Lernen - - Setup - - Webentwicklung - - editor -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

In Notwendige Software installieren, zeigen wir Ihnen, welche Werkzeuge Sie für einfache Aufgaben in der Webentwicklung brauchen und wie Sie diese korrekt installieren.

-
- -

Welche Werkzeuge nutzen professionelle Entwickler?

- -
    -
  • Einen eigenen Computer. Vielleicht scheint das offensichtlich, aber manch einer liest diesen Artikel möglicherweise auf dem Smartphone oder auf einem Computer in der Bibliothek. Für ernsthafte Webentwicklung ist es sinnvoll, in einen eigenen Computer zu investieren.
    • -
  • Ein Texteditor, um Code zu schreiben. Das kann ein freier Editor sein (z.B. Notepad++, gedit, Brackets, Atom oder Visual Studio Code), ein kommerzieller Editor (Sublime Text oder Coda) oder ein grafischer/hybrider Editor (Dreamweaver oder WebStorm).
    • -
  • Web Browser, um den Code auszuprobieren. Die meistgenutzten Browser sind momentan Firefox, Chrome, Opera, Safari, Internet Explorer und Microsoft Edge. Sie sollten auch testen, wie Ihre Seite auf mobilen Geräten aussieht und ob sie auf älteren Browsern funktioniert, die Ihre Zielgruppe vielleicht noch ausgiebig nutzt (wie z.B. IE 7-10)
    • -
  • Ein Bildbearbeitungsprogramm wie The Gimp, Pinta, Paint.NET oder Photoshop, um Bilder und Grafiken für Ihre Webiste zu erstellen.
    • -
  • Ein Versionierungssystem, um im Team an einem Projekt zu arbeiten, Code und Inhalte zu teilen und um Editierkonflikte zu vermeiden. Momentan ist Git das populärste Versionierungssystem und der GitHub Code Hosting Service, welcher auf Git basiert, ist ebenso populär.
    • -
  • Ein FTP-Programm, um Websites auf einen Server zu laden, sodass andere darauf zugreifen können. Es gibt etliche solcher Programme wie Cyberduck, FireFTP und FileZilla.
    • -
  • Ein Automatisierungssystem, wie Grunt oder Gulp, um wiederkehrende Aufgaben zu automatisieren, wie z.B. die Komprimierung von Code oder das Testen.
    • -
  • Vorlagen, Bibliotheken und Frameworks, um oft benötigte Funktionen bereitzustellen
    • -
  • Darüber hinaus weitere Anwendungen!
    • -
- -

Welche Werkzeuge brauche ich jetzt wirklich?

- -

Die Liste an möglichen Werkzeugen wirkt einschüchternd, aber glücklicherweise können Sie mit der Webentwicklung anfangen, ohne die meisten dieser Werkzeuge kennen zu müssen. In diesem Artikel werden wir nur eine grundlegendste Ausstattung installieren: Einen Texteditor und einige moderne Webbrowser.

- -

Einen Texteditor installieren

- -

Sie haben vermutlich schon einen Texteditor auf Ihrem Computer. Windows hat Notepad, Mac OS X kommt mit TextEdit. Linux-Distributionen haben verschiedene Editoren; Ubuntu hat z.B. gedit vorinstalliert.

- -

Für die Webentwicklung gibt es bessere Editoren als Notepad oder TextEdit. Auf Windows ist Notepad++ sehr beliebt. Unter allen größeren Betriebssystemen laufen Brackets und Atom. Diese Editoren sind frei verfügbar und helfen Ihnen beim Schreiben von Code besser als die Standard-Texteditoren.

- -

Installieren von modernen Browsern

- -

Zum Testen von Codes sollten Sie einen oder besser mehrere moderne Browser installieren.

- - - -

Bevor Sie weitermachen, sollten Sie mindestens zwei dieser Browser installiert haben, damit Sie Ihren Code testen können.

- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index b6549d8c106c41..00000000000000 --- a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: JavaScript-Grundlagen -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - Anfänger - - JavaScript - - Lernen - - Web - - Webdesign -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -original_slug: Learn/Getting_started_with_the_web/JavaScript_basis ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

JavaScript ist eine Programmiersprache, mit der man interaktive Inhalte zu einer Webseite hinzufügen kann (zum Beispiel: Spiele, Reaktionen durch das Drücken von Buttons oder Eingaben in Formulare, dynamisches Aussehen, Animationen, usw.). Dieser Artikel hilft Ihnen, erste Schritte mit dieser spannenden Sprache zu machen und eine Vorstellung zu verschaffen, was möglich ist.

-
- -

Was ist JavaScript wirklich?

- -

{{Glossary("JavaScript")}} (Kurz "JS") ist eine vollwertige und dynamische Programmiersprache, welche, wenn man sie zu einem {{Glossary("HTML")}} Dokument hinzufügt, für Dynamik und Interaktion mit dem Nutzer sorgt. JS wurde von Brendan Eich erfunden, Mitbegründer des Mozilla Projektes, der Mozilla Foundation, und der Mozilla Corporation.

- -

JavaScript ist unglaublich vielseitig. Man beginnt ganz einfach mit simplen Features, wie z.B. Karussels, (Bilder-)Galerien, variablen Layouts und Reaktionen auf Button-Klicks. Wenn Sie dann später erfahrener im Umgang mit der Sprache sind, können Sie damit ganze Spiele, animierte 2D- und 3D-Grafiken, auf Datenbanken basierende Apps und vieles mehr erstellen!

- -

JavaScript an sich ist sehr kompakt und trotzdem flexibel. Viele Entwickler haben noch weitere Tools/Erweiterungen für die Arbeit mit JavaScript geschrieben, um noch mehr Effizienz mit wenig Aufwand aus JS herauszuholen. Diese Funktionen sind:

- -
    -
  • Programmierschnittstellen ({{Glossary("API","APIs")}}), die in Browsern implementiert wurden, um diese um JS-Funktionen zu erweitern, z.B. das dynamische Erstellen von HTML oder das Einstellen eines CSS-Styles, Abfangen und Manipulieren von Videostreams, Erzeugen von 3D-Grafiken/Audio-Samples und vieles mehr...
    • -
  • Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Seiten in eigene Seiten einzubinden, z.B. von Twitter oder Facebook.
    • -
  • Drittanbieter-Frameworks und Bibliotheken, die man zu HTML hinzufügen kann, die es ermöglichen, Webseiten und Apps schnell zu erzeugen.
    • -
- -

Da dieser Artikel dazu gedacht ist, Ihnen eine leichte Einführung in die Grundlagen von JavaScript zu geben, werden wir uns hier nicht über die Unterschiede zwischen der Basis der JavaScript-Sprache und den obengenannten Erweiterungen unterhalten. Sie können später im Detail lernen, was es damit auf sich hat in unserem JavaScript Lernbereich.

- -

Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!

- -

Ein "Hallo Welt!" Beispiel

- -

Der vorhergehende Absatz klingt sehr aufregend und das zurecht. JavaScript ist eine der spannendsten Internet-Technologien und wenn Sie damit beginnen, wird Ihre Webseite sehr viel mächtiger.

- -

Jedoch ist JavaScript etwas komplexer als HTML und CSS. Daher werden Sie klein anfangen, und in kurzen, regelmäßigen Schritten vorangehen müssen. Zum Start zeigen wir Ihnen, wie man JavaScript-Code zu einer Seite hinzu fügt, um ein "Hallo Welt!" Beispiel zu erstellen (der Standard in elementaren Programmierbeispielen).

- -
-

WICHTIG: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, laden Sie dieses Codebeispiel herunter und benutzen es als Einstieg.

-
- -
    -
  1. Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen main.js. Speichern Sie diese Datei in Ihrem skripts-Ordner.
    2. -
  2. Dann gehen Sie zur index.html Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden </body>-Tag ein: - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Dies macht dasselbe, wie das {{htmlelement("link")}} Element für CSS — Es bindet die JavaScript-Datei auf der Seite ein, damit es einen Einfluss auf den HTML Code haben kann (und auch auf den CSS-Code und alles andere auf der Seite).
    4. -
  4. Fügen Sie nun den folgenden Code in die main.js-Datei ein: - 
    var myHeading = document.querySelector('h1');
-myHeading.textContent = 'Hallo Welt!';
    -
    5. -
  5. Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden index.html in einen Browser. Die Webseite sollte wie folgt aussehen:
    6. -
- -
-

Hinweis: Das {{htmlelement("script")}}-Element haben wir am Ende des <body>-Elements geschrieben, da das HTML vom Browser in der Reihenfolge geladen wird, wie es in der Datei geschrieben wurde. Wenn der JavaScript-Code geladen wird, bevor die HTML-Seite aufgebaut wurde, hat es möglicherweise keinen Einfluss auf die HTML-Elemente, die später geladen werden. Also ist es meistens am besten, JavaScript-Code eher am Ende der HTML Seite einzubinden.

-
- -

Was ist passiert?

- -

Ihre Überschrift wurde durch die Benutzung von JavaScript zu "Hello world!" geändert. Wir haben dies dadurch ermöglicht, indem wir zuerst eine Funktion mit dem Namen {{domxref("Document.querySelector", "querySelector()")}} benutzt haben, um eine Referenz zu unserer Überschrift zu bekommen und sie in einer Variable mit dem Namen myHeading gespeichert. Es ist ähnlich zu dem, was wir in CSS mit den Selektoren gemacht haben. Wenn Sie irgendetwas mit einem Element machen möchten, müssen Sie es zuerst auswählen.

- -

Anschließend setzen wir den Wert der Eigenschaft {{domxref("Node.textContent", "textContent")}} der Variablen myHeading (die den Inhalt des Headings repräsentiert) auf "Hallo Welt!".

- -
-

Hinweis: Beide Funktionen die Sie genutzt haben sind Teile des Document Object Model (DOM) API

-
- -

Programmier-Crash-Kurs

- -

Es folgt eine Beschreibung einiger Basis-Eigenschaften der Sprache JavaScript, um Ihnen etwas mehr Verständnis der Zusammenhänge zu vermitteln. Diese Eigenschaften sind anderen Programmiersprachen gemeinsam. Wenn Sie diese Grundlagen verstehen, sollte es Ihnen möglich sein, mit dem Programmieren zu beginnen.

- -
-

Wichtig: Versuchen Sie, die Zeilen des Beispielcodes dieses Artikels, in die JavaScript-Konsole einzufügen, um zu sehen, was geschieht. Weitere Details zur JavaScript-Konsole entnehmen Sie aus Entdecke Browser Entwickler-Werkzeuge.

-
- -

Variablen

- -

{{Glossary("Variable", "Variables")}} sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort var deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:

- -
var myVariable;
- -
-

Anmerkung: Jede Befehlszeile in JavaScript muss mit einem Semikolon abgeschlossen werden, um das Ende der Befehlszeile zu markieren. Tun Sie dies nicht, erwarten Sie unerwartete Ergebnisse.

-
- -
-

Anmerkung: Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe diesen Artikel über die Regeln von Benennung von Variablen.) Wenn Sie unsicher sind, können Sie den Variablennamen prüfen, um die Gültigkeit zu prüfen.

-
- -
-

Anmerkung: JavaScript beachtet Groß-/Kleinschrift — myVariable ist unterschiedlich zur Variablen myvariable. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung!

-
- -

Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:

- -
myVariable = 'Bob';
- -

Beide Schritte (Variable deklarieren und ihr einen Wert zuweisen) können in einem Schritt zusammengefasst werden:

- -
var myVariable = 'Bob';
- -

Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird:

- -
myVariable;
- -

Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:

- -
var myVariable = 'Bob';
-myVariable = 'Steve';
- -

Beachten Sie, dass Variablen unterschiedliche Datentypen aufweisen:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableErklärungBeispiel
{{Glossary("String")}}Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen.var myVariable = 'Bob';
{{Glossary("Number")}}Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet.var myVariable = 10;
{{Glossary("Boolean")}}Ein wahr/falsch (true/false) Wert. Die Worte true und false sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichenvar myVariable = true;
{{Glossary("Array")}} -

Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.

- 		var myVariable = [1,'Bob','Steve',10];
- Bezieht sich auf jedes Mitglied des arrays wie dieses:
- myVariable[0], myVariable[1], etc.
{{Glossary("Object")}} -

Grundsätzlich alles. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Gedächtnis, während Sie lernen.

- 		var myVariable = document.querySelector('h1');
- Und ebenso alle der obigen Beispiele.
- -

Warum werden Variablen benötigt? Nun, Variablen werden benötigt, um alles Interessante beim Programmieren abzudecken. Wenn sich Werte nicht ändern könnten, dann könnte nichts Dynamisches geschaffen werden, wie zum Beispiel eine Willkommensmeldung zu personalisieren oder ein Bild, das in einer Bildgallerie angezeigt wird.

- -

Kommentare

- -

Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:

- -
/*
-Alles hier drin ist ein Kommentar.
-*/
- -

Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:

- -
// Dies ist ein Kommentar
-
- -

Operatoren

- -

Ein {{Glossary("operator")}} ist ein mathematisches Symbol, das ein Ergebnis erzeugt, das auf zwei Werten (oder Variablen) basiert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren, gefolgt von einigen Beispielen, die Sie in der JavaScript Konsole ausprobieren können.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorErklärungSymbol(e)Beispiel
addieren/verbindenWird verwendet, um zwei Zahlen zu addieren, oder zwei Strings zusammenzusetzen.+6 + 9;
- "Hello " + "world!";
subtrahieren, multiplizieren, teilen Verhalten sich so, wie aus der Mathematik bekannt.-, *, /9 - 3;
- 8 * 2; // in JS ist der Multiplikationsoperator ein Stern
- 9 / 3;
ZuweisungsoperatorSie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet=var myVariable = 'Bob';
Gleichheitsoperator -

Prüft zwei Werte auf Gleichheit und liefert true/false (Boolean) als Ergebnis

- 		===var myVariable = 3;
- myVariable === 4;
Verneinung, ungleich -

Liefert als Ergebnis das logische Gegenteil; dreht ein true in ein false, etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.

- 		!, !== -

Der Basis-Ausdruck ist true, aber der Vergleich liefert false weil er negiert wurde:

- -

var myVariable = 3;
- !(myVariable === 3);

- -

Hier wird geprüft, ob myVariable ungleich 3 ist. Der Rückgabewert ist false, weil myVariable den Wert 3 aufweist.

- -

var myVariable = 3;
- myVariable !== 3;

-
- -

Es gibt noch viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in Ausdrücke und Operatoren.

- -
-

Anmerkung: Das Vermischen von Datentypen kann bei Berechnungen unerwartete Ergebnisse liefern. Achten Sie darauf, die Variablen korrekt zu verwenden und prüfen Sie, ob das erwartete Ergebnis zurückgegeben wird. Tippen Sie beispielsweise "35" + "25" in die Konsole ein und schauen sich das Ergebnis an. Haben Sie dies erwartet? Aufgrund der Anführungszeichen werden die Werte als Strings behandelt und somit verbunden, statt addiert. Wenn Sie 35 + 25 eintippen, erhalten Sie das erwartete Ergebnis.

-
- -

Bedingungen

- -

Bedingungen sind Code-Strukturen, die Ihnen erlauben, zu prüfen, ob ein Ausdruck wahr oder falsch ist und in Abhängigkeit des Ergebnisses unterschiedlichen Code auszuführen. Die gebräuchlichste Art von Bedingungen sind if ... else. Zum Beispiel:

- -
var eis = 'Schokolade';
-if (eis === 'Schokolade') {
-  alert('Yuhu, ich liebe Schokoladeneis!');
-} else {
-  alert('Awwww, ich mag lieber ein Schokoladeneis...');
-}
- -

Der Ausdruck innerhalb des if ( ... ) ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable eis mit dem String Schokolade zu vergleichen, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich true, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem else Befehl ausgeführt.

- -

Funktionen

- -

{{Glossary("Function", "Functions")}} ist ein Weg, um Funktionalitäten zusammenzupacken, die wiederverwendet werden sollen. Immer wenn die Funktionalität benötigt wird, wird die Funktion unter ihrem Namen aufgerufen, statt denselben Code immer wieder erneut schreiben zu müssen. Sie haben bereits einige Verwendungen von Funktionen gesehen, zum Beispiel:

- -
    -
  1. - 
    var myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('Hallo!');
    -
    3. -
- -

Die Funktionen document.querySelector and alert sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.

- -

Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — () — abgeschlossen ist, ist es möglicherweise eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "arguments")}} auf, um die Funktionalität zu gewährleisten. Diese Argumente werden innerhalb der runden Klammern platziert und von Komma getrennt, wenn mehr als ein Argument übergeben wird.

- -

Beispielsweise erzeugt die Funktion alert() eine Pop-Up-Box innerhalb des Browser-Fensters. Dieser Funktion muss ein String als Argument übergeben werden, um der Funktion mitzuteilen, was in diese Pop-Up-Box geschrieben werden soll.

- -

Die guten Nachrichten sind, dass Sie Ihre eigenen Funktionen definieren können. Im nächsten Beispiel schreiben wir eine einfache Funktion, die zwei Zahlen als Argumente aufnimmt und diese multipliziert:

- -
function multiply(num1,num2) {
-  var result = num1 * num2;
-  return result;
-}
- -

Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:

- -
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);
- -
-

Anmerkung: Das return Kommando teilt dem Browser mit, die Variable result aus der Funktion zurückzuliefern. Somit ist es möglich, diese zu benutzen. Dies ist notwendig, weil Variablen, die innerhalb der Funktion verwendet werden, nur dort gültig sind. Diese Verhaltensweise wird {{Glossary("Scope", "scoping")}} genannt. (Lesen Sie mehr über den Gültigkeitsbereich von Variablen.)

-
- -

Ereignisse (Events)

- -

Um wirkliche Interaktivität auf einer Website herzustellen, werden Ereignisse (events) benötigt - dieses sind Code-Strukturen, die auf Ereignisse achten, die im Browser geschehen und Ihnen dann erlauben, Code auszuführen, um auf diese Ereignisse zu reagieren. Das offensichtlichste Beispiel ist das Klick-Ereignis, das vom Browser abgefeuert wird, wenn man mit dem Mauszeiger auf etwas klickt. Um dies zu zeigen, geben Sie den folgenden Code in die Konsole ein und klicken auf die aktuelle Webseite:

- -
document.querySelector('html').onclick = function() {
-    alert('Hey! Nicht so viel klicken!');
-}
- -

Es existieren viele Möglichkeiten, ein Ereignis mit einem Element zu verbinden. Hier wählen wir das Element HTML aus und setzen die Eigenschaft des onclick-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.

- -

Beachten Sie, dass

- -
document.querySelector('html').onclick = function() {};
- -

gleichbedeutend ist mit

- -
var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};
- -

Es ist nur kürzer.

- -

Dynamische Inhalte für unsere Beispielwebseite

- -

Nun, da wir einige Grundlagen von JavaScript kennengelernt haben, lassen Sie uns einige dynamische Inhalte in Ihre erste Webseite einfügen, damit Sie sehen was mit JavaScript möglich ist.

- -

Bilder wechseln

- -

Wir werden der Webseite ein weiteres Bild hinzufügen. Mit etwas JavaScript-Code werden wir zwischen den beiden Bildern wechseln, wenn auf diese mit der Maus geklickt wird.

- -
    -
  1. Suchen Sie sich zuerst ein zweites Bild für Ihre Webseite aus. Es sollte möglichst die selbe Größe haben, wie das Bild, das Sie schon auf der Webseite haben.
    2. -
  2. Speichern Sie dieses Bild in Ihrem bilder-Ordner.
    3. -
  3. Ändern Sie den Namen des Bildes in etwas, das Sie sich leicht merken können, wir haben es 'firefox2.png' genannt.
    4. -
  4. Gehen Sie in Ihre main.js Datei und geben den folgenden JavaScript-Code ein: (Löschen Sie das "hello world"-Beispiel von oben) - 
    var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'bilder/firefox-icon.png') {
-      myImage.setAttribute ('src','bilder/firefox2.png');
-    } else {
-      myImage.setAttribute ('src','bilder/firefox-icon.png');
-    }
-}
    -
    5. -
  5. Speichern Sie alle Dateien und laden Sie index.html in Ihrem Browser. Wenn Sie jetzt auf das Bild klicken, sollte es sich ändern!
    6. -
- -

Wir erstellen die Variable myImage und speichern in dieser eine Referenz zu unserem Bild-Element(img). Als nächstes setzen wir das onclick-Event dieser Variablen gleich mit einer Funktion ohne Namen (eineranonymen Funktion). In dieser Funktion steht, was jedes mal passieren soll, wenn auf das Bild geklickt wird:

- -
    -
  1. Wir holen uns den Wert des src Attributes von unserem Bild.
    2. -
  2. Wir benutzen eine if-Bedingung, um zu überprüfen ob der src-Wert derselbe ist, wie der Pfad unseres original Bildes: -
      -
    1. Wenn die Bedingung wahr ist, ändern wir den src-Wert in den Pfad des zweiten Bildes, so das dieses Bild nun in unser {{htmlelement("image")}}-Element geladen wird.
      2. -
    2. Wenn die Bedingung falsch ist (das Bild also schon angeklickt und geändert wurde), ändern wir den src-Wert wieder in den Pfad des ersten Bildes, so das bei erneutem Klick mit der Maus das Originalbild wieder erscheint.
      3. -
    -
    3. -
- -

Ein persönlicher Willkommensgruß

- -

Als nächstes fügen wir unserer Webseite einen persönlichen Willkommensgruß hinzu, welcher vom Benutzer beim ersten Besuch der Seite geändert werden kann. Die Änderung soll auch erhalten bleiben, wenn der Benutzer die Seite verlässt und später wieder zurück kommt. Wir werden auch eine Option haben, den Nutzer zu ändern, so das der Gruß dementsprechend geändert wird.

- -
    -
  1. In der index.html-Datei fügen Sie direkt vor dem {{htmlelement("script")}} Element folgende Code-Zeile ein: - - 
    <button>Name ändern</button>
    -
    2. -
  2. In main.js fügen Sie den folgenden Code am Ende hinzu. Achten Sie darauf, das Ihr Code genauso aussieht wie hier gezeigt. Damit erstellen wir zwei neue Variablen und speichern in der Ersten eine Referenz zu unserem neu erstellten button und in der Zweiten zu unserer Hauptüberschrift auf der Webseite: - 
    var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');
    -
    3. -
  3. Fügen Sie nun die folgende Funktion ein. Diese erstellt den personalisierten Willkommensgruß. Jetzt macht diese Funktion noch nichts, aber wir werden sie gleich benutzen: - 
    function setUserName() {
-  var myName = prompt('Bitte geben Sie Ihren Namen ein.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla ist cool, ' + myName;
-}
    - Innerhalb der Funktion wird in der ersten Zeile die neue Variable myName erstellt, in welcher der Name des Benutzers gespeichert werden soll. Der Name des Benutzers wird mit der prompt()-Funktion erfragt - es öffnet sich eine Dialogbox, ähnlich wie bei der alert()-Funktion, in welcher der Benutzer seinen Namen eingeben kann und mit einem klick auf OK bestätigen kann. Als nächstes Rufen wir eine API namens localStorage auf, mit welcher wir Daten im Browser speichern und später darauf zurückgreifen können. Wir nutzen die setItem()-Funktion von localStorage, um ein Datenobjekt mit dem Namen 'name' zu erstellen und setzen für den Wert die Variable myName ein, welche den Namen enthält, den der Benutzer eingegeben hat. Als letztes ersetzen wir den Textinhalt (textContent) von myHeading mit unserem Gruß welcher den Namen des Benutzers beinhaltet.
    4. -
  4. Fügen Sie als nächstes diesen if ... else Block hinzu — dies ist der Initialisierungscode, mit welchem wir unsere App aufsetzen, wenn sie das erste mal geladen wird: - 
    if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla ist cool, ' + storedName;
-}
    - Dieser Code-Block benutzt eine logische Verneinung, um zu überprüfen ob es schon einen gespeicherten Namen gibt. Wenn der Name nicht existiert, dann wird die Funktion setUserName() aufgerufen, um einen Namen zu bekommen. Wenn der Name existiert, der Benutzer also diesen schon bei einem vorherigen Besuch der Webseite angegeben hat, dann wird der gespeicherte Name mit der getItem()-Funktion geladen, in der Variablen storedName gespeichert und dem String für den Willkommensgruß hinzugefügt.
    5. -
  5. Als letztes fügen wir unserem Button den unten stehenden onclick-Eventhandler hinzu, welcher die setUserName()-Funktion aufruft. Damit kann der Benutzer den Namen jederzeit ändern, wenn er auf den Button drückt: - 
    myButton.onclick = function() {
-  setUserName();
-}
-
    -
    6. -
- -

Wenn Sie Ihre Seite jetzt im Browser aufrufen, werden Sie beim ersten Besuch nach Ihrem Namen gefragt und der Willkommensgruß wird personalisiert. Sie können den Namen jederzeit ändern, indem Sie auf den Button drücken. Der personalisierte Willkommensgruß wird auch wieder angezeigt, wenn Sie die Seite verlassen und danach wieder aufrufen, da der Name in localStorage, im Browser, gespeichert wird!

- -

Zusammenfassung

- -

Wenn Sie der Anleitung in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite besitzen die ähnlich aussieht, wie diese hier (sehen Sie sich unsere Version an):

- -

- -

Wenn Sie nicht das selbe Resultat haben und keine Lösung finden (probieren Sie es erst selbst hinzubekommen), dann können Sie sich unseren Code auf Github anschauen.

- -

Hier haben wir nur einige Grundlagen und Beispiele von JavaScript gezeigt. Wenn es Sie interessiert, lernen Sie mehr über JavaScript in unserem JavaScript Guide.

- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index 197e9373ff4ffe..00000000000000 --- a/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Ihre Webseite veröffentlichen -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - Anfänger - - FTP - - GitHub - - Lernen - - Web - - WebServer - - Webseite - - veröffentlichen -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

Wenn Sie Ihre Webseite fertig haben, den ganzen Code geschrieben und die Dateien organisiert haben, dann ist es Zeit Ihre Webseite online zu stellen. In diesem Artikel lernen Sie, wie Sie Ihre neue Webseite, die Sie in den letzten Artikeln erstellt haben, online für alle zugänglich machen.

-
- -

Was sind Ihre Optionen?

- -

Eine Webseite online zu stellen, das ist kein einfaches Thema, hauptsächlich deswegen, da es viele verschiedene Wege gibt dies zu tun. In diesem Artikel werden wir nicht alle Möglichkeiten vorstellen. Wir werden drei Strategien vorstellen und die Vorteile und Nachteile jeder dieser Wege erläutern und für unsere Beispielwebseite einen Weg genau beschreiben, dem jeder Anfänger folgen kann.

- -

Hosting und eine eigene Domain

- -

Wenn Sie die volle Kontrolle über Ihre veröffentlichte Webseite haben wollen, werden Sie ein wenig Geld in die Hand nehmen müssen, um folgendes zu kaufen:

- -
    -
  • Hosting — man mietet Datenplatz auf dem Webserver einer Hosting-Firma. Sie laden Ihre Dateien auf den Webserver und dieser bringt die Webseite weiter zu den Benutzern, die auf die Webseite zugreifen möchten.
    • -
  • Eine Domain — dies ist die einzigartige Adresse, unter welcher Ihre Webseite findbar ist, wie http://www.mozilla.org, oder http://www.tagesschau.de. Sie mieten die Domain für so und soviel Jahre von einem Domainregister.
    • -
- -

Viele professionelle Webseiten nutzen diesen Weg, um online zu gehen.

- -

Zusätzlich benötigen Sie ein {{Glossary("FTP", "File Transfer Protocol (FTP)")}} Programm, um ihre Dateien von ihrem Rechner auf den Webserver zu übertragen. FTP Programme unterscheiden sich in ihrer Funktionalität, aber normalerweise müssen Sie sich mit den Daten des Webservers einloggen, welche Sie von der Hosting-Firma bekommen (Username, Passwort, Hostname, etc.). Das Programm zeigt ihnen in einem Fenster die Dateien auf ihrem lokalen Computer und in einem zweiten die Dateien auf dem Webserver und Sie können Dateien hin und her schieben:

- -

- -

Tipps um Hosting und Domain zu finden

- -
    -
  • Wir promoten hier keine bestimmten, kommerziellen Hosting-Firmen oder Domainregisterstellen, es gibt sehr zahlreiche Anbieter. Suchen Sie einfach nach "web hosting" und "Domain registrieren". Sie werden immer erst kontrollieren können, ob die gewünschte Domain frei ist oder ob sie schon von jemand anderem registriert wurde.
    • -
  • Es gibt einige kostenlose Angebote, zum Beispiel lima-city.de, Neocities, Blogger und WordPress. Oft ist es so das kleine Webseiten, mit wenigen Besuchern, kostenlos gehostet werden können, wenn sie aber größere Projekte haben, gibt es Zusatzkosten. Einige dieser Anbieter funktionieren ohne FTP-Programme und sind sehr einsteigerfreundlich.
    • -
  • Oft bieten Hosting-Anbieter auch einen Domain-Service an.
    • -
- -

Mit GitHub oder Google App Engine

- -

Es gibt Tools mit denen Sie Webseiten veröffentlichen können:

- -
    -
  • GitHub ist eine Seite, auf der man zusammen mit anderen an Code arbeiten kann. Es erlaubt das Hochladen von Projektarchiven, um diese in dem Git Versionskontrollsystem zu speichern. Diese Projektarchive sind online von anderen einsehbar und können bearbeitet werden. Das System ist Open-Source, das heißt, jeder in der Welt kann in Ihre Projektarchive auf GitHub schauen, Ihren Code finden, diesen Benutzen, von Ihrem Code lernen und ihn verbessern. GitHub hat eine Funktion namens GitHub Pages, mit der man Webseiten-Code live ins Web schalten kann.
    • -
  • Google App Engine ist eine mächtige Plattform mit Google's Infrastruktur, auf der Sie Apps erstellen und laufen lassen können. Ob Sie eine große Web Applikation aufbauen wollen oder eine statische Webseite hosten möchten. Mehr dazu finden Sie hier auf Englisch: How do you host your website on Google App Engine?
    • -
- -

Im Gegensatz zu anderen Anbietern sind diese Tools meist kostenlos, allerdings auch limitierend.

- -

Nutzen einer Online-Entwicklungsumgebung

- -

Es gibt einige Webapplikationen, welche eine Webseiten Entwicklungsumgebung simulieren und Ihnen die Möglichkeit geben HTML, CSS und JavaScript in Ihrem Browser einzugeben und direkt das Resultat anzuzeigen. Das ganze funktioniert in nur einem Browsertab. Diese Werkzeuge sind einfach zu nutzen und super, um damit zu lernen. Sie sind kostenlos in ihrer Basisversion und Ihre dort erstellte Webseite wird direkt unter einer Webadresse gehostet. Allerdings haben diese Online Entwicklungsumgebungen auch ihre Nachteile, so können oft keine zusätzlichen Dateien, wie Bilder oder Videos, gehostet werden.

- -

Schauen Sie sich einige dieser Beispiele an und finden Sie heraus was für Sie funktioniert:

- - - -

- -

Veröffentlichen mit GitHub

- -

Wir werden nun gemeinsam Ihre Webseite im Internet veröffentlichen. Hier nutzen wir dafür GitHub Pages.

- -
    -
  1. Als erstes, melden Sie sich bei GitHub an und verifizieren Sie Ihe Email Adresse.
    2. -
  2. Als nächstes erstellen Sie ein repository (Datenarchiv) in welches Ihre Dateien von der Webseite gehen werden.
    3. -
  3. Auf dieser Seite geben Sie in die Repository name Box username.github.io ein, wobei username Ihr Username ist. Zum Beispiel würde maxmustermann hier maxmustermann.github.io eingeben.
    - Aktivieren Sie auch Initialize this repository with a README und klicken dann auf Create repository.
    4. -
  4. Danach können Sie Inhalte einfach mit der Maus in Ihr Datenarchiv ziehen und dann auf Commit changes klicken.
    - -
    -

    Notiz: Gehen Sie sicher das Ihr Ordner eine index.html Datei hat.

    -
    -
    5. -
  5. -

    Jetzt gehen Sie in einem neuen Fenster in Ihrem Browser username.github.io um Ihre Webseite online anzusehen. Als Beispiel können Sie auf folgende GitHub Webseite gehen: chrisdavidmills.github.io.

    - -
    -

    Notiz: Es dauert eventuell ein paar Minuten bis Ihre Webseite live geschaltet ist. Wenn sie diese nicht sofort sehen, warten Sie ein wenig und probieren es nach einiger Zeit noch einmal.

    -
    -
    6. -
- -

Um mehr zu lernen gehen Sie zu GitHub Pages Help.

- -

Weiterer Lesestoff (in englisch)

- - - -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 356f4db6ba7ef9..00000000000000 --- a/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Wie soll Ihre Webseite aussehen? -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - Anfänger - - Beginner - - Design - - Fonts - - Inhalte - - Lernen - - Planung - - Schriftarten -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web")}}
- -
-

»Wie soll Ihre Webseite aussehen?« behandelt die Planungs- und Designarbeit, die Sie machen, bevor Sie anfangen Code zu schreiben. Dazu gehören Fragestellungen wie "Welche Informationen soll meine Webseite bereitstellen?", "Welche Schriftarten und Farben will ich nutzen?" und "Was soll meine Seite tun?"

-
- -

Das wichtigste zuerst: Planen

- -

Bevor Sie irgendwas machen, brauchen Sie eine Idee. Was soll Ihre Webseite eigentlich machen? Eine Webseite, die Sie schreiben, könnte alles machen, was Sie aus dem Internet kennen, aber für den Anfang sollten Sie es einfach halten. Wir werden eine einfache Webseite erstellen mit einem Bild, einer Überschrift und ein paar Absätzen.

- -

Am Anfang sollten Sie sich folgende Fragen beantworten:

- -
    -
  1. Worum geht es auf Ihrer Webseite? Mögen Sie Hunde, Berlin oder Pacman?
    2. -
  2. Welche Informationen zeigen Sie zu Ihrem Thema? Schreiben Sie einen Titel und ein paar Absätze dazu und überlegen Sie sich, wie Sie das Thema visualisieren möchten, z.B. mit einer Grafik oder einem Bild.
    3. -
  3. Wie soll Ihre Webseite aussehen? (Schlagworte genügen) Welche Farben und Farbkombinationen möchten Sie nutzen? Welche Schriftart ist geeignet: formal, comicartig, plakativ oder subtil?
    4. -
- -
-

Hinweis: Komplexe Projekte benötigen detailierte Richtlinien die alle Einzelheiten zu Farbe, Schrift, Abständen, Schreibstil etc. behandeln. Diese Richtlinien werden manchmal »Design Guide« oder »Brand Guide« genannt. Die Firefox OS Guidelines sind beispielsweise ein solches Dokument.

-
- -

Skizzieren Sie Ihr Design

- -

Benutzen Sie Stift und Papier, um grob aufzuzeichnen wie Ihre Seite aussehen soll. Wo soll das Bild hin und wo die Textinhalte? Wie groß soll die Überschrift sein?

- -

Bei Ihrer ersten Webseite gibt es nicht allzu viel zu zeichnen, aber Sie sollten es sich zur Gewohnheit machen, das Design der Webseite auszuarbeiten, bevor Sie anfangen, diese zu entwickeln. Das hilft bei der Planung und Ideenentwicklung – ein Künstler müssen Sie dafür nicht sein!

- -

- -
-

Hinweis: Sogar bei echten, komplexen Webseiten beginnt das Designteam meist mit groben Skizzen auf Papier. Später werden dann digitale Mockups in einem Grafikprogramm oder mit Webtechnologien umgesetzt.

- -

Web Teams umfassen oft sowohl einen Grafikdesigner, als auch einen User Experience (UX) Designer. Grafikdesigner gestalten das Aussehen der Webseite. UX-Designer haben eine abstraktere Aufgabe: Sie gestalten die Erfahrung und Interaktion der Nutzer.

-
- -

Inhalte und Aussehen bestimmten

- -

Jetzt können Sie die Inhalte der Webseite zusammenstellen, also die Dinge, welche letztendlich auf Ihrer Webseite zu sehen sein werden.

- -

Text

- -

Sie haben vermutlich immer noch die Überschriften und Absätze, die Sie zuvor geschrieben haben – benutzen Sie diese als erste Textinhalte.

- -

Hauptfarbe

- -

Um eine Farbe auszuwählen, nutzen Sie den Farbwähler und suchen sich eine Farbe aus. Wenn Sie auf eine Farbe klicken, bekommen Sie einen seltsamen Sechs-Zeichen-Code (z.B. #660066). Das ist ein Hex(adezimal)-Code und er repräsentiert eine bestimmte Farbe. Speichern Sie diesen Farbcode ab oder schreiben Sie ihn irgendwo auf.

- -

- -

Bilder

- -

Um ein Bild auszuwählen, gehen Sie auf Google Images oder Flickr und suche nach einem passenden Bild.

- -
Achtung: Die meisten Bilder im Internet sind urheberrechtlich geschützt. Das heißt, man darf sie nicht einfach nutzen – auch wenn die Bilder im Internet ohne Probleme anzuschauen sind und man die Bilder speichern kann.
-
-So findet man Bilder, die man nutzen darf:
-- Wähle bei Google Images "Nutzungsrechte"/"Zur Wiederverwendung gekennzeichnet"
-- Wähle bei Flickr "Only search within Creative Commons-licensed content" aus.
-In beiden Fällen muss man den Namen des Urhebers zitieren.
-Mehr zum Urheberrecht auf irights.com
- -

Haben Sie ein Bild gefunden, das Sie nutzen möchten, machen Sie folgendes bei Google Images:

- -
    -
  1. Klicken Sie auf das Bild.
    2. -
  2. Wählen Sie "Bild ansehen".
    3. -
  3. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "Grafik speichern unter…" oder kopieren Sie die Internetaddresse des Bildes und speichern diese ab.
    4. -
- -

Bei Flickr

- -
    -
  1. Klicken Sie auf ein Bild.
    2. -
  2. Klicken Sie "Download this Photo" und wählen Sie eine passende Größe aus.
    3. -
- - - -

- - - -

- -

Schriftart

- -

Eine Schrift auswählen:

- -
    -
  1. Gehen Sie auf Google Fonts und scrollen Sie durch die Liste bis Sie eine Schriftart entdecken, welche Sie mögen. Sie können auch die Filter auf der rechten Seiten nutzen, um die Auswahl zu filtern.
    2. -
  2. Klicken Sie den "+" Button bei der gewünschten Schriftart.
    3. -
  3. Es erscheint eine Popup-Box. Klicken Sie auf den "* Family Selected" Button im unteren Bereich der Seite. ("*" abhängig davon wieviele Fonts man ausgewählt hat).
    4. -
  4. In der Popup-Box stehen jetzt zwei Codes. Diese können Sie kopieren und in einem beliebigen Texteditor für später speichern.
    5. -
- -

new version

- - - -

picture with 2 codes of google fonts

- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/html/index.html b/files/de/learn/html/index.html deleted file mode 100644 index fd04b333af448e..00000000000000 --- a/files/de/learn/html/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -tags: - - Anfänger - - Beginner - - CodingScripting - - HTML - - Lernen -translation_of: Learn/HTML ---- -
{{LearnSidebar}}
- -

{{Glossary('HTML')}} ist die Basistechnologie oder Beschreibungssprache, in der Webseiten im WWW erstellt werden. HTML definiert die Struktur einer Webseite. Falls Sie Webseiten selbst erstellen möchten, sollten Sie sich mit HTML auskennen (oder anderenfalls einen automatischen HTML Generator benutzen). Über den HTML Code wird bestimmt, ob ein bestimmter Inhalt (der konkrete Text, z.B. "hallo www, dies ist meine erste Web Seite!") einer Webseite vom Brower etwa als Absatz, Link, Überschrift, Bild oder Formular erkannt werden soll.

- -

Ihr Lernweg

- -

Auf dem Weg in die Webentwicklung sollten Sie als aller erstes HTML lernen, da dies die Grundlage aller Webseiten bildet.
-
- Starten Sie hier unseren HTML-Kurs, indem Sie Einführung in HTML lesen.
-
- Wenn Sie HTML schon können, dann sollten sie nun eine der darauf aufbauenden Technologien lernen:

- -
    -
  • CSS, und wie man dieses nutzt, um HTML zu stilisieren ("stylen")
    - Zum Beispiel können Sie die Textgröße und Schriftart ändern, Rahmen anzeigen lassen und Animationen hinzufügen.
    • -
  • Javasscript, und wie man dieses nutzt, um eine dynamische Webseite zu erstellen.
    - Zum Beispiel könnten Sie damit die Position auf einer Karte finden, sie können Elemente auf der Webseite erscheinen oder verschwinden lassen, sie können Daten des Nutzers lokal speichern usw..
    • -
- -

Bevor Sie mit unserem HTML-Kurs anfangen, sollten Sie grundsätzlich mit Ihrem Computer umgehen können und das Internet schon passiv nutzen, d.h. im Internet surfen. Wenn Sie dies lesen, ist das Letzere ja wohl offensichtlich der Fall. Sie sollten schon eine Rechner-Arbeitsumgebung haben, wie in Installieren nötiger Software erklärt wird und wissen wie Sie Ihre Dateien ordnen, wie in Dateien nutzen erklärt wird. Diese beiden Artikel sind Teil unserer Artikelserie Das Internet für Einsteiger.

- -

Es ist nicht besonders schwer, die Grundlagen zu erlernen. Allerdings handelt es sich bei HTML um eine umfassende Technologie mit vielen Features, es gibt dementsprechend nicht einen einzigen korrekten Weg die Sprache zu lernen. Es wird empfohlen, sich zuerst durch den Artikel Das Internet für Einsteiger durchzuarbeiten - falls sie über dieses Wissen schon verfügen, dann brauchen Sie das natürlich nicht tun. Auch ist das meiste, was im HTML-Grundlagen Artikel abgedeckt wird, schon bereits in unser Modul Einführung in HTML integriert.

- -
-
-

Module

- -

In unserem HTML Lernbereich finden Sie die unten genannten Module. Die Module sind so in Reihenfolge angeordnet, daß Sie diese von oben nach unten durchgehen können, was wir sehr empfehlen. Sie sollten mit dem ersten Modul anfangen.

- -
-
Einführung in HTML
-
In diesem Modul üben Sie Grundlegende Fertigkeiten mit HTML ein. Sie könnten hier mit dem Studium starten: Hier könnte Ihre Reise in die Webentwicklung anfangen. Sie lernen, wie Sie das Grundgerüst einer Webseite schreiben, wie Sie Links erstellen und Ihre Webseite strukturieren.

Wem das alles viel zu langwierig und aufgebläht erscheint, dem wird auf https://codepen.io weitergeholfen, wo man sofort ohne Zeitverschwendung mit Beispielen loslegen und testen kann; einige Beispiele sind auch hier im MDN verlinkt und kommentiert. Die o.g. vorausgesetzte "Rechner-Arbeitsumgebung" ist hier gar nicht nötig: Codepen.io liefert sie prompt & frei auf Bildschirm.
-
Multimediainhalte einbinden
-
In diesem Modul lernen Sie verschiedene Wege kennen, wie man Bilder, Videos oder gar andere Webseiten in eine eigene Webseite einbinden kann.
-
HTML Tabellen
-
Tabellen so auf Webseiten darzustellen, das sie für alle Menschen zugänglich sind, ist nicht so einfach. In diesem Modul lernen Sie, wie man mit HTML eine Tabelle erstellt und wie man komplexere Zusätze hinzufügt, wie eine Zusammenfassung.
-
- -

Häufige Probleme in HTML lösen

- -
-
Häufige Probleme mit HTML lösen
-
Diese Serie von Artikeln existiert, um Ihnen zu helfen häufig auftretende Probleme bei der Erstellung einer Webseite zu lösen: Arbeiten mit Titeln, Hinzufügen von Bildern oder Videos, Hervorheben von Inhalten, Einbinden von Formularen, usw.
-
-
- -
-

Weiterführende Artikel

- -
-
Eine einfache Seite in HTML schreiben
-
In diesem Artikel werden Sie lernen, wie Sie eine einfache Webseite erstellen.
-
- -
-

Sollten Sie sich an HTML gewöhnt haben, finden Sie hier genauere Informationen zum Erkunden:

- -
-
HTML Referenz
-
In unserem großen Referenz Leitfaden finden Sie Details über jedes HTML-Element und Attribut.
-
-
-
diff --git a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html deleted file mode 100644 index a060e3daf2b2f7..00000000000000 --- a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,464 +0,0 @@ ---- -title: Fortgeschrittene Textformatierung -slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -tags: - - Abkürzungen - - Beginner - - Beschreibungslisten - - Guide - - HTML - - Lernen - - Textformatierung - - Zitate -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -original_slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
- -

Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel Einfache Textformatierung mit HTML abgedeckt haben. Die HTML-Elemente welche in diesem Artikel vorgestellt werden, werden nicht so oft benötigt. Es ist aber hilfreich diese zu kennen. Sie werden hier lernen wie man Zitate, Beschreibende Listen, Code und ähnliche Texte, sowie tiefer oder höher gestellte Zeichen ausgibt und noch mehr.

- - - - - - - - - - - - -
Vorwissen:Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln Lernen Sie HTML kennen und Einfache Textformatierung mit HTML abgedeckt werden.
Ziel:Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.
- -

<dl> - Beschreibungslisten

- -

In Einführung in Textformatierung mit HTML haben wir Ihnen gezeigt, wie man einfache geordnete und ungeordnete Listen erstellt. Es gibt aber noch einen dritten Typ Listen, der nicht so oft Verwendung findet. Es handelt sich um Beschreibungslisten (engl.: "description lists"). Mit dem dl-Element lässt sich eine Liste von Begriffen (list term) lt erstellen, welchen eine Beschreibung (engl. "description") dd hinzugefügt wird. Diese Art von Liste ist z.B. in Wörterbüchern zu finden, wo es zu einem bestimmten Begriff eine längere Beschreibung gibt. Lassen Sie uns in einem Beispiel anschauen, wie so eine beschreibende Liste genau aufgebaut ist. Hier haben wir eine noch unformatierte Liste, welche wir in eine Beschreibungsliste umwandeln wollen:

- -
Innerer Monolog
-Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
-Monolog
-Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
-Beiseitesprechen
-Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
- -

Beschreibungslisten werden vom {{htmlelement("dl")}};-Element eingeschlossen. Jeder Begriff ist in ein {{htmlelement("dt")}}-Element eingebettet, während die dazugehörige Beschreibung danach in einem {{htmlelement("dd")}}-Element hinzugefügt wird. Das sieht dann wie folgt aus:

- -
<dl>
-  <dt>Innerer Monolog</dt>
-  <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd>
-  <dt>Monolog</dt>
-  <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd>
-  <dt>Beiseitesprechen</dt>
-  <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd>
-</dl>
- -

Browser stellen die Beschreibungen zu den Begriffen in den Beschreibungslisten normalerweise eingerückt dar. Hier auf MDN werden die Begriffe zusätzlich noch fett hervorgehoben.

- -
-
Innerer Monolog
-
Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
-
Monolog
-
Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
-
Beiseitesprechen
-
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
-
- -

Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:

- -
-
Beiseitesprechen
-
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.

Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
-
- -

Aktives Lernen: Eine Beschreibungsliste erstellen

- -

Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im Input-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im Output-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code_1', 700, 500) }}

- -

Zitate

- -

Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.

- -
-

Hinweis: Zitat kann ins Englische sowohl als "quote" als auch als "citation" übersetzt werden. Beide englischen Wörter werden in HTML parallel genutzt, als "quote" für blockquote und q und die Abkürzung für "citation" cite.

-
- -

<blockquote> - Blockzitate

- -

Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das {{htmlelement("blockquote")}}-Element. Damit können Sie auf Blockebene ein Zitat erstellen, welches z.B. einen ganzen Absatz, eine Liste oder ähnliches enthält. Sie können mit einer URL auf die Quelle des Zitates verlinken, nutzen Sie dafür das {{htmlattrxref("cite","blockquote")}}-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <blockquote>-Element:

- -
<p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
- -

Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:

- -
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-  <p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
-</blockquote>
- -

Browsers werden ein Blockzitat standardmäßig einrücken, um es als Zitat zu kennezichnen. Hier auf MDN macht es das auch, aber der Stil wurde noch etwas mehr verändert:

- -{{EmbedLiveSample("
- Blockzitate", 300, 300)}} - -

<q> - Inline Zitate

- -

Inline Zitate (Zitat = engl.: "quote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <q>-Seite:

- -
<p>Das Zitat-Element — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"> indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p>
- -

Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:

- -

Das Zitat-Element — <q> — indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.

- -

<cite> - Quellenangabe

- -

Der Inhalt des {{htmlattrxref("cite","blockquote")}}-Attributs scheint hilfreich zu sein, leider ist es aber so das Browser, Bildschirmlesegeräte und dergleichen nicht viel damit machen können. Es gibt keinen Weg den Inhalt des cite-Attributs anzuzeigen, ohne eine eigene Lösung mittels JavaScript oder CSS zu schreiben. Wenn Sie die Quelle für den Leser zugägnlich machen wollen, dann benutzen Sie besser das {{htmlelement("cite")}}-Element. Eigentlich sollte darin der Name der zitierten Quelle stehen - also der Name des Buches oder der Person - aber es gibt keinen Grund warum man nicht einen Link hier einfügen kann. Das sieht dann so aus:

- -
<p>Auf der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
-<cite>MDN blockquote-Seite</cite></a> steht:
-</p>
-
-<blockquote cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
-  <p>Das <strong>HTML <code>&lt;blockquote&gt;</code>-Element</strong> (oder <em>HTML Block
-  Quotation Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein erweitertes Blockzitat handelt.</p>
-</blockquote>
-
-<p>Das <code>&lt;q&gt;</code>-Element — ist <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.
-Das <code>&lt;q&gt;</code>-Element -- <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">
-<cite>MDN q Seite</cite></a>.</p>
- -

Die cite-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als quotations.html Beispiel anschauen.

- -

Aktives lernen: Wer hat das gesagt?

- -

Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:

- -
    -
  1. Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein cite-Attribut besitzt.
    2. -
  2. Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein cite-Attribut besitzt.
    3. -
  3. Fügen Sie jedem Link ein <cite>-Element hinzu.
    4. -
- -

Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

<abbr> - Abkürzungen

- -

Ein weiteres Element, welches man öfters auf Webseiten findet ist {{htmlelement("abbr")}}. Es wird genutzt, um Abkürzungen zu kennzeichnen und die volle Schreibweise der Abkürzung zur Verfügung zu stellen. Die volle Schreibweise wird in dem Element als {{htmlattrxref("title")}}-Attribut angegeben. Hier ein paar Beispiele:

- -
<p>Wir benutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p>
-
-<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p>
- -

Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):

- -

Wir nutzen HTML, um ein Webdokument zu strukturieren.

- -

Ich denke Dr. Green war in der Küche mit der Kettensäge.

- -
-

Hinweis: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <abbr>, nur das es Acronyme kennzeichnen sollte. Es wird aber kaum genutzt und von Browsern wird es nicht so gut unterstüzt. Es ist also besser nur noch <abbr> zu nutzen.

-
- -

Aktives lernen: Eine Abkürzung kennzeichnen

- -

In dieser kleinen Lernübung, möchten wir, das Sie eine Abkürzung als solche Kennzeichnen. Sie können das Beispiel unten benutzen oder es durch ein eigenes ersetzen.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

- -

Kontaktdaten markieren

- -

HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

Eine Sache die man sich merken sollte ist, dass das <address>-Element dafür gedacht ist, die Kontaktdaten der Person zu markieren, welche den HTML-Code geschrieben hat, nicht irgendeine Adresse. Das obige Beispiel wäre nur ok, wenn Chris tatsächlich das Dokument geschrieben hat, in dem die Adresse zu finden ist. Das folgende wäre aber auch in Ordnung:

- -
<address>
-  <p>Webseite erstellt von <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Hochstellen und tiefstellen von Text

- -

Manchmal brauchen sie hochgestellten oder tiefgestellten Text. Für hochgestellten Text (engl.: superscript) gibt es das HTML-Element {{htmlelement("sup")}}. Für tiefergestellten Text (engl.: subscript) gibt es das Element {{htmlelement("sub")}}. Beispiel:

- -
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
-<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p>
- -

Der Code wird wie folgt gerendert:

- -

My birthday is on the 25th of May 2001.

- -

Die chemische Formel von Koffein ist C8H10N4O2.

- -

Wenn x2 gleich 9 ist, dann muss x gleich 3 oder -3 sein.

- -

Computercode darstellen

- -

Es gibt ein paar Elemente mit denen man Computercode darstellen kann:

- -
    -
  • {{htmlelement("code")}}: Um normalen Computercode darzustellen.
    • -
  • {{htmlelement("pre")}}: Um Leerzeichen mit darzustellen, welche im Code genutzt werden, um Codeblöcke voneinander abzugrenzen. Normalerweise würde der Browser mehr als 1 Leerzeichen ignorieren und zu einem einzigen zusammen fassen, wenn der Text in <pre></pre> Tags eingepackt ist, dann bleiben die Leerzeichen erhalten.
    • -
  • {{htmlelement("var")}}: Um Variabelnamen zu markieren.
    • -
  • {{htmlelement("kbd")}}: Um Tastatureingaben darzustellen.
    • -
  • {{htmlelement("samp")}}: Um das Ergebnis eines Computerprogramms zu markieren.
    • -
- -

Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen other-semantics.html):

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Au, hör auf mich zu drücken!!');
-}</code></pre>
-
-<p>Sie sollten nicht zu repräsentative Elemente benutzen, wie <code>&lt;font&gt;</code> und <code>&lt;center&gt;</code>.</p>
-
-<p>In dem obigen JavaScript Beispiel, repräsentiert <var>para</var> ein p-Element.</p>
-
-
-<p>Markieren Sie den ganzen Text mit <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
- -

Der obige Code sollte im Browser folgendermaßen aussehen:

- -

{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}

- -

Zeit und Datum markieren

- -

HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:

- -
<time datetime="2016-01-20">20 Januar 2016</time>
- -

Wieso ist das nützlich? Deswegen, weil Menschen auf viele verschiedene Weisen ein Datum wiedergeben. Das obige Datum könnte auch wie folgt geschrieben sein:

- -
    -
  • 20 Januar 2016
    • -
  • 20th Januar 2016
    • -
  • Jan 20 2016
    • -
  • 20/06/16
    • -
  • 06/20/16
    • -
  • The 20th of next month
    • -
  • 20e Janvier 2016
    • -
  • 2016年1月20日
    • -
  • Und so weiter
    • -
- -

Ein Computer kann nicht so einfach erkennen, das immer das selber Datum gemeint ist. Wenn man also automatisch alle Datumsangaben von einer Webseite erfassen möchte, um diese zum Beispiel in einem Kalender zu nutzen, dann braucht man eine einheiltiche Schreibweise für den Computer. Mit dem {{htmlelement("time")}}-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.

- -

Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:

- -
<!-- Jahr-Monat-Tag -->
-<time datetime="2016-01-20">20 Januar 2016</time>
-<!-- Nur Jahr und Monat -->
-<time datetime="2016-01">January 2016</time>
-<!-- Nur Monat und Tag -->
-<time datetime="01-20">20 January</time>
-<!-- Nur die Zeit, Stunden:Minuten -->
-<time datetime="19:30">19:30</time>
-<!-- Man kann auch Sekunden und Millisekunden angeben! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
-<!-- Datum und Uhrzeit -->
-<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
-<!-- Datum und Uhrzeit mit Zeitzone -->
-<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich</time>
-<!-- Eine bestimmte Wochennummer angeben-->
-<time datetime="2016-W04">Die vierte Woche im Jahr 2016</time>
- -

Zusammenfassung

- -

Dies ist alles, was Sie über Textstrukturierung in HTML wissen müssen. Es gibt ntürlich noch mehr HTML-Elemente für die Darstellung und Strukturierung von Texten, aber die gebräuchlisten haben wir nun in diesem Kurs abgedeckt. Falls Sie dennoch daran interessiert sind wirklich alle Elemente zur Textgestlaltung kennen zu lernen, dann schauen Sie in unserer HTML-Element Referenz nach, denn dort sind alle HTML-Elemente aufgelistet.
- Im nächsten Artikel geht es darum, Struktur in unser ganzes HTML-Dokument zu bringen, wie man verschiedene Bereiche einer Webseite bestimmt und diese ausrichtet. Lesen Sie weiter!

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index 6f67a374bb96be..00000000000000 --- a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: Erstellen von Hyperlinks -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -tags: - - Beginner - - Guide - - HTML - - Learn - - Links - - Title - - absolute - - hyperlinks - - relativ - - urls -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -original_slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
- -

Hyperlinks, kurz Links, sind ein wichtiger Teil des Internets, denn sie machen erst ein Netzwerk daraus. In diesem Artikel zeigen wir Ihnen wie man einen Link erstellt und stellen benutzerfreundliche Anwendungsbeispiele vor.

- - - - - - - - - - - - -
Vorwissen:Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln Lerne HTML kennen und Einfache Textformattierung mit HTML abgedeckt werden.
Ziel:Lernen wie man sinnvoll Hyperlinks einsetzt.
- - - -

Hyperlinks sind eine der Erfindungen, welche das Internet zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "web") und definieren dieses, indem sie uns erlauben von einem Dokument auf ein anderes Dokument (oder eine andere Quelle) zu verweisen. Auch auf bestimmte Inhalte einer Webseite kann direkt verlinkt werden, genauso wie auch auf Apps per Hyperlink verwiesen werden kann. Fast alles im Internet kann zu einem Link konvertiert werden und mit diesem kann die entsprechende Web-Adresse ({{glossary("URL")}}) im Internet von einem Browser gefunden werden.

- -
-

Hinweis: Eine URL kann auf HTML-Dateien, Textdateien, Bilder, Dokumente, Video- oder Audiodateien verweisen und auf alles andere, was im Internet präsentiert werden kann. Wenn der Browser nicht weiß, wie er mit einer Datei umgehen soll, fragt er nach, ob die Datei geöffnet werden soll, wodurch das öffnen der Datei an ein anderes Programm auf dem Computer abgegeben wird, oder ob sie herunter geladen werden soll, damit man später diese Datei lokal nutzen kann.

-
- -

Die Webseite von BBC enthält zum Beispiel eine große Anzahl an Links, welche auf verschiedene Nachrichtenartikel verweisen, aber auch zu verschiedenen Bereichen der Website (Navigation), Login/Registrations-Seiten (für Benutzeraccounts) und mehr.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- - - -

Ein Link wird ganz einfach erstellt indem man Text, oder auch andere Inhalte, in ein {{htmlelement("a")}}-Element verschachtelt. Diesem Element muss auch noch das {{htmlattrxref("href", "a")}}-Attribut beigefügt werden, welches als Wert die Ziel-Webadresse enthält auf die man verweisen möchte.

- -
<p>Ich erstelle einen Link zu der
-<a href="https://www.mozilla.org/en-US/"> Mozilla Webseite</a>.
-</p>
- -

Dies gibt das folgende Resultat:

- -

Ich erstelle einen Link zu der Mozilla Webseite.

- -

Das title-Attribut

- -

Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist title. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:

- -
<p>Ich erstelle einen Link zu der
-<a href="https://www.mozilla.org/en-US/"
-   title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>.
-</p>
- -

Das gibt das folgende Resultat (der Text aus dem >title<-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):

- -

Ich erstelle einen Link zu der Mozilla Webseite.

- -
-

Hinweis: Der Text aus dem >title<-Attribut wird nur durch den Mauszeiger angezeigt, was bedeutet, das Leute die nur die Tastatur benutzen oder Tablet/Smartphone Benutzer, diese Information nicht angezeigt bekommen. Wenn es sich also um eine wichtige Information handelt, wäre es wohl besser diese im normalen Text unterzubringen.

-
- - - -

Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (das Dokument könnte so aussehen)

- -
    -
  • Erstellen Sie innerhalb des body-Elements ein paar Absätze oder andere Inhalte, so wie Sie es in den vorherigen Artikeln gelernt haben.
    • -
  • Machen Sie aus einigen der Inhalte nun Hyperlinks.
    • -
  • Ergänzen Sie title-Attribute.
    • -
- - - -

Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch Blockelemente könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <a></a> Tags einbetten.

- -
<a href="https://www.mozilla.org/de/">
-  <img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"></a>
-
- -

Hinweis: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.

- -

Kurzer Exkurs zu URLs und Linkpfaden

- -

Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.

- -

Eine URL (engl.: Uniform Resource Locator) ist einfach ein String aus Text der definiert wo etwas im Internet zu finden ist. Zum Beispiel ist Mozillas deutsche Webseite unter https://www.mozilla.org/de/ zu finden.

- -

URLs benutzen Dateipfade um Dateien zu finden. Diese Pfade geben an, wo in einem Dateisystem eine bestimmte Datei abgelegt ist. Lassen Sie uns ein einfaches Beispiel einer Dateistruktur anschauen (schauen Sie die Struktur von Erstellen von Hyperlinks an).

- -

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

- -

Das Stammverzeichnis, englisch root (=> Wurzel), dieses Verzeichnisses wurde creating-hyperlinks benannt. Wenn Sie lokal an einer Webseite arbeiten, dann haben Sie ein Verzeichnis (einen Ordner), in dem die ganzen Dateien für diese Webseite abgelegt sind. In diesem Stammverzeichnis hier haben wir eine index.html und eine contacts.html-Datei. Auf einer echten Webseite wäre index.html die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.

- -

Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens pdfs und projects. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (project-brief.pdf) und eine index.html-Datei. Sie sehen, man kann mehrere index.html-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite index.html-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.

- -
    -
  • -

    Verlinkung im selben Verzeichnis: Wenn Sie von der index.html-Datei einen Link zu der contacts.html-Datei setzen möchten, welche beide im selben Verzeichnis sind, dann müssen Sie nur den Dateinamen angeben. Die URL die Sie zur Verlinkung benutzen ist also contacts.html:

    - - 
    <p>Möchten Sie Kontakt mit uns augfnehmen?
-Finden Sie unsere Kontaktinformationen auf unserer <a href="contacts.html">Kontakt-Seite</a>.</p>
    -
    • -
  • -

    Verlinkung in ein Unterverzeichnis: Wenn Sie von der index.html-Datei im Stammverzeichnis mit einem Link auf die index.html-Datei verweisen möchten, welche in dem Unterverzeichnis projects liegt, dann schreiben Sie das in der URL folgendermaßen: projects/index.html Die Adresse besteht aus dem Namen des Unterverzeichnis, einem Slash und der Zieldatei in dem Verzeichnis:

    - - 
    <p>Besuchen Sie meine  <a href="projects/index.html">Projekt Homepage</a>.</p>
    -
    • -
  • -

    Verlinkung in ein höheres Verzeichnis: Wenn Sie einen Hyperlink von der projects/index.html-Datei zu der pdfs/projects-brief.pdf-Datei setzen möchten, dann müssen Sie ein Verzeichnislevel hoch gehen, um von dort in das Verzeichnis pdfs zu gelangen. Sie gehen in der Verzeichnisstruktur hoch, indem Sie zwei Punkte angeben - ... Die vollständige URL würde als wie folgt aussehen: ../pdfs/projects-brief.pdf

    - - 
    <p>Ein Link zu meiner <a href="../pdfs/project-brief.pdf">Projektbeschreibung</a>.</p>
    -
    • -
- -
-

Hinweis: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel ../../../komplexer/pfad/zu/meiner/datei.html.

-
- -

Innerhalb eines Dokuments verlinken

- -

Es ist möglich innerhalb eines HTML Dokumentes zu einem bestimmten Abschnitt einen Link zu setzen und nicht nur zu dem Dokument selbst. Um dies zu bewerkselligen, müssen Sie erst dem HTML-Element, welches Sie als Linkziel benutzen wollen, ein {{htmlattrxref("id")}}-Attribut geben. -Oft macht es Sinn zu einer bestimmten Überschrift im Dokument zu verlinken. In der Praxis würde das wie folgt aussehen: -

- -
<h2 id="postanschrift">Postanschrift</h2>
- -

Um zu dieser bestimmten id zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:

- -
<p>Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere  <a href="contacts.html#postanschrift">Postanschrift</a>.</p>
- -

Sie können diese Art der Referenz auch benutzen, um innerhalb des selben Dokumentes zu verlinken:

- -
<p>Unsere <a href="#postanschrift">Postanschrift</a> kann am Ende der Webseite gefunden werden. </p>
- -

Absolute und relative URLs

- -

Zwei Begriffe denen Sie im Internet begegnen werden sind absolute URL und relative URL:

- -

Absolute URL: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei index.html in ein Verzeichnis namens projects hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite http://www.example.com ist, dann lautet die absolute Adresse der Webseite http://www.example.com/projects/index.html.

- -

Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.

- -

Relative URL: Zeigt zu einem Verzeichnis realtiv zu der Datei, in welcher der Link steht, so wie wir es weiter oben im Artikel gemacht haben. Wenn wir zum Beispiel von der Datei http://www.example.com/projects/index.html zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: project-brief.pdf). Wenn diese PDF-Datei in dem Unterverzeichnis pdfs liegt, welches wiederum in dem Verzeichnis projects zu finden ist, dann würde die relative Adresse wie folgt aussehen: pdfs/project-brief.pdf. Die äquivalente absolute Adresse für die PDF-Datei wäre http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Eine relative URL zeigt auf unterschiedliche Orte, je nachdem wo sich die Datei befindet, in welcher der Link untergebracht ist. Wenn wir zum Beispiel unsere index.html-Datei aus dem projects Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL pdfs/project-brief.pdf darin auf http://www.example.com/pdfs/project-brief.pdf verweisen und nicht mehr auf http://www.example.com/projects/pdfs/project-brief.pdf -

- - - -

Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.

- - - - -

Es ist einfach ein paar Links auf eine Webseite zu setzen. Aber das ist nicht genug. Wir müssen dafür sorgen, das alle Benutzer der Webseite diese Links auch benutzen können, egal mit welchem Gerät sie auf die Seite zugreifen. Zum Nachdenken:

- -
    -
  • Benutzer von Bilschirmlesegeräten springen von Link zu Link auf der Webseite und diese werden ohne Zusammenhang vorgelesen.
    • -
  • Suchmaschinen benutzen Linktext um die Zieldateien zu indexieren, es ist also gut, wenn der Linktext Schlagwörter enthält die mit dem Inhalt des verlinkten Dokumentes zu tun haben.
    • -
  • Leser der Webseite scannen die Webseite zuerst durch, anstatt sie direkt Wort für Wort zu lesen. Dabei werden die Augen von hervorgehobenem Text, wie zum Beispiel Links angezogen. Beschreibender Linktext ist sinnvoll, zum schnellen Verständnis worum es auf der Webseite geht.
    • -
- -

Schauen wir uns ein Beispiel an:

- -

Guter Linktext: Firefox herunterladen

- -
<p><a href="https://firefox.com/">
-  Firefox herunterladen
-</a></p>
- -

Schlechter Linktext: Klicke hier um Firefox herunterzuladen

- -
<p><a href="https://firefox.com/">
-  Klicke hier
-</a>
-um Firefox herunterzuladen</p>
-
- -

Weitere Tipps:

- -
    -
  • Wiederholen Sie nicht die URL als Teil des Linktextes, URLs sehen nicht schön aus und Bildschirmlesegeräte geben diese Buchstabe für Buchstabe aus.
    • -
  • Schreiben Sie nicht "Link" oder "Link zu" in ihrem Linktext. Bildschirmlesegeräte sagen das es sich um einen Link handelt und der Link ist normalerweise als solcher gut zu erkennen. Denn Links sind normalerweise auf eine Weise gestaltet, die sie von der Umgebung absetzt, in einer anderen Farbe und unterstrichen. Diese Konvention sollte auch beibehalten werden, Links sollten immer als solche auf den ersten Blick zu erkennen sein.
    • -
  • Halten Sie den Linktext so kurz wie möglich - lange Linktexte sind besonders für Benutzer von Bildschirmlesegeräten nervend, denn der Linktext wird immer komplett vorgelesen.
    • -
  • Vermeiden Sie es den selben Linktext für mehrere Links zu benutzen, die auf unterschiedliche Dokumente verweisen. Benutzer von Bildschirmlesegeräten wird die Navigation erschwert, wenn ihnen mehrmals der Linktext "Klicken Sie hier" vorgelesen wird.
    • -
- - - -

Von einem vorangehenden Absatz bekommen Sie vielleich die Idee, dass es gut ist, nur absolute Links zu verwenden, da diese nicht zu toten Links werden können, wenn die Webseite verschoben wird, im Gegensatz zu relativen Links. Es ist aber besser relative Links zu benutzen, wenn Sie innerhalb der selben Webseite verlinken. Um eine andere Webseite zu verlinken müssen Sie natürlich absolute Links benutzen.

- -
    -
  • Zum einen ist es einfacher den Code später zu lesen und verstehen, denn relative URLs sind meistens viel kürzer als absolute URLs.
    • -
  • Zum anderen ist es effizienter relative URLs zu benutzen und die Webseite wird insgesamt schneller. Wenn Sie eine absolute URL benutzen, dann wird der Browser eine Anfrage an den Domain Name Server ({{glossary("DNS")}} senden, um herauszufinden, wo die Webseite zu finden ist, was Zeit und Ressourcen in anspruch nimmt (lesen Sie Wie das Internet funktioniert um mehr darüber zu erfahren). -Bei einer relativen URL schaut der Browser direkt auf dem selben Server nach der Datei, was um einiges schneller geht, als den Umweg über DNS zu gehen.
    • -
- -

Klare Verlinkung zu Dateien die keine HTML-Dateien sind

- -

Wenn Sie zu etwas anderem als einer anderen Webseite verlinken, zum Beispiel einer herunterladbaren Datei (ein PDF oder ein Word-Dokument) oder einem Stream (Video oder Audio) oder ähnlichem, welches unerwartete Effekte hat, wie PopUp-Fenster oder Flash-Animationen, dann sollten Sie das im Linktext deutlich kennzeichnen. Es kann nämlich sehr nervend sein, wenn folgendes passiert:

- -
    -
  • Wenn Sie eine langsame Internetverbindung haben, einen Link anklicken und auf einmal eine mehrere Megabyte große Datei heruntergeladen wird.
    • -
  • Wenn Sie keinen Flashplayer installiert haben, auf einen Link klicken und auf einmal auf einer Webseite sind, auf der Flash genutzt wird.
    • -
- -

Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:

- -
<p><a href="http://www.example.com/large-report.pdf">
-  Laden Sie den Verkaufsbericht herunter (PDF, 10MB)
-</a></p>
-
-<p><a href="http://www.example.com/video-stream/">
-  Schauen Sie sich das Video an (Stream öffnet in einem separaten Fenster, HD Qualität)
-</a></p>
-
-<p><a href="http://www.example.com/car-game">
-  Spielen Sie das Autospiel (benötigt Flash)
-</a></p>
- -

Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken

- -

Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das download-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:

- -
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
-   download="firefox-39-installer.exe">
-  Firefox 39 für Windows herunterladen
-</a>
- -

Aktives Lernen: Erstellen Sie ein Navigationsmenu

- -

In dieser Übung sollen Sie einige Einzelseiten so verlinken, das Sie am Ende eine Webseite mit mehreren Seiten haben, die über ein Navigationsmenü erreicht werden können. Diese Art der Navigation finden Sie auf vielen Webseiten. Die selbe Webseitenstruktur wird auf allen Seiten genutzt, um ein einheitliches Bild einer Webpräsenz zu geben. Wenn Sie auf die Links in der Navigation klicken, scheint sich nur der Inhalt der Webseiten zu verändern, nicht die ganze Seite.

- -

Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter navigation-menu-start die Liste der benötigten Dateien im Verzeichnis):

- - - -

Aufgaben:

- -
    -
  1. Fügen Sie eine ungeordnete Liste an dem angezeigten Platz in einer der Dateien ein. Diese Liste soll alle Namen der zu verlinkenden Seiten beinhalten. Ein Navigationsmenü ist tatsächlich nur eine Liste von Links, semantisch ist dies also der richtige Weg eine Navigation zu erstellen.
    2. -
  2. Verändern Sie jeden Seitennamen in einen Link.
    3. -
  3. Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein.
    4. -
  4. Auf jeder einzelnen Seite löschen Sie den Link zu der Seite selbst. Es ist sinnlos auf einer Seite einen Link zu sich selbst zu beinhalten. Dazu dient der visuelle Unterschied als Indikator, auf welcher Seite man sich gerade befindet.
    5. -
- -

Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:

- -

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

- -
-

Hinweis: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: navigation-menu-marked-up

-
- - - -

Es ist möglich Links oder Buttons zu erstellen, die wenn man Sie anklickt, eine neue ausgehende E-Mail Nachricht öffnen, anstatt zu einer Webseite oder einer anderen Datei zu verlinken. Das wirt bewerkstelligt indem man das {{HTMLElement("a")}}-Element zusammen mit dem mailto: URL Schema benutzt.

- -

In seiner einfachsten und am meisten genutzten Form, gibt ein mailto: Link einfach nur die E-Mail Adresse des Empfängers an. Beispiel:

- -
<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>
-
- -

Damit erstellen Sie einen Link der folgendermaßen aussieht: -Senden Sie eine E-Mail an Niemand.

- -

Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur mailto: schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um Teilen-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.

- -

Details angeben

- -

Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über mailto vorausgefüllt werden, dazu gehören subject (Betreff), cc und body (Um eine vorgegeben Nachricht anzuzeigen).

- -

Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:

- -
<a href="mailto:niemand@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=Der%20Betreff%20von%20der%20Email &amp;body=Die%20Nachricht%20in%20der%20Email">
-  Senden Sie eine E-Mail mit cc, bcc, subject and body
-</a>
- -
-

Hinweis: Die Werte der Felder müssen URL gerecht geschrieben sein, dass heißt mit speziellen Charakteren anstatt Leerzeichen, Umlauten und Sonderzeichen. Bemerken Sie auch die Verwendung des Fragezeichens (?), um die eigentliche URL von den Feldwerten abzugrenzen und das Und-Zeichen (&), um die Feldwerte voneinander zu trennen. Dies ist Standard URL-Query Notation. Sie werden mehr darüber in einem fortgeschrittenen Modul lernen.

-
- -

Hier sind noch ein paar Beispiele für mailto URLs:

- - - -

Zusammenfassung

- -

Jetzt haben Sie schon sehr viel über Hyperlinks gelernt! Wir werden uns später im Kurs noch einmal mit ihnen beschäftigen, wenn es darum geht, Links zu gestalten. Als nächstes schauen wir uns noch ein paar HTML-Elemente an, mit denen Text formatiert und semantisch dargestellt werden kann. Um Fortgeschrittene Textformatierung geht es im nächsten Artikel.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/introduction_to_html/debugging_html/index.html b/files/de/learn/html/introduction_to_html/debugging_html/index.html deleted file mode 100644 index 67b5dd82aed42e..00000000000000 --- a/files/de/learn/html/introduction_to_html/debugging_html/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Fehlersuche in HTML -slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML -tags: - - Anfänger - - Beginner - - Debugging - - Guide - - HTML - - Validation - - validator -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML -original_slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

HTML-Code zu schreiben ist die eine Sache. Fehler die sich beim Entwickeln einschleichen zu finden und zu beheben die andere. In diesem Artikel stellen wir einige Werkzeuge vor, mit welchen man Fehler in HTML finden und beheben kann.

- - - - - - - - - - - - -
Vorwissen: -

Grundkenntnisse in HTML, wie sie in den Artikeln Lernen Sie HTML kennen, Einfache Textformatierung mit HTML und Erstellen von Links abgedeckt werden.

-
Ziel: -

Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.

-
- -

Keine Angst vor der Fehlersuche

- -

Wenn Computercode geschrieben wird, dann ist meistens alles in Ordnung, bis zu dem Moment in dem ein Fehler auftritt - es wurde etwas falsch gemacht, deswegen funktioniert der Code nicht - entweder überhaupt nicht, oder nicht so wie es vorgesehen war. Als Beispiel zeigen wir einen Fehlerbericht, der beim compilieren eines einfachen Programmes in der Programmiersprache Rust, ausgegeben wurde.

- -

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string. "Error" ist Englisch und bedeutet Fehler. In diesem Beispiel gibt die Fehlerwarnung aus "unterminated double quote string", was bedeutet, dass ein doppeltes Anführungszeichen fehlt. Wenn man sich println!(Hello, world!"); anschaut, dann kann man sehen, das dort doppelte Anführungszeichen fehlen. Dieser Fehler ist dank der Fehlermeldung einfach zu finden und zu beheben. Fehlermeldungen können aber um einiges komplizierter sein, als in diesem Beispiel. Vor allem bei größeren Programmen, mit mehr Code, sind Fehler unvermeidlich und für jemanden, der eine Programmiersprache nicht kennt, wird es fast unmöglich, diese zu finden.

- -

Begriffserklärungen Fehlerbehebung

- -

Im Computerbereich wurden viele Begriffe aus dem Englischen übernommen, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch Debugging genannt. Der Fehler im Code wird im Englischen als Bug bezeichnet, was soviel wie Ungeziefer bedeutet. Das Debugging ist dann das Entfernen des Ungeziefers Als Debugger wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.

- -

Die Fehlerbehebung, das debuggen also, muss niemandem Angst machen, auch wenn es viel Arbeit ist. Der Schlüssel zum Schreiben und Debuggen von Programmiercode ist Vertrautheit mit der entsprechenden Programmiersprache und den Wekrzeugen zur Fehlerbehebung.

- -

HTML und Debugging

- -

Die Syntax von HTML ist um einiges einfacher als in einer "echten" Programmiersprache, wie Rust, {{glossary("Javascript")}} oder {{glossary("Python")}}. Auch wird HTML nicht erst compiliert, sondern direkt vom Browser interpretiert. Browser sind beim rendern von HTML sehr permissiv. Fehler bewirken normalerweise nicht, wie bei anderen Programmiersprachen üblich, das ein Dokument gar nicht dargestellt wird, sondern der Browser rendert das HTML-Dokument trotzdem, was sowohl gut, als auch schlecht sein kann.

- -

Permissiver Code

- -

Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:

- -
    -
  • Syntaxfehler: Dies sind Schreibfehler im Code, welche bewirken, dass das Programm nicht läuft, wie das obige Beispiel in Rust. Syntaxfehler sind leicht zu finden und zu beheben, wenn man mit der entsprechenden Programmierprache vertraut ist und man weiß, wie man Fehlermeldungen interpretiert.
    • -
  • Logische Fehler: Diese Fehler treten auf, wenn die Syntax korrekt ist, der Code aber nicht das tut, was er tun soll. Das Programm läuft, aber nicht so wie erwartet. Logische Fehler sind schwieriger zu beheben, weil es keine Fehlermeldung gibt, die einen zu der Fehlerquelle führt.
    • -
- -

HTML ignoriert Syntaxfehler, Browser rendern permissiv, die Seite wird angezeigt, obwohl Syntaxfehler im Code sind. Browser haben Regeln eingebaut, welche falsch geschriebenen HTML-Code trotzdem interpretieren, allerdings meist nicht so, wie es vorgesehen war. Die Fehler müssen trotzdem behoben werden.

- -
-

Hinweis: Warum wird HTML permissiv gerendert? Weil bei der Entwicklung des World Wide Web befunden wurde, dass es wichtiger ist, dass Leute ihre Inhalte publizieren können. Wichtiger als ein paar Syntaxfehler im Code, die eine Veröffentlichung verhindern würden. Das Internet wäre vermutlich nicht so populär, wenn die Regeln der Sprache strenger gewesen wären.

-
- -

Aktives Lernen: Permissiven Code untersuchen

- -

Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.

- -
    -
  1. Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: debug-example demo In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.
    2. -
  2. Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. -
  3. Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an: - 
    <h1>HTML debugging examples</h1>
-
-<p>What causes errors in HTML?
-
-<ul>
-  <li>Unclosed elements: If an element is <strong>not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  <li>Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-      what is this?</em>
-
-  <li>Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-      homepage</a>
-</ul>
    -
    4. -
  4. Lassen Sie uns die Probleme erläutern: -
      -
    • Die {{htmlelement("p","Absatz")}} und {{htmlelement("li","Listenpunkt")}} Elemente haben keine schließenden Tags. Auf dem Bild oben sehen wir, das dies kaum Auswikrungen hat, da es für den Browser einfach ist, trotzdem zu erkennen, wo das Ende dieser Elemente sein sollte.
      • -
    • Das erste {{htmlelement("strong")}} Element hat kein schließendes Tag. Der Browser kann nicht erraten, wo das Element enden soll, deswegen ist der ganze Rest von dem Text stark hervorgehoben.
      • -
    • Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <strong>strong <em>strong emphasised?</strong> what is this?</em>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.
      • -
    • Bei dem {{htmlattrxref("href","a")}}-Attributwert wurde ein schließendes, doppeltes Anführungszeichen vergessen. Dies scheint das größte Problem zu verursachen, der Link ist gar nicht erst gerendert worden.
      • -
    -
    5. -
  5. Lassen Sie uns den Code anschauen den der Browser zum rendern benutzt hat, im Gegensatz zu dem geschriebenen Quellcode. Dafür benutzen wir die Web Developer Tools, die in jedem modernen Browser enthalten sind (nicht aber in der mobilen Version der Browser). Wenn Sie nicht wissen, was Web Developer Tools sind, dann nehmen Sie sich einige Minuten Zeit, um diesen Artikel zu lesen: Entdecken Sie die Web Developer Tools
    6. -
  6. In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. -
  7. Mit Hilfe des DOM-Inspektors können wir den Code den der Browser versucht hat zu beheben sehen und wie dieser versucht die HTML Fehler zu beheben. (Wir habe hier Firefox benutzt, um den Code anzuschauen; andere moderne Browser sollten zu dem selben Resultat kommen.): -
      -
    • Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.
      • -
    • Es ist nicht klar, wo das erste <strong>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <strong>-Tag versehen, bis zum Ende des Dokumentes!
      • -
    • Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst: - 
      <strong>strong
-  <em>strong emphasised?</em>
-</strong>
-<em> what is this?</em>
      -
      • -
    • Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus: - 
      <li>
-  <strong>Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: </strong>
-</li>
      -
      • -
    -
    8. -
- -

HTML Validation

- -

Es ist auf jeden Fall besser, die korrekte Syntax für HTML zu verwenden, um ungewollte Ergebnisse zu vermeiden. Aber wie? Bei einem kleinen Dokument, wie dem obigen, ist es einfach, dieses Zeile für Zeile durchzugehen, um die Fehler zu finden. Aber was bei einem sehr großen HTML-Dokument tun?

- -

Die beste Strategie ist es, das HTML-Dokument von dem Markup Validation Service überprüfen zu lassen. Dieses Tool wird von der W3C bereitgestellt, also von der Organisation, welche auch die Spezifikationen von HTML, CSS und anderen Internettechnologien erstellt. Dieser Webseite gibt man ein HTML-Dokument an, diese untersucht das Dokument auf Fehler und gibt einen detailierten Fehlerbericht zurück.

- -

The HTML validator homepage

- -

Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen

- -

Aktives lernen: Validieren eines HTML-Dokumentes

- -

Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem Beispieldokument hier.

- -
    -
  1. Öffnen Sie als Erstes den Markup Validation Service in einem anderen Browser-Tab.
    2. -
  2. Gehen Sie zu dem Validate by Direct Input Tab. Dort kann man direkt HTML-Code überprüfen.
    3. -
  3. Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.
    4. -
  4. Klicken Sie auf Check.
    5. -
- -

Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.

- -

A list of of HTML validation results from the W3C markup validation service

- -

Die Fehlermeldungen richtig interpretieren

- -

Meistens sind die Fehlermeldungen hilfreich, manchmal aber auch schwierig zu verstehen. Es braucht etwas Übung, um den Grund aller Fehlermeldungen zu erkennen. Lassen Sie uns durch die ausgegebenen Fehlermeldungen gehen und überlegen, was diese bedeuten. Sie sehen, dass jede Fehlermeldung mit einer Zeilen(line) und einer Spalten(column)- nummer versehen sind damit der Ort des Fehlers auffindbar ist.

- -
    -
  • "End tag li implied, but there were open elements" (2 instances): Diese Fehlermeldung zeigt an, dass ein Element offen ist, welches eigentlich geschlossen werden sollte. Die line/column Informationen zeigen auf die erste Zeile, welche nach dem nicht vorhandenen geschlossenen Tag sein sollte. Dies hilft uns zu sehen, was falsch ist.
    • -
  • "Unclosed element strong": Diese Fehlermeldung ist einfach zu verstehen. Ein {{htmlelement("strong")}} Element wurde nicht geschlossen und die Zeilen und Spaltennummern deuten direkt auf den Fehler.
    • -
  • "End tag strong violates nesting rules": An der angegebenen Possition wurden Elemente falsch verschachtelt.
    • -
  • "End of file reached when inside an attribute value. Ignoring tag": Diese Fehlermeldung ist etwas kryptisch. Es zeigt auf, das ein Attribut irgendwo nicht richtig geformt wurde, vermutlich eher am Ende des Dokumentes, denn das Ende des Dokumentes ist innerhalb des Attribut-Wertes. Da der Browser den Link gar nicht darstellt, könnte hier der Fehler liegen.
    • -
  • "End of file seen and there were open elements": Diese Fehlermeldung sagt uns einfach nur, das es offene Elemente im Dokument gibt, welche geschlossen werden müssen. Die Zeilennummern deuten auf die letzten paar Zeilen im Dokument und diese Meldung kommt mit einer Zeile Code, die ein Beispiel dafür im Dokument aufzeigt. - 
    Beispiel: <a href="https://www.mozilla.org/>Link zur Mozilla Homepage</a> ↩ </ul>↩ </body>↩</html>
    - -
    -

    Hinweis: Ein Attributwert, bei welchem geschlossene Anführungszeichen fehlen ist ein offenes Element, da der Rest des Dokumentes als der Wert des Attributes gelesen wird.

    -
    -
    • -
  • "Unclosed element ul": Diese Meldung ist nicht hilfreich, da das {{htmlelement("ul")}}-Element richtig geschlossen wurde. Der Fehler kommt von dem nicht geschlossenen {{htmlelement("a")}}-Element, da dort die schließenden Anführungszeichen, bei einem der Attributwerte fehlen.
    • -
- -

Wenn Sie nicht gleich alle Fehlermeldungen verstehen ist das nicht schlimm. Am besten versucht man, einen Fehler nach dem anderen zu beheben, meistens verschwinden dann auch andere Fehlermeldungen damit. Mehrere Fehlermeldungen können das Resulstat von einem einzigen Fehler im Code sein.

- -

Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner:

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Zusammenfassung

- -

Dies war eine Einführung in die Fehlerbehebung bei HTML-Dokumenten. Dies sollte Ihnen einige nützliche Fähigkeiten vermittelt haben, um Ihre Webseiten zukünftig ordentlich zu halten. Finden Sie selber die Fehler im Code, indem Sie sich das gerenderte HTML-Dokument im Browser anschauen oder nutzen Sie den HTML-Validator.

- -

Dies ist auch das Ende der Artikelreihe des Moduls "Einführung in HTML". Als nächstes kommen zwei Aufgaben, welche Sie alleine bearbeiten sollten, um das Gelernte in die Praxis umzusetzen! Bei der ersten Aufgabe geht es darum, einen Brief mit HTML ordentlich zu formatieren: Aufgabe: Formatieren eines Briefes

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

- -

In this module

- - - -

diff --git a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html deleted file mode 100644 index 696a822668687d..00000000000000 --- a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Struktur in die Webseite bringen -slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -tags: - - Beginner - - Guide - - HTML - - Layout - - Planung - - Sitemap - - Struktur -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -original_slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.

- - - - - - - - - - - - -
Vorwissen:HTML-Grundlagen, wie sie in Lernen Sie HTML kennen abgedeckt werden. HTML Textformatierung, wie in Einfache Textformatierung in HTML abgedeckt wird. Wie Links funktionieren, wie im Artikel Links erstellen beschrieben wird.
Ziel:Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.
- -

Bereiche einer Webseite

- -

Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:

- -
-
header - Kopfbereich
-
Normalerweise ist dies ein breiter Streifen ganz oben auf der Website, in dem eine Überschrift zusammen mit einem Logo untergebracht sind. So sieht man jederzeit auf welcher Website man sich befindet, der header bleibt auf allen Unterseiten gleich.
-
Navigation
-
In der Navigation werden die Links zu den Unterseiten der Website bereitgestellt, meist in Form von Buttons, einfachen Links oder auch Tabs. Dieser Bereich bleibt genauso wie der header auf allen Seiten der Website gleich. Manchmal wird die Navigation direkt mit in den header eingebaut. Ob ein separates Navigationsmenü sinnvoller ist, ist Ansichtssache.
-
Hauptinhalt
-
Der größte Bereich im Zentrum der Webseite, welcher den meisten Inhalt einer Webseite enthält, zum Beispiel Videos, eine Geschichte, eine Karte oder ein Zeitungsartikel. Dieser Part der Website wird sich von Seite zu Seite unterscheiden!
-
Sidebar
-
Zusätzliche Informationen, Links, Zitate, Werbung, usw. Dies wird nicht im Hauptfenster dargestellt, aber meist rechts oder links davon. Der Inhalt bezieht sich oft auf den Hauptinhalt. Bei einem Zeitungsartikel könnte die Sidebar zum Beispiel Zusatzinformationen, Informationen zum Autor oder Links zu ähnlichen Artikeln enthalten. Manchmal wird in der Sidebar auch ein zweites Navigationsmenü untergebracht oder anderer Inhalt, der auf allen Seiten gleich ist.
-
footer - Fußbereich
-
Ein Streifen am Ende der Webseite, welcher oft in kleiner Schrift Informationen zum Impressum, Copyright und Kontaktinformationen bereit stellt. Es sind wichtige Informationen für Interessierte, aber für die meisten Webseitenbenutzer nicht relevant. Manchmal wird hier auch eine Sitemap zur Verfügung gestellt.
-
- -

Eine „typische Webseite“ könnte wie folgt strukturiert werden:

- -

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

- -

Inhalte strukturieren mit HTML

- -

Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen.

- -

Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?

- -
-

Hinweis: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa 285 Millionen Menschen, während die Gesamtpopulation bei 7 Billionen Menschen liegt.

-
- -

Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche Funktion sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden.

- -

Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:

- -
    -
  • Header/Kopfbereich: {{htmlelement("header")}}.
    • -
  • Navigations Menü: {{htmlelement("nav")}}.
    • -
  • Hauptinhalt: {{htmlelement("main")}}, mit einigen verschiedenen Untersektionen, repräsentiert mit {{HTMLElement("article")}}, {{htmlelement("section")}} und {{htmlelement("div")}} Elementen.
    • -
  • Sidebar: {{htmlelement("aside")}}; wird oft innerhalb {{htmlelement("main")}} platziert.
    • -
  • Footer/Fußbereich: {{htmlelement("footer")}}.
    • -
- -

Aktives Lernen: Den Code aus dem Beispiel verstehen

- -

Das Beispiel oben basiert auf dem folgenden Code (Man kann dieses Beispiel auch auf GitHub finden). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Titel der Webseite</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird -->
-
-    <header>
-      <h1>Header</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Our team</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Hier kommt der Hauptinhalt unserer Webseite -->
-    <main>
-
-      <!-- Es enthält einen Artikel -->
-      <article>
-        <h2>Article heading</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>subsection</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Another subsection</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen-->
-      <aside>
-        <h2>Related</h2>
-
-        <ul>
-          <li><a href="#">Oh I do like to be beside the seaside</a></li>
-          <li><a href="#">Oh I do like to be beside the sea</a></li>
-          <li><a href="#">Although in the North of England</a></li>
-          <li><a href="#">It never stops raining</a></li>
-          <li><a href="#">Oh well...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. -->
-
-    <footer>
-      <p>©Copyright 2050 by nobody. All rights reversed.</p>
-    </footer>
-
-  </body>
-</html>
- -

Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.

- -

Die HTML-Layout-Elemente

- -

Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer HTML Elemente Referenz finden.

- -
    -
  • {{HTMLElement('main')}} ist für den Hauptbereich der Webseite und stellt gewöhnlich Inhalte dar, die nur auf dieser einen Seite zu sehen sind. <main> sollte nur einmal pro Webseite genutzt werden und sollte direkt im {{HTMLElement('body')}} stehen und nicht innerhalb anderer Elemente.
    • -
  • {{HTMLElement('article')}} umschließt einen Block von zusammenhängendem Inhalt, der auch ohne den Rest der Webseite stehen könnte (z.B. ein einzelner Blogpost).
    • -
  • {{HTMLElement('section')}} ist ähnlich wie <article>, aber eher für das Gruppieren von Bereichen mit bestimmter Funktionalität (z.B. eine Minikarte oder einige Artikel-Überschriften und Zusammenfassungen). Es ist gute Praxis, jede section mit einer Überschrift zu starten. Man kann <article>s in mehrere <section>s aufteilen und umgekehrt, es geht beides.
    • -
  • {{HTMLElement('aside')}} enthält Inhalte, die nicht direkt mit dem Hauptinhalt zusammenhängen, aber als Zusatzinformationen dienen können (Biografie des Autors, Links zu weiterführenden Informationen)
    • -
  • {{HTMLElement('header')}} stellt eine Gruppe von einführenden Inhaltselementen dar. Wenn es innerhalb des {{HTMLElement('body')}}-Tags steht, definiert es einen globalen Kopfbereich für die Webseite, aber wenn es innerhalb von einem {{HTMLElement('article')}} oder {{HTMLElement('section')}} Element steht, dann stellt es einen Kopfbereich nur für diese Sektion dar. (Achtung! Verwechslungsgefahr mit Titel und Überschriften
    • -
  • {{HTMLElement('nav')}} enthält das Hauptnavigationsmenü für die Seite. Zweitrangige Links würden nicht hier hin gehören.
    • -
  • {{HTMLElement('footer')}} stellt eine Gruppe von Inhalten am Ende der Webseite dar.
    • -
- -

Nicht-semantische Container

- -

Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.

- -

{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:

- -
<p>Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte <span class="editor-hinweis">[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]</span>.</p>
- -

In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.

- -

{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:

- -
<div class="einkaufswagen">
-  <h2>Einkaufswagen</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Silber Ohrringe</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Kosten gesamt: $237.89</p>
-</div>
- -

Dies ist nicht wirklich Inhalt für <aside>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <section> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <div> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.

- -
-

Warnung: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.

-
- -

Zeilenumbruch und Horizontale Linien

- -

Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:

- -

<br> stellt einen Zeilenumbruch innerhalb eines Absatzes(

- -

) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:

- -
<p>There once was a girl called Nell<br>
-Who loved to write HTML<br>
-But her structure was bad, her semantics were sad<br>
-and her markup didn't read very well.</p>
- -

Ohne die <br> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn HTML ignoriert Whitespace. Mit den
- Elementen im Code wird der Absatz wie folgt dargestellt:

- -

There once was a girl called Nell
- Who loved to write HTML
- But her structure was bad, her semantics were sad
- and her markup didn't read very well.

- -

<hr> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:

- -
<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p>
-<hr>
-<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>
- -

Würde wie folgt aussehen:

- -

Die Katze lief aus dem Haus, um die Sonne zu genießen.

- -
-

Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.

- -

Planung einer einfachen Webseite

- -

Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!

- -
    -
  1. Denken Sie daran, welche Elemente auf allen Seiten gleich sein sollen, z.B. das Navigationsmenü und der Footerbereich. Wenn die Webseite für ein Buisness ist, dann ist es zum Beispiel sinnvoll, die Kontaktinformationen auf jeder Unterseite im Footer zu haben. Notieren Sie, was auf jeder Unterseite gleich sein soll. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. -
  2. Als nächstes zeichnen Sie eine grobe Skizze, wie die Struktur der Webseite aussehen soll, auf ein Blatt Papier. Machen Sie das für jede Unterseite der Webpräsenz. Schreiben Sie dazu, für was jede der Sektionen ist. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. -
  3. Jetzt überlegen Sie welche Inhalte auf der Website zu finden sein sollen, welche nicht auf allen Unterseiten gleich sind. Schreiben Sie ruhig eine große Liste. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. -
  4. Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. -
  5. Als letztes Skizzieren Sie eine grobe Sitemap - zeichnen Sie einen Kreis für jede Unterseite und ziehen Sie linien, um die Verlinkungen zwischen den Seiten deutlich zu machen. Wahrscheinlich ist die Startseite in der Mitte und von ihr gehen fast alle Links zu den Unterseiten. Die meisten Unterseiten einer kleinen Website, sollten über das Navigationsmenü zugänglich sein. Notieren Sie zusätzlich wie die Seiten präsentiert werden sollen. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. -
- -

Aktives Lernen: Erstellen Sie eine eigene Sitemap

- -

Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?

- -
-

Hinweis: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.

-
- -

Zusammenfassung

- -

Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- - - -

In diesem Modul

- - diff --git a/files/de/learn/html/introduction_to_html/getting_started/index.html b/files/de/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 3b9f7a2a4f190d..00000000000000 --- a/files/de/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,572 +0,0 @@ ---- -title: Lerne HTML kennen -slug: Learn/HTML/Introduction_to_HTML/Getting_started -tags: - - Anfänger - - Attribut - - Beginner - - Charakter-Referenz - - Element - - Guide - - HTML - - Kommentar - - Leerraum - - Modul - - whitespace -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started -original_slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

In diesem Artikel werden wir Ihnen die Grundlagen von HTML beibringen. Wir werden definieren was Elemente, Attribute und einige andere Begriffe, die sie im Zusammenhang mit dieser Sprache kennen lernen werden, sind. Wir zeigen auch wie ein HTML Element strukturiert ist, wie eine typische HTML Webseite aufgebaut ist und erklären weitere wichtige Grundlagen dieser Sprache. Währenddessen können Sie oft mit HTML-Code experimentieren.

- - - - - - - - - - - - -
Vorbereitungen:grundlegende Computerkenntnisse, notwendige Software installiert und wissen wie man Dateien nutzt.
Ziel: -

Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.

-
- -

Was ist HTML?

- -

HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:

- -
Meine Katze ist sehr frech.
- -

Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, das es sich um einen Absatz handelt:

- -
<p>Meine Katze ist sehr frech.</p>
- -

Aufbau eines HTML-Elements

- -

Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.

- -

- -

Die Hauptteile unseres Elements sind:

- -
    -
  1. Das öffnende Tag: Diese besteht aus dem Namen des Elements (in diesem Fall ein p für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
    2. -
  2. Der Inhalt: Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.
    3. -
  3. Das schließende Tag: Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
    4. -
  4. Das Element: Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.
    5. -
- -

Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element

- -

Editieren Sie den Text unten im Input-Feld. Heben Sie den Text mit dem <em>-Element hervor. (schreiben sie ein <em>-Tag vor den Text, um das Element zu öffnen und fügen sie ein </em>-Tag am Ende des Textes an, um das Element zu schließen) Dies sollte den Text kursiv darstellen. Sie sollten die Änderungen live in dem Output-Feld sehen können.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

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

- -

Elemente verschachteln

- -

Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird Verschachteln genannt. Wenn wir hervorheben wollen, das unsere Katze sehr schlecht gelaunt ist, können wir das Wort "sehr" in ein <strong>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:

- -
<p>Meine Katze ist <strong>sehr</strong> frech.</p>
- -

Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <p>-Element geöffnet, dann das <strong>-Element geöffnet. Deswegen müssen wir zuerst wieder das <strong>-Element schließen, bevor wir das <p>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:

- -
<p>Meine Katze ist <strong>sehr frech.</p></strong>
- -

Die Elemente müssen in der korrekten Reihenfolge geöffnet und geschlossen werden, so dass eines eindeutig innerhalb von dem anderen Element liegt. Wenn die Elemente überlappen, dann muss der Browser versuchen zu entscheiden, welches Element innerhalb sein soll und es können unerwartete Resultate herauskommen. Also passen Sie darauf auf.

- -

Blockelemente und Inlineelemente

- -

Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.

- -
    -
  • Blockelemente bilden eine sichtbare Box auf der Webseite - sie erscheinen in einer neuen Zeile, egal was für ein Inhalt vor diesem Element steht und aller Inhalt nach diesem Element wird ebenfalls auf eine neue Zeile geschoben. Blockelemente machen die Struktur der Webseite aus, sie repräsentieren Absätze, Listen, Navigationsmenüs oder die Fußzeile. Ein Blockelement kann nicht innerhalb von einem Inlineelement stehen, es kann aber innerhalb anderer Blockelemente sein.
    • -
  • Inlineelemente sind die Elemente welche immer innerhalb eines Blockelements stehen und nehmen nur den Platz direkt innerhalb einer Zeile (engl.: line) ein. Inlineelemente starten keine neue Zeile, normallerweise erscheinen Sie innerhalb eines Textabsatzes. Zum Beispiel sind die Elemente {{htmlelement("strong")}} und {{htmlelement("em")}} Inlineelemente.
    • -
- -

Schauen Sie sich folgendes Beispiel an:

- - - -

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

- -

{{htmlelement("em")}} ist ein Inlineelement. Sie können oben sehen, das die ersten drei Elemente in einer Zeile sind, ohne Zwischenräume zwischen den Elementen. {{htmlelement("p")}} ist ein Blockelement, welches jeweils eine neue Zeile für sich alleine einnimmt, mit Platz darüber und darunter.

- -
-

Notiz: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in Element content categories, (auf Englisch). Diese Definitionen sind akkurater als die beiden, welche wir hier vorgstellt haben, sie sind aber auch viel komplizierter. In diesem Modul bleiben wir bei unseren Block- und Inlineelementkategorien.

-
- -
-

Notiz: Sie können auf MDN hilfreiche Referenzseiten finden - für alle Blockelemente und Inlineelemente.

-
- -

Leere Elemente

- -

Nicht alle Elemente folgen dem obigen Muster, mit einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Manche Elemente brauchen nur einen einzigen Tag, welcher meist genutzt wird, um etwas in eine Seite einzubetten, an der Stelle wo das Tag steht. Zum Beispiel zeigen wir das {{htmlelement("img")}}-Element, welches genutzt wird um eine Bilddatei einzubinden:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Der Code würde folgende Webseite im Browser anzeigen:

- -

{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}

- -

Attribute

- -

Elemente können auch Attribute enthalten, dass sieht dann so aus:

- -

- -

Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.

- -

In unserem Beispiel ist der Name des Attributes class und editor-note ist der diesem Attribut zugeordnete Wert.

- -

Ein Attribut sollte immer haben:

- -
    -
  1. Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
    2. -
  2. Den Attributnamen, gefolgt von Gleichheitszeichen
    3. -
  3. Anführungs- und Schlusszeichen um den Wert. (bsp. "editor-note")
    4. -
- -

Aktives Lernen: Hinzufügen von Attributen zu einem Element

- -

Ein weiteres Beispiel für ein Element ist {{htmlelement("a")}} — dies steht für Anker (engl.:anchor) und macht aus dem Text den es umschließt einen Hyperlink. Dieses Element kann einige Attribute annehmen, hier sind einige von ihnen:

- -
    -
  • href: Dieses Attribut bestimmt die Webadresse, zu welcher der Link einen leiten soll, wenn man auf diesen klickt. Zum Beispiel könnte das so aussehen: href="https://www.mozilla.org/".
    • -
  • title: Das title Attribut bestimmt Extrainformationen über den Link, zum Beispiel zu welcher Seite der Link führt. Dies erscheint als Tooltip, wenn man mit der Maus darüber fährt. Beispiel: title="The Mozilla homepage".
    • -
  • target: Das target Attribut bestimmt wie der Link vom Browser geöffnet werden soll. Zum Beispiel bestimmt target="_blank" das die angegebene Webseite in einem neuen Tab geöffnet werden soll. Wenn die Webseite in dem aktuellen Tab geöffnet werden soll, kann man dieses Attribut einfach weglassen, da Browser dies standardmäßig tun.
    • -
- -

Editieren Sie unten im Input-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <a>-Element hinzu. Danach fügen sie das href-Attribut und das title-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem target-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im Output-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des title-Attributes anzeigt, wenn man mit dem Mauszeiger darüberfährt und wenn mn daraufklickt sollte der Link zu der entsprechenen Webadresse führen, welche sie im href-Attribut angegeben haben. Denken Sie daran, dass Sie ein Leerzeichen zwischen dem Element und dem ersten Attribut haben müssen und jeweils zwischen den Attributen.

- -

Wenn Sie einen Fehler machen können Sie das Input-Feld jederzeit mit dem Reset-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 300) }}

- -

Boolsche Attribute

- -

Sie werden manchmal Attribute sehen, welche ohne Wert geschrieben sind und das ist so erlaubt. Es handelt sich um Boolsche Attribute und diese können nur einen Wert annehmen, welcher meist derselbe ist, wie der Name des Attributs. Als Beispiel zeigen wir das {{htmlattrxref("disabled", "input")}}-Attribut, welches Sie einem <input>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <input>-Feld wird ausgegraut und man kann keine Daten eingeben.

- -
<input type="text" disabled="disabled">
- -

Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

Beide werden Ihnen das folgende Resultat ausgeben:

- -

{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}

- -

Anfuehrungszeichen um Attributwerte weglassen

- -

Wenn Sie sich etwas im Internet umschauen, werden Sie immer wieder auf merkwürdige Benutzung von HTML-Code stoßen. Dazu gehören auch Attributwerte ohne Anführungszeichen. Dies funktioniert an manchen Stellen, woanders kann es den ganzen Code kaputt machen. Wir schauen uns noch einmal unser Beispiel mit dem Link an. Wir könnten das auch wie folgt schreiben, wenn wir nur das href-Attribut benutzen:

- -
<a href=https://www.mozilla.org/>Lieblingswebseite</a>
- -

Wenn wir aber das title-Attribut hinzufügen, dann funktioniert es so nicht mehr:

- -
<a href=https://www.mozilla.org/ title=Die Mozilla Webseite>Lieblingswebseite</a>
- -

An diesem Punkt wird der Browser diesen Code falsch lesen und in dem title-Attribut drei separate Attribute sehen: ein title-Attribut mit dem Wert "Die" und zwei Boolsche Attribute, Mozilla und Webseite. Dies ist nicht was wir gewollt haben und der Fehler führt zu unerwünschtem Verhalten, siehe unten. Versuchen Sie mit dem Mauszeiger über dem Link zu fahren, um zu sehen was der Titeltext ist.

- -

{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}

- -

Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.

- -

Einfache oder doppelte Anführungszeichen?

- -

In diesem Artikel sind alle Attributwerte in doppelte Anführungszeichen eingepackt. Sie werden woanders aber eventuell sehen, das Leute anstattdessen einfache Anführungszeichen benutzen. Es ist egal welche Sorte Anführungszeichen genutzt wird, Sie können das machen wie Sie möchten. Beide der folgenden Zeilen sind äquivalent:

- -
<a href="http://www.example.com">Ein Link als Beispiel.</a>
-
-<a href='http://www.example.com'>Ein Link als Beispiel.</a>
- -

Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!

- -
<a href="http://www.example.com'>Ein Link als Beispiel.</a>
- -

Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:

- -
<a href="http://www.example.com" title="Ist's nicht lustig?">Ein Link als Beispiel.</a>
- -

Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie HTML entities nutzen.

- -

Aufbau eines HTML-Dokumentes

- -

Jetzt wissen Sie wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um ein funktionierendes HTML-Dokument aufzubauen. Schauen Sie sich diesen Code an:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Meine Testseite</title>
-  </head>
-  <body>
-    <p>Dies ist meine Webseite.</p>
-  </body>
-</html>
- -

Hier haben wir:

- -
    -
  • <!DOCTYPE html> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.
    • -
  • <html></html> — das <html> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet
    • -
  • <head></head> — das <head> Element. In dieses Element ist alles eingeschlossen, was nicht auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.
    • -
  • <body></body> — das <body> Element. Dies beinhaltet alles, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.
    • -
  • <meta charset="utf-8"> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf utf-8, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.
    • -
  • <title></title> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.
    • -
- -

Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein

- -

Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:

- -
    -
  1. Kopieren Sie das obige HTML-Dokument.
    2. -
  2. Erstellen Sie eine neue leere Datei in Ihrem Texteditor.
    3. -
  3. Fügen Sie den Code in die leere Datei ein.
    4. -
  4. Speichern Sie die Datei unter dem Namen index.html.
    5. -
- -
-

Notiz: Sie können dieses HTML-Grundgerüst auch im MDN Learning Area Github repository finden.

-
- -

Sie können die Datei nun in einem Webbrowser öffnen, um zu sehen wie die Webseite aussieht. Dann können Sie den HTML-Code editieren und die Datei speichern. Wenn Sie dann die Datei im Browser neu laden, sehen Sie die Veränderungen. Am Anfang sieht die Webseite im Browser so aus:

- -

A simple HTML page that says This is my pageDiese Übung können Sie also lokal auf Ihrem Computer durchführen, wie oben beschrieben, oder Sie können die Übung mit unserem editierbaren Beispiel unten machen (das editierbare Fenster repräsentiert nur den Inhalt des {{htmlelement("body")}}-Elements). In der Übung sollen Sie die folgenden Dinge auf Ihrer Webseite implementieren:

- -
    -
  • Fügen Sie direkt unter dem öffnenden Tag des {{htmlelement("body")}}-Elements eine Überschrift ein. Dieser sollte ein <h1>-Tag vorangestellt sein und ein </h1>-Tag hintenan stehen.
    • -
  • Schreiben Sie in den Absatz (<p>) etwas Text über etwas, das Sie interessiert.
    • -
  • Lassen Sie wichtige Wörter in fetter Schrift erscheinen, indem Sie das <strong>-Element benutzen.
    • -
  • Fügen Sie einen Link (<a>) innerhalb des Absatzes hinzu.
    • -
  • Fügen Sie ein Bild (<img>) hinzu, direkt unter dem Absatz. Sie bekommen einen Bonuspunkt, wenn Sie es schaffen zu einem anderen Bild zu verlinken (entweder lokal auf ihrem Computer oder irgendwo im Internet.)
    • -
- -

Wenn Sie einen Fehler machen können Sie das Input-Feld jederzeit mit dem Reset-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code4', 700, 600) }}

- -

Leerraum in HTML

- -

In dem obigen Beispiel werden Sie bemerkt haben, dass eine Menge Leerraum (engl.: Whitespace) dabei ist. Dies ist nicht notwendig. Die beiden folgenden Codestücke sind äquivalent:

- -
<p>Hunde sind komisch.</p>
-
-<p>Hunde        sind
-         komisch.</p>
- -

Egal wieviel Leerraum sie benutzen (Leerraum sind Leerzeichen, aber auch Zeilenumbrüche), der HTML Parser wird den Leerraum immer zu einem einzigen Leerzeichen zusammenlegen, wenn die Webseite im Browser geladen wird. Wieso sollte man also so viel Leerraum benutzen? Die Antwort ist Lesbarkeit - es ist viel einfacher zu verstehen, was in einem Stück Code vor sich geht, wenn dieser schön formattiert ist und nicht alles ein zusammenhängender Klumpen ist. In unserem HTML-Code haben wir jedes Element das in einem anderen Element steht mit zwei Leerzeichen weiter eingerückt. Sie können selbst entscheiden, wie genau Sie Ihren Code formattieren (z. B. wieviele Leerzeichen Sie zum Einrücken benutzen), aber Sie sollten den Code selber gut lesen können.

- -

Zeichenreferenzen für Sonderzeichen

- -

In HTML sind die Zeichen <, >,",' und & spezielle Zeichen, da sie Teil der HTML Syntax sind. Wie kann man diese also im ausgegebenen Text benutzen, ohne dass diese als Teil des Markups interpretiert werden?

- -

Wir müssen hier Zeichenreferenzen benutzen — spezielle Codes, welche einzelne Zeichen repräsentieren und welche in diesen Fällen genutzt werden können. Jede Zeichenreferenz wird mit einem Und-Zeichen (&) gestartet und mit einem Semikolon (;) beendet.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ausgegebener CharacterZeichenreferenz
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:

- -
<p>In HTML definieren Sie einen Absatz mit dem <p>-Element.</p>
-
-<p>In HTML definieren Sie einen Absatz mit dem &lt;p&gt;-Element.</p>
- -

In dem Live-Output sieht man, dass der erste Absatz falsch dargestellt wird, weil der Browser den Tag nicht wie gewünscht anzeigt, sondern als Beginn eines neuen Absatzes interpretiert. Der zweite Absatz wird durch die Zeichenreferenzen korrekt dargestellt.

- -

{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}

- -
-

Notiz: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: List of XML and HTML character entity references.

-
- -

HTML Kommentare

- -

In HTML, wie auch in den meisten anderen Programmiersprachen, kann man Kommentare schreiben. Kommentare schreibt man in den Code, diese werden aber vom Browser ignoriert und somit unsichtbar für Benutzer der Webseite. Mit Kommentaren kann man als Entwickler des Codes, diesen für sich selbst und andere leichter verständlich machen. Besonders am Anfang ist es sinnvoll sich mit Kommentaren Anmerkungen zu dem geschriebenen Code zu machen, um später nachvollziehen zu können, was ein bestimmtes Stück Code bewirkt. Sie möchen Ihren Code ja auch noch verstehen nachdem Sie mehrere Monate nichts daran gemacht haben, oder dass ein Mitarbeiter ihren Code verstehen kann.

- -

Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <!-- und --> ein, zum Beispiel:

- -
<p>Ich bin nicht in einem Kommentar</p>
-
-<!-- <p>Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!</p> -->
- -

Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.

- -

{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}

- -

Zusammenfassung

- -

Sie haben das Ende des Artikels erreicht und wir hoffen es hat Ihnen etwas Spaß gemacht bei uns die Grundlagen von HTML zu erlernen! An diesem Punkt sollten Sie verstehen, wie diese Sprache aussieht, wie sie funktioniert und in der Lage sein einige Elemente und Attribute zu benutzen. In weiterfürhenden Artikeln aus diesem Modul werden wir einige der Dinge, die Sie hier gelernt haben wieder aufgreifen und uns im Detail anschauen, aber auch neue Möglichkeiten dieser Sprache entdecken. Bleiben Sie dabei!

- -
-

Notiz: Nun, da Sie dabei sind mehr über HTML zu lernen, möchten Sie vielleicht auch schon einmal in die Grundlagen von Cascading Style Sheets, kurz CSS hineinstöbern. CSS ist die Sprache mit der wir unseren Webseiten einen bestimmten Stil geben. Zum Beispiel lassen sich mit CSS die Farben auf der Webseite ändern. HTML und CSS arbeiten Hand in Hand, wie Sie bald entdecken werden.

-
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index 607e02729a6365..00000000000000 --- a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,644 +0,0 @@ ---- -title: Einfache Textformatierung in HTML -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -tags: - - Beginner - - Einführung in HTML - - HTML - - Lernen - - Listen - - Semantik - - Text - - Text formatieren - - Überschriften -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -original_slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Einer der Hauptaufgaben von HTML ist es, Text zu strukturieren und diesem eine bestimmte Bedeutung zu verleihen, damit der Browser den Text im richtigen Kontext darstellen kann. In diesem Artikel wird erklärt, wie man mit {{glossary("HTML")}} Texte formattieren kann. Dazu gehört das hervorheben einzelner Textpassagen, als auch die Darstellung des Textblocks, zum Beispiel als Absatz, Liste oder als Überschrift.

- - - - - - - - - - - - -
Vorwissen:Grundlagen von HTML, wie sie im Artikel Lerne HTML kennen abgedeckt werden.
Ziel:Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.
- -

Überschriften und Absätze

- -

Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.

- -

In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:

- -
<p>Ich bin ein Absatz, ja das bin ich.</p>
- -

Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:

- -
<h1>Ich bin der Titel einer Geschichte.</h1>
- -

Es gibt sechs verschiedene Überschriften-Elemente — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} and {{htmlelement("h6")}}. Jedes dieser Elemente repräsentiert eine andere Gewichtung des Inhalts im Dokument. <h1> repräsentiert die Hauptüberschrift, <h2> repräsentiert Unterüberschriften, <h3> repräsentiert Unter-Überschriften und so weiter.

- -

Struktur schaffen

- -

Als Beispiel würden in einer Geschichte <h1> zum ausweisen des Titels genutzt, <h2> für die Kapitelüberschriften und <h3> um ein Kapitel in mehrere Sektionen zu unterteilen.

- -
<h1>Die erdrückende Langeweile</h1>
-
-<p>Von Chris Mills</p>
-
-<h2>Kapitel 1: Die dunkle Nacht</h2>
-
-<p>Es war eine dunkle Nacht. Irgendwo hörte man eine Eule rufen. Der Regen strömte herab auf... </p>
-
-<h2>Kapitel 2: Die ewige Stille</h2>
-
-<p>Unser Protagonist kann gerade so aus dem Schatten heraus flüstern...</p>
-
-<h3>Der Geist spricht</h3>
-
-<p>Nachdem mehrere Stunden der Stille vorbei gegangen waren, setzte sich plötzlich der Geist aufrecht hin und rief "Bitte habt erbarmen mit meiner Seele!"</p>
- -

Sie können selber entscheiden, wie Sie Struktur in Ihre Texte bringen wollen, so lange die Hierarchie Sinn ergibt. Hier geben wir Ihnen ein paar Ratschläge, um sinnvolle Strukturen zu erschaffen:

- -
    -
  • Sie sollten möglichst nur eine einzige <h1>-Überschrift pro Seite haben — dies ist die Hauptüberschrift des Dokuments und alle anderen Überschriften gehören darunter.
    • -
  • Gehen Sie sicher, das Sie die Überschriften in der richtigen Reihenfolge nutzen. Nutzen Sie nicht <h3>' , um Kapitelüberschriften zu kennzeichnen und darunter dann <h2>', um Unterüberschriften im Kapitel anzuzeigen, denn das macht keinen Sinn und führt zu merkwürdigen Resultaten.
    • -
  • Von den sechs Überschiftenordnungen die es gibt, sollten Sie möglichst nicht mehr als drei pro Seite benutzen, es sei denn es ist wirklich nötig. Dokumente mit zu viel Hierarchien bringen mehr Aufwand mit sich und sie sind schwieriger zu navigieren. Es wäre sinnvoller den entsprechenden Inhalt auf mehrere Seiten zu verteilen.
    • -
- -

Wieso brauchen wir Struktur?

- -

Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: text-start.html Dieses Dokument (ein leckeres Hummus-Rezept) wird uns den ganzen Artikel lang begleiten, also speichern Sie am besten jetzt gleich eine Kopie davon auf Ihrem Computer, um daran mitzuarbeiten. Der body des Dokuments enthält im Moment eine Reihe von Inhalten, welche nicht wirklich strukturiert sind. Einzig ein paar Zeilenumbrüche wurden in dem HTML-Dokument genutzt, um Inhalte voneinander zu trennen (es wurde Enter/Return gedrückt, um zur nächsten Zeile zu springen).

- -

Wenn Sie dieses Dokument im Browser öffnen, werden Sie feststellen, das der Text in einem großen Block angezeigt wird! Die Zeilenumbrüche werden also komplett ignorert.

- -

Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben.

- -

Der Browser findet keine Elemente, die dem Dokument eine Struktur geben, er kann nicht von selbst erkennen was Überschriften, Zeilenumbrüche und Absätze sind. Nachteile einer strukturlosen Webseite:

- -
    -
  • Neue Benutzer einer Webseite scannen diese als erstes nach relevanten Inhalten durch, lesen oft nur die Überschriften und hervorgehobene Textstellen. Wenn Sie nichts brauchbares innerhalb einiger Sekunden finden, dann werden sie die Webseite wieder verlassen.
    • -
  • Suchmaschinen indexieren Ihre Webseite auch anhand der Überschriften. Ohne Überschriften würde eine Webseite sehr schlecht in den Suchergebnissen abschneiden. Stichwort: {{glossary("SEO")}} (Suchmaschinenoptimierung).
    • -
  • Menschen mit Sehbehinderung können eine Webseite nicht lesen. Anstatt dessen wandeln Bildschirmlesegeräte, so genannte Screenreader, die Webseite in gesprochenen Text um. Diese Screenreader benötigen oft die Überschriften eines Dokuments, um die Navigation durch die Webseite zu ermöglichen. Ansonsten würde immer das ganze Dokument komplett vorgelesen, anstatt den Teilen die wirklich von Interesse sind.
    • -
  • Um den Inhalt mit {{glossary("CSS")}} zu stylen oder mit {{glossary("JavaScript")}} interessante Dinge tun zu lassen, braucht es den Inhalt umschließende Elemente, welche als Ziel genutzt werden können.
    • -
- -

Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.

- -

Aktives Lernen: Unserem Inhalt Struktur geben

- -

Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im Input-Feld mittels HTML-Auszeichnungen so, das im Output-Feld eine Überschrift mit zwei Absätzen darunter erscheint.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

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

- -

Warum brauchen wir Semantik?

- -

Wir verlassen uns die ganze Zeit auf Semantik - wir beruhen uns auf Ereignisse, die wir erlebt haben, um die Funktion von Dingen um uns herum zu beurteilen. Wenn wir etwas sehen, dann wissen wir was für eine Funktion dieses haben wird. Zum Beispiel erwarten wir, dass eine rote Ampel "Stop" bedeutet, während ein grünes Ampellicht uns erlaubt weiterzufahren. Dinge können schnell aus dem Ruder laufen, wenn Semantik falsch genutzt wird. (Zum Beispiel wäre es in einem Land, in welchem das rote Ampellicht "Fahren" bedeutet, vielleicht nicht so sicher).

- -

Genauso müssen wir bei unseren Elementen aufpassen, diesen die richtige Bedeutung, Funktion und das entsprechende Aussehen zukommen zu lassen. In diesem Kontext ist das {{htmlelement("h1")}}-Element auch ein sematisches Element, welches dem Text innerhalb der Tags die Rolle bzw. Bedeutung einer "Top-Level-Hauptüberschrift für die Webseite" gibt.

- -
<h1>Dies ist eine Hauptüberschrift.</h1>
- -

Automatisch gibt der Browser diesem Element eine große Schriftgröße, damit es aussieht, wie eine Überschrift (auch wenn Sie es mittels CSS so stylen können, wie sie möchten). Wichtiger noch, der semantische Wert des Elements wird auf verschiedene Weise genutzt. Zum Beispiel greifen Suchmaschinen und Bildschirmlesegeräte darauf zurück (wie oben erklärt).

- -

Sie können jedes Element so aussehen lassen, wie eine Überschrift. Zum Beispiel wie folgt:

- -
<span style="font-size: 32px; margin: 21px 0;">Ist dies eine Top-Level-Überschrift?</span>
- -

Dies ist ein {{htmlelement("span")}}-Element. Es hat keinerlei semantischen Wert. Sie benutzen dieses Element, um Inhalt zu verpacken und als Ziel für CSS oder JavaScript zu nutzen, ohne ihm eine besondere Bedeutung zukommen zu lassen. (Sie werden später mehr darüber heraus finden.) Wir haben CSS benutzt, um dem Text das Aussehen einer Überschrift zu geben. Da es aber keinen sematischen Wert hat, bekommt dieser Text nicht die selbe Bedeutung wie ein echtes Überschriften-Element. Es ist also besser, das richtige HTML-Element für den richtigen Job zu benutzen, auch wenn es anders gehen mag.

- -

Listen

- -

Lassen Sie uns nun Listen anschauen. Listen gibt es überall - von Ihrem Einkaufszettel, über die Liste an Direktionen, welche Sie unbewusst befolgen, um jeden Tag Ihr Haus wiederzufinden, bis hin zu den Listen an Instruktionen, die sie in diesen Tutorials befolgen! Auch im Internet treffen Sie ständig auf Listen. Wir haben hier drei verschiedene Typen, welche Sie auf Ihren Webseiten benutzen können.

- -

Ungeordnete Listen

- -

Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:

- -
Milch
-Eier
-Brot
-Hummus
- -

Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:

- -
<ul>
-Milch
-Eier
-Brot
-Hummus
-</ul>
- -

Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:

- -
<ul>
-  <li>Milch</li>
-  <li>Eier</li>
-  <li>Brot</li>
-  <li>Hummus</li>
-</ul>
- -

Aktives Lernen: Eine ungeordnete Liste auszeichnen

- -

Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

- -

Geordnete Listen

- -

Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:

- -
Fahre bis zum Ende der Straße
-Biege rechts ab
-Fahre geradeaus über die nächsten beiden Verkehrskreisel
-Biege nach dem dritten Kreisel links ab
-Nach 300 Metern ist die Schule auf der rechten Seite
-
- -

Die Auszeichnungsstruktur is dieselbe wie für die ungeordnete Liste, außer das Sie die Listenpunke in ein {{htmlelement("ol")}}-Element einhüllen müssen, anstatt einem <ul>-Element:

- -
<ol>
-  <li>Fahre bis zum Ende der Straße</li>
-  <li>Biege rechts ab</li>
-  <li>Fahre geradeaus über die nächsten beiden Verkehrskreisel</li>
-  <li>Biege nach dem dritten Kreisel links ab</li>
-  <li>Nach 300 Metern ist die Schule auf der rechten Seite</li>
-</ol>
- -

Aktives Lernen: Eine geordnete Liste auszeichnen

- -

Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

- -

Aktives Lernen: Das Hummus-Rezept auszeichnen

- -

An diesem Punkt sollten Sie alle Informationen haben, die Sie brauchen, um unser Hummus-Rezept auf einer Seite mit HTML zu strukturieren. Sie können entweder die hummus-rezept.html Datei herunterladen und lokal auf Ihrem Computer bearbeiten oder die editierbare Codebox unten benutzen. Nur wenn Sie die Aufgabe lokal bearbeiten, können Sie diese auch speichern, um Sie sich später noch einmal anzuschauen. Was Sie im Browser bearbeiten ist beim nächsten Besuch verloren. Also überlegen Sie es, wie Sie es machen möchten.

- - - -

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

- -

Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf Lösung anzeigen sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, text-complete.html, auf GitHub anschauen.

- -

Listen ineinander schachteln

- -

Listen können ineinander verschachtelt werden. Vielleicht möchten Sie Unterpunke unter einem Listenpunkt haben. Lassen Sie uns das anhand der zweiten Liste in unserem Rezept anschauen:

- -
<ol>
-  <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>
-  <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>
-  <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>
-  <li>Pürieren Sie die Zutaten zu einer Paste.</li>
-  <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>
-  <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>
-</ol>
-
- -

Da die letzten beiden Listenpunkte sich auf den Punkt davor beziehen, könnte man diese zusammen unter dem vierten Listenpunkt einordnen, in einer ungeordneten Liste. Das würde so aussehen:

- -
<ol>
-  <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>
-  <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>
-  <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>
-  <li>Pürieren Sie die Zutaten zu einer Paste.</li>
-  <ul>
-    <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>
-    <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>
-  </ul>
-</ol>
-
- -

Gehen Sie zurück zur obigen Aufgabe und fügen Sie eine Liste einer der vorhandenen beiden Listen hinzu. Wenn Sie damit fertig sind, sollte das Rezept so ähnlich aussehen:

- -

Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben.

- -

Betonung und Wichtigkeit

- -

Während wir sprechen, betonen wir oft bestimmte Wörter, um Ihre Bedeutung im Satz zu ändern. Solche Wörter möchten wir in einem Text hervorheben. HTML stellt verschiedene sematnische Elemente zur Verfügung, um dies zu bewerkstelligen. In dieser Sektion schaune wir uns einige der geläufigsten Formen davon an.

- -

Betonung

- -

Wenn wir eine bestimmte Betonung in der gesprochenen Sprache erreichen wollen, dann heben wir bestimmte Wörter hervor, um ihre Bedeutung leicht zu verändern. Ähnlich heben wir solche Wörter in geschriebener Sprache hervor, indem wir ein Wort kursiv schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.

- -

Ich bin froh, dass du nicht zu spät bist.

- -

Ich bin froh, dass du nicht zu spät bist.

- -

Der erste Satz klingt danach, das jemand wirklich erleichtert ist, das die Person nicht zu spät ist, der zweite Satz klingt hingegen eher sarkastisch, mit einem Klang von Vorwurf, da die Person sich etwas verspätet hatte.

- -

In HTML benutzen wir das {{htmlelement("em")}}-Element (von engl.:emphasis = Betonung), um solche Wörter hervorzuheben. Es macht ein Dokument etwas interessanter zu lesen. Auch Bildschrimlesegeräte können so eine besondere Betonung erkennen und nutzen. Browser zeigen den Text im Element normalerweise kursiv an, doch Sie sollten das Tag nicht einizig dazu benutzen, Text kursiv anzuzeigen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("i")}}-Element (siehe weiter unten).

- -
<p>Ich bin <em>froh</em> dass du nicht <em>zu spät</em>bist.</p>
- -

Wichtige Wörter

- -

Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in Fettschrift in geschriebener Sprache. Zum Beispiel:

- -

Diese Flüssigkeit ist sehr giftig.

- -

Ich zähle auf dich. Sei nicht zu spät!

- -

In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: strong = stark/fett) um solche Wörter hervorzuheben. Es macht das Dokument lesbarer und auch hier können Screenreader erkennen, dass Wörter besonders betont ausgelesen werden sollten. Browser zeigen den Inhalt dieses Elements in Fettschrift an, aber Sie sollten diesen Tag nicht alleine dafür verwenden, Schrift fett erscheinen zu lassen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("b")}}-Element (siehe weiter unten).

- -
<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p>
-
-<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p>
- -

Sie können <strong>-Elemente und <em>-Elemente ineinander verschachteln:

- -
<p>Diese Flüssigkeit ist <strong>sehr giftig</strong> —
-wenn Sie diese trinken, <strong>dann werden Sie <em>sterben</em></strong>.</p>
- -

Aktives Lernen: Lassen Sie uns wichtig sein!

- -

In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <strong>-Elemente und <em>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

- -

Kursiv, fett, unterstrichen...

- -

Die beiden Elemente, die wir oben besprochen haben, haben eine eindeutige semantische Bedeutung. Die Situation ist etwas anders mit den {{htmlelement("b")}}, {{htmlelement("i")}} und {{htmlelement("u")}}-Elementen. Sie wurden erschaffen, um Leuten die Möglichkeit zu geben Text in fett (engl.:bold), kursiv (engl.:italic) oder unterstrichen (engl.:underlined) anzuzeigen, in einer Zeit in welcher CSS noch nicht von allen Browsern unterstützt wurde. Solche Elemente, welche nur das Aussehen, aber nicht die Bedeutung, verändern, nennt man auch präsentationsbezogenes Element. Sie sollten nach Möglichkeit nicht mehr benutzt werden, denn wie wir gesehen haben, ist eine gute Semantik sehr wichtig für Suchmaschinen und Barrierefreiheit.

- -

In HTML5 wurden <b>, <i> und <u> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.

- -

Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <b>, <i> oder <u> zu benutzen, um die Bedeutung der traditionellen Nutzung von fettem, kursivem oder unterstrichenem Text zu geben, wenn es kein passenderes Element gibt. Denken Sie aber immer auch an die Barrierefreiheit Ihrer Webseite. Leute, welche Screenreader benutzen, können mit kursivem Text, ohne Bedeutung, nichts anfangen. Auch funktioniert es möglicherweise nicht mit einem anderen, als dem Lateinischen Buchstabensystem.

- -
    -
  • {{HTMLElement('i')}} wird benutzt, um die traditionelle Rolle von kursivem Text anzuzeigen: Fremdwörter, Taxonomische Begriffe, Fachwörter, Gedanken...
    • -
  • {{HTMLElement('b')}} wird benutzt, um die traditionelle Rolle von fettem Text anzuzeigen: Stichwörter, Produktnamen, wichtige Sätze...
    • -
  • {{HTMLElement('u')}} wird benutzt, um die traditionelle Rolle von unterstrichenem Text anzuzeigen: richtige Namen, Rechtschreibfehler...
    • -
- -
-

Hinweis:Eine Warnung zu unterstrichenem Text: Unterstrichener Text wird stark mit Hyperlinks assoziiert. Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <u>-Element, wo es passt, aber passen Sie möglicherweise mit CSS an, damit der Text anders aussieht, als die Links auf Ihrer Webseite. Unten können Sie sehen, wie das gemacht werden kann.

-
- -
<!-- Wissenschaftliche Namen -->
-<p>
-  Der winzige Rubinkehlkolibri (<i>Archilochus colubris</i>) ist ein auffallend farbenprächtiger Vogel, der in den östlichen Teilen der USA und Kanadas anzutreffen ist.
-</p>
-
-<!-- Fremdwörter -->
-<p>
-  Das Menü bestand aus einer Fülle an extosichen Wörtern, zum Beispiel <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> und <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- Ein bekannter Schreibfehler -->
-<p>
-  Eines Tages werde ich lernen, wie man <u>bessser</u> buchstabiert.
-</p>
-
-<!-- Stichpunkte in einer Anleitung hervorheben -->
-<ol>
-  <li>
-    <b>Schneiden</b> Sie zwei Scheiben Brot ab.
-  </li>
-  <li>
-    <b>Legen</b> Sie eine Tomate und ein Salatblatt zwischen die Brotscheiben.
-  </li>
-</ol>
- -

Zusammenfassung

- -

Sie haben es geschafft! Dieser Artikel sollte Ihnen beigebracht haben wie Sie Text mit HTML-Elementen strukturieren können. Es wurden die wichtigsten Eltemente dafür vorgeführt. Es gibt weitere Möglichkeiten, Texten eine bestimmte semanitsche Bedeutungen zukommen zu lassen. Wir werden uns diese im Artikel "Fortgeschrittene Textformatierung" anschauen. Im nächsten Artikel geht es erst einmal darum, wie man Hyperlinks erstellt, das wichtigste Element im Internet.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/introduction_to_html/index.html b/files/de/learn/html/introduction_to_html/index.html deleted file mode 100644 index 8f7fb3f00a60f9..00000000000000 --- a/files/de/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Einführung in HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - Einführung in HTML - - HTML - - Kopf - - LandingPage - - Lernen - - Links - - Struktur - - Textformatierung - - head -translation_of: Learn/HTML/Introduction_to_HTML -original_slug: Learn/HTML/Einführung_in_HTML ---- -
{{LearnSidebar}}
- -

{{glossary("HTML")}} ist eine relativ einfache Sprache, die aus Elementen aufgebaut ist. Diese Elemente können auf verschiedene Textstücke angewandt werden, um ihnen verschiedene Bedeutungen zuzuschreiben (Ist es ein Absatz, eine Liste oder Teil einer Tabelle?), um ein Dokument sinnvoll zu strukturieren (Gibt es eine Kopfzeile? Ist der Inhalt in drei Spalten gegliedert? Gibt es ein Navigationsmenü?) und um Inhalte, wie Videos und Bilder einzubetten. Dieses Modul wird sich mit den ersten Beiden dieser Punkte beschäftigen und die fundamentalen Konzepte und Syntax einführen, die Sie zum Verständnis von HTML kennen müssen.

- -

Voraussetzungen

- -

Sie benötigen für dieses Modul keine HTML Kenntnisse, allerdings sollten Sie grundsätzlich mit Computern umgehen können und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren). Sie sollten sich bereits eine einfache Arbeitsumgebung eingerichtet haben, wie in Notwendige Software installieren beschrieben; und wissen wie Sie Ihre Dateien erstellen und ordnen, wie in Dateien nutzen erklärt. Beide Artikel sind Teil unserer Artikelserie Lerne das Internet kennen, welche das Grundwissen abdeckt, welches in diesem Modul vorrausgesetzt wird.

- -
-

Hinweis: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie JSBin oder Thimble ausprobieren.

-
- -

Lerneinheiten

- -

Dieses Modul enthält die folgenden Lerneinheiten, die Ihnen HTML in Theorie und Praxis näher bringen. Es werden viele Möglichkeiten geboten, in denen Sie Ihre neu erworbenen Fähigkeiten ausprobieren können.

- -
-
Lernen Sie HTML kennen
-
Hier lernen Sie die absoluten Grundlagen von HTML. Für den Anfang werden wir Begriffe, wie "Elemente", "Attribute" und andere wichtige Begriffe definieren und deren Einordung in die Sprache vornehmen. Wir zeigen Ihnen, wie eine HTML-Webseite typischerweise aufgebaut ist, wie eine HTML-Elemente strukturiert sind und erklären weitere grundlegende Sprachfunktionen. Sie können zwischendurch immer wieder mit HTML-Code spielen, damit sie ein Gefühl für die Zusammenhänge bekommen.
-
Was gehört in den Kopf der HTML-Datei?
-
Der Kopf (Head) eines HTML Dokuments ist der Teil, der nicht im Browser angezeigt wird, wenn dieses geladen wird. Im Kopf sind Zusatzinformationen zur Webseite enthalten, zum Beispiel das {{htmlelement("title")}}-Element, das den Titel der Webseite enthält, Links zu {{glossary("CSS")}}-Dateien (mit welchen die Webseite gestaltet wird) und Metadaten (z. B. wer der Autor der Webseite ist und Schlagwörter, welche Suchmaschinen helfen Ihre Webseite einzuordnen).
-
Einfache Textformatierung in HTML
-
Eine der Hauptaufgaben von HTML ist es, jedem Textteil Informationen zu seiner Bedeutung im Kontext zukommen zu lassen (auch Semantics genannt), damit der Browser weiß, wie der Textteil darzustellen ist. In diesem Artikel lernen Sie, wie man mit HTML einen Textblock in Überschriften und Absätze strukturiert, Hervorhebungen und Gewicht zu Wörtern hinzufügt, Listen erstellt und vieles mehr.
-
Erstellen von Hyperlinks
-
Hyperlinks sind sehr wichtig, denn erst Sie machen das Internet zu einem Netzwerk. Dieser Artikel behandelt die Syntax eines Links und bespricht allgemeine Richtlinien zu Links.
-
Fortgeschrittene Textformatierung
-
Es gibt, neben den im Artikel Einfache Textformatierung in HTML erläuterten, viele weitere HTML-Elemente, mit denen man Texte formatieren kann. Diese HTML-Elemente sind nicht ganz so bekannt, aber es ist dennoch hilfreich, sie zu kennen. Hier lernen Sie, wie man Zitate einbindet, Description Lists (dt. etwa: beschreibende Listen) erstellt, Computer-Code und ähnlichen Text darstellt, Hoch- und Tiefstellung erreicht, Kontaktinformationen anordnet und einiges mehr.
-
Struktur in die Webseite bringen
-
Sie können mit HTML sowohl individuelle Teile der Webseite (wie "einen Absatz" oder "ein Bild"), aber auch ganze Abschnitte der Seite formatieren (wie "die Kopfzeile", "das Naviagtionsmenü" oder "die Hauptinhaltsspalte"). In diesem Artikel geht es um das planen einer grundlegenden Webseitenstruktur und die anschließende Umsetzung dieser Struktur in HTML.
-
Fehlersuche in HTML
-
HTML schreiben zu können ist gut, aber was können Sie tun, wenn etwas nicht funktioniert und Sie den Fehler im Code nicht finden? Dieser Artikel stellt ein paar Werkzeuge vor, die Ihnen bei der Fehlersuche helfen können.
-
- -

Aufgaben

- -

Die folgenden Übungsaufgaben überprüfen Ihr Verständnis der in den obigen Lerneinheiten behandelten HTML-Grundlagen.

- -
-
Formatieren Sie einen Brief
-
Wir lernen früher oder später alle, einen formalen Brief zu schreiben. Darüber hinaus ist es auch ein schönes Beispiel um den Wissenstand im Bereich der Textformatierung unter Beweis zu stellen. In dieser Aufgabe sollen Sie einen vorgegebenen Brief mit HTML formatieren.
-
Strukturieren Sie eine Webseite
-
In dieser Übungsaufgabe wird Ihre Fähigkeit getestet, mit HTML eine einfache Webseite zu strukturieren. Diese enthält eine Kopfzeile, eine Fußzeile, ein Navigationsmenü, eine Hauptspalte und eine Randspalte.
-
- -

Siehe auch

- -
-
Webgrundlagen Basiskurs 1 (Englisch)
-
Ein exzellenter Kurs der Mozilla Foundation, der viele Inhalte des Einführung in HTML Moduls, anwendet und festigt. Die Lernenden machen sich in diesem sechsteiligen Modul mit dem Lesen, Schreiben und Teilnehmen im Internet vertraut. Entdecken Sie die Fundamente des Internets durch Erschaffen und Zusammenarbeit.
-
diff --git a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html deleted file mode 100644 index cc49c67420fc84..00000000000000 --- a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Marking up a letter -slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -tags: - - Anfänger - - Brief - - HTML - - Links - - Text - - head -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -original_slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
- -

Wir alle lernen früher oder später einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Textformatierungsfähigkeiten zu testen! Sie erhalten einen Brief, mit dem Sie grundlegende und fortgeschrittene HTML-Formatierungsmöglichkeiten, einschließlich Hyperlinks, testen können und wir werden Ihre Vertrautheit mit einigen HTML <head> Inhalten testen.

- - - - - - - - - - - - -
Vorwissen:Bevor Sie diese Überprüfung durchführen, sollten Sie bereits Lernen Sie HTML kennen, Was gehört in den Kopf? Metadaten in HTML, Einfache Textformatierung mit HTML, Erstellen von Links, und Fortgeschrittene Textformatierung durchgearbeitet haben.
Ziel:Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML <head> gehört.
- -

Startpunkt

- -

Um diese Aufgaben zu starten, rufen Sie den Rohtext auf, den Sie strukturieren sollen, sowie die CSS, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die .html-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie JSBin oder Thimble, um die Aufgaben zu bearbeiten.)

- -

Projekt: Kurzbeschreibung

- -

In diesem Projekt ist Ihre Aufgabe, einen Brief zu gestalten, der in einem Universitäts-Intranet gehostet werden soll. Der Brief ist eine Antwort von einer Forschungskollegin an einen zukünftigen Doktoranden, der seine Arbeit an der Universität antritt.

- -

Block-/Struktursemantik:

- -
    -
  • Bringen Sie das gesamte Dokument in eine sinnvolle Struktur, einschließlich Dokumententyp, {{htmlelement("html")}}-, {{htmlelement("head")}}- und {{htmlelement("body")}}-Elementen.
    • -
  • The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and three second level headings.
    • -
  • Die "semester start dates", "study subjects" und "exotic dances" sollen mit einem angemessenen Listentyp ausgezeichnet werden.
    • -
  • Die zwei Adressen können einfach in Paragraphen eingefügt werden. Das {{htmlelement("address")}}-Element ist hierfür nicht geeignet — überlegen Sie, warum. Zusätzlich soll jede Zeile der Adresse in einer neuen Zeile sein, nicht aber in einem neuen Paragraphen.
    • -
- -

Semantik innerhalb des Textes:

- -
    -
  • Die Namen von Sender und Empfänger (und "Tel" und "Email") sollen mit besonderer Wichtigkeit hervorgehoben werden.
    • -
  • Die vier Daten sollen mit geeigneten Elementen als maschinenlesbares Datum ausgezeichnet werden.
    • -
  • Die erste Adresse und das erste Datum des Briefes sollen ein Klassenattributwert von "sender-column" erhalten; das CSS, das Sie später ergänzen, wird später für die Rechtsbündigkeit sorgen, die sie in einem klassischen Brieflayout haben.
    • -
  • Die fünf Akronyme/Abkürzungen im Hauptteil des Textes sollen so ausgezeichnet werden, dass die ausgeschriebene Version des jeweiligen Akronyms bzw. der Abkürzung hinterlegt ist.
    • -
  • Die sechs Sub- und Superskripte sollen angemessen ausgezeichnet werden — in den chemischen Formeln sowie die Zahlen 103 und 104 (sie sollen am Ende die Zahlen 10 hoch 3 und 10 hoch 4 darstellen).
    • -
  • Das Grad-Symbol und Multiplikationssymbol sollen jeweils an den entsprechenden Stellen ausgezeichnet werden, indem Sie angemessene Entitäts-Referenzen benutzen.
    • -
  • Versuchen Sie, zumindest zwei geeignete Wörter innerhalb des Textes mit besonderer Wichtigkeit hervorzuheben.
    • -
  • An zwei Stellen soll ein Hyperlink ergänzt werden; fügen Sie gültige Links mit Titeln hinzu. Als Linkadresse verwenden Sie einfach http://example.com.
    • -
  • Das Universitätsmotto sowie das Zitat sollen mit geeigneten Elementen ausgezeichnet werden.
    • -
- -

Der Kopf (head) des Dokumentes:

- -
    -
  • Der Zeichensatz des Dokumentes sollte in einem entsprechenden Meta-Tag auf utf8 festgelegt werden.
    • -
  • Der Autor des Briefes sollte in einem entsprechenden Meta-Tag festgehalten werden.
    • -
  • Die bereitgestellte CSS-Datei sollte in einem entsprechenden Tag eingebunden werden.
    • -
- -

Hinweise und Tipps

- -
    -
  • Nutzen Sie den W3C HTML validator, um Ihre HTML zu prüfen; Sie erhalten Bonuspunkte, wenn die Validierung erfolgreich ist.
    • -
  • Sie benötigen keine CSS-Fähigkeiten, um diese Aufgaben zu bewältigen; Sie müssen lediglich die bereitgestellte CSS-Datei in ein HTML-Element einfügen.
    • -
- -

Beispiel

- -

Der nachfolgende Screenshot zeigt ein Beispiel dafür, wie der Brief nach der Auszeichnung aussehen könnte.

- -

Example

- -

Einschätzung

- -

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

- -

In diesem Modul

- - diff --git a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html deleted file mode 100644 index 6f3e12ddb2a693..00000000000000 --- a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Structuring a page of content -slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -original_slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

- - - - - - - - - - - - -
Vorbereitungen:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Ziel: -

Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.

-
- -

Startpunkt

- -

Um diese Selbsteinschätzung zu starten, sollten Sie die ZIP-Datei mit allen Startinhalten herunterladen. Die ZIP-Datei enthält:

- -
    -
  • Den HTML-Code, der mit Markup strukturiert werden soll
    • -
  • CSS, um Ihr Markup zu gestalten
    • -
  • Bilder, die auf der Seite verwendet werden.
    • -
- -

Erstellen Sie das Beispiel lokal auf Ihrem Computer oder nutzen Sie alternativ eine Seite wieJSBin oder Thimble , um den Test zu absolvieren.

- -

Projekt: Kurzbeschreibung

- -

Ihre Aufgabe in diesem Projekt ist es, den Inhalt einer Bird Watching-Homepage als Grundlage zu verwenden und ihm Struktur zu geben, sodass ein Page Layout darauf angewendet werden kann. Dazu werden benötigt:

- -
    -
  • A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.
    • -
  • A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.
    • -
  • Ein Footer, der Copyright-Informationen und Credits enthält.
    • -
- -

Sie müssen einen passenden Wrapper hinzufügen für:

- -
    -
  • Den Header
    • -
  • Das Navigationsmenü
    • -
  • Den Main Content
    • -
  • Den Begrüßungstext
    • -
  • Die Bilder-Sidebar
    • -
  • Den Footer
    • -
- -

Sie sollten außerdem:

- -
    -
  • das vorgegebene CSS auf die Seite anwenden, indem Sie ein anderes {{htmlelement("link")}}-Element direkt unter dem bereits existierenden Element am Anfang ergänzen.
    • -
- -

Hinweise und Tipps

- -
    -
  • Use the W3C Nu HTML Checker to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.
    • -
  • You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.
    • -
  • The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.
    • -
  • If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.
    • -
- -

Beispiel

- -

Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Einschätzung

- -

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index 723d776d62ab0d..00000000000000 --- a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Was gehört in den Kopf der HTML-Datei? -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -tags: - - Anfänger - - Beginner - - HTML - - Kopf - - Meta - - Metadaten - - Sprache - - Umlaute - - favicon - - head - - lang -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -original_slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

Der Kopf (engl.: head) eines HTML Dokumentes, ist der obere Teil innerhalb des <head>-Elements, welcher nicht direkt im Webbrowser gezeigt wird, wenn die Seite gerendert wird. Er enthält Zusatzinformationen zur Webseite, wie den {{htmlelement("title")}}, Links zu CSS-Dateien und einem Favicon, andere Metadaten, wie den Autor der Webseite und eine kurze Beschreibung für Suchmaschinen. In diesem Artikel geht es um all diese Themen und noch mehr, um Ihnen beizubringen wie Sie den Kopf der HTML-Datei am sinnvollsten nutzen.

- - - - - - - - - - - - -
Vorwissen:HTML-Grundlagen, wie sie in Lerne HTML kennen abgedeckt werden.
Ziel:Lernen für was der Kopf des HTML-Dokuments da ist, die wichtigsten Dinge die dort hinein gehören und wie sie das HTML-Dokument beeinflussen
- -

Was ist der HTML-Kopf?

- -

Lassen Sie uns nochmal einen Blick auf das einfache HTML Dokument werfen, mit welchem wir uns im vorherigen Artikel beschäftigt haben:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Meine Testseite</title>
-  </head>
-  <body>
-    <p>Dies ist meine Webseite.</p>
-  </body>
-</html>
- -

Der HTML-Kopf ist der Inhalt im {{htmlelement("head")}}-Element. Anders als der Inhalt des {{htmlelement("body")}}-Elements, welcher im Browserfenster angezeigt wird, bleibt der Kopf im Browser verborgen. Die Aufgabe des Kopfes ist es, {{glossary("Metadata", "metadata")}} über das Dokument zu beinhalten. In unserem Beispiel ist der Kopf nicht sehr groß:

- -
<head>
-  <meta charset="utf-8">
-  <title>Meine Testseite</title>
-</head>
- -

Auf großen Webseiten wird der Kopf aber recht voll. Schauen Sie sich mal den Bereich im <head>-Element bei Ihren Lieblingswebseiten an, indem Sie die Developer Tools nutzen oder einfach view-source: vor der Webadresse in die Adresszeile schreiben (z.B. view-source:http://mozilla.org). Unser Ziel hier ist es nicht alle Möglichkeiten zu zeigen, was man in den Kopf schreiben kann, aber wir werden Ihnen die wichtigsten und nützlichsten Dinge vorstellen. Fangen wir an!

- -

Einen Titel hinzufügen

- -

Wir haben das {{htmlelement("title")}}-Element schon in Aktion gesehen - es kann genutzt werden, um der Webseite einen Titel hinzuzufügen. Dies kann mit dem {{htmlelement("h1")}}-Element verwechselt werden, welches benutzt wird, um innerhalb des <body>-Elements dem Inhalt der Webseite eine Hauptüberschrift zu geben. Manchmal wird diese Hauptüberschrift auch Titel genannt. Die beiden Elemente sind aber sehr unterschiedlich!

- -
    -
  • Das {{htmlelement("h1")}}-Element erscheint auf der Webseite selbst, wenn diese im Browser geladen wird. Dieses Element sollte nur einmal pro Seite erscheinen, um als Hauptüberschrift für den aktuellen Inhalt zu fungieren.
    • -
  • Das {{htmlelement("title")}}-Element gehört zu den Metadaten und repräsentiert den Titel der gesamten Webseite, nicht nur den Inhalt einer Seite darauf.
    • -
- -

Aktives Lernen: Beispiel anschauen

- -
    -
  1. Als erstes möchten wir das Sie zu unserem GitHub Repositorium gehen und eine Kopie von title-example.html page herunterladen. Um das zu tun, können Sie entweder - -
      -
    1. Den Code direkt von der Seite kopieren und diesen in eine neue Textdatei in Ihrem Code-Editor einfügen. Vergessen Sie nicht die Datei zu speichern.
      2. -
    2. Drücken Sie auf den "Raw" Button auf der Seite, welcher den Code in einem neuen Browserfenster anzeigen lässt. Wählen Sie nun in Ihrem Browsermenu Datei > Speichere Seite unter... und speichern die Datei auf Ihrem Computer.
      3. -
    -
    2. -
  2. Öffnen Sie diese Datei in Ihrem Browser. Sie sollten folgendes sehen: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Es sollte hier klar werden, wo das <h1>-Element erscheint und wo das <html>-Element zu sehen ist!

    -
    3. -
  3. Sie sollten auch versuchen, den Code in Ihrem Code-Editor zu öffnen. Ändern Sie den Inhalt der Elemente, speichern Sie die Datei und aktualisieren Sie die Seite im Browser. Probieren Sie ein bisschen herum.
    4. -
- -

Der Inhalt des <title>-Elements wird auch auf andere Weise genutzt. Wenn Sie zum Beispiel die Seite zu Ihren Lesezeichen hinzufügen (Lesezeichen > Lesezeichen hinzufügen oder die Schaltfläche mit dem Stern in der Adresszeile in Firefox), werden Sie sehen, dass der Inhalt des <title>-Elements als Name für das Lesezeichen vorgeschlagen wird.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Der Inhalt des <title>-Elements wird auch von Suchmaschinen genutzt, wie Sie weiter unten sehen werden.

- -

Metadaten: das <meta>-Element

- -

Metadaten sind Daten, welche Daten beschreiben. HTML hat einen "offiziellen" Weg, Meatadaten zu einem Dokument hinzuzufügen, das {{htmlelement("meta")}}-Element. Natürlich könnten auch die anderen Dinge, die wir hier besprechen, als Metadaten bezeichnet werden. Es gibt eine Menge verschiedener <meta>-Elemente, welche in das <head>-Element plaziert werden können. Wir werden hier nicht alle erklären, da dies sehr verwirrend werden würde. Statt dessen erklären wir einige Dinge die sie häufig sehen werden, um Ihnen eine Idee zu geben, um was es hier geht.

- -

Zeichensatz einer Webseite festlegen

- -

In dem obigen Beispiel war diese Zeile enthalten:

- -
<meta charset="utf-8">
- -

Mit diesem Element wird der genutzte Zeichensatz auf der Webseite bestimmt - es wird das Set an Zeichen festgelegt, welches vom Browser benutzt werden soll. utf-8 ist ein universeller Zeichensatz in dem fast jeder Charakter enthalten ist, der in menschlicher Schrift benutzt wird. Das bedeutet, das ihre Webseite fast alle Sprachen anzeigen kann. Es ist also eine gute Idee, dies auf jeder Ihrer Webseiten zu setzen! Wenn Sie diesen nicht benutzen, werden Umlaute (Ä, ö) und ß nicht richtig angezeigt. Zum Beispiel kann Ihre Webseite damit gleichzeitig Englisch und Japanisch anzeigen:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Wenn Sie Ihren Zeichensatz zum Beispiel auf ISO-8859-1 setzen, der Zeichensatz für das lateinische Alphabet, wird die Webseite nicht so schön aussehen:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -

Atkives lernen: Experimentieren mit Zeichensätzen

- -

Um dies auszuprobieren, nutzen Sie wieder die einfache HTML-Vorlage, welche Sie in der vorherigen Sektion über das <title>-Element benutzt haben (title-example.html page). Verändern Sie den Wert von meta-charset in ISO-8859-1 und fügen Sie japanische Buchstaben ihrer Seite hinzu. Das ist der Absatz, den wir benutzt haben:

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Ändern Sie den Text im Absatz in einen deutschen Text, der Umlaute enthält. Dann löschen Sie das <meta charset>-Element, um zu sehen, was passiert. Fügen Sie das ursprüngliche meta-Tag danach wieder ein und sehen Sie sich den Unterschied im Webbrowser an.

- -

Autor und Beschreibung hinzufügen

- -

Viele <meta> -Elemente beinhalten name und content Attribute:

- -
    -
  • name spezifiziert den Typ des meta-Elements; welche Art von Information es enthält.
    • -
  • content spezifiziert den eigentlichen Inhalt des meta-Elements.
    • -
- -

Zwei dieser meta-Elemente, bei denen es sinnvoll ist, sie auf Ihrer Webseite zu nutzen, stellen wir hier vor. Sie definieren den Autor (engl.: author) und eine kurze Beschreibung (engl.: description) der Webseite. Schauen wir uns ein Beispiel an:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="The MDN Learning Area aims to provide
-complete beginners to the Web with all they need to know to get
-started with developing web sites and applications.">
- -

Einen Autor anzugeben ist sinnvoll, um zu zeigen, wer die Webseite geschrieben hat. Vielleicht möchte jemand Kontakt mit dem Autor aufnehmen, da er Fragen zum Inhalt oder zum Code der Webseite hat. Es gibt Seiten, welche automatisch den Autor der Webseite auslesen, um eine Kontaktmöglichkeit zu diesem zu erstellen.

- -

Eine Beschreibung welche zum Inhalt der Seite passende Stichwörter enthält, ist ein sinnvoller Weg, die Webseite in Suchmaschinen zu relevanten Suchbegriffen weiter oben erscheinen zu lassen. (solche Methoden werden unter dem Begriff Suchmaschinenoptimierung (engl.: "Search Engine Optimation", kurz {{glossary("SEO")}} zusammengefasst)

- -

Aktives Lernen: Beschreibung für Suchmaschinen

- -

Die Beschreibung wird von Suchmaschinen auch auf der Ergebnisseite genutzt. Schauen wir uns das mal genauer an - in einer Übung.

- -
    -
  1. Gehen Sie zu der Startseite von dem Mozilla Developer Network.
    2. -
  2. Schauen Sie sich den Quellcode der Webseite an (Rechts/Ctrl + klick auf die Seite, wählen Sie Quellcode anzeigen von dem Kontextmenü oder schreiben Sie view-source: vor die Webadresse in der Adresszeile).
    3. -
  3. Finden Sie das description <meta>-Tag. Es sollte so aussehen: - 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    -
    4. -
  4. Suchen Sie nun nach "Mozilla Developer Network" in einer beliebigen Suchmaschine (Wir haben Yahoo benutzt.) Sie werden bemerken das die Inhalte vom description <meta>-Tag und vom <title> hier erscheinen - es ist also sehr sinnvoll, diese beiden zu ntuzen! A Yahoo search result for "Mozilla Developer Network"
    5. -
- -
-

Hinweis: Wenn Sie mit Google suchen, werden Sie einige Unterseiten von MDN sehen, direkt unter dem Link zur Hauptseite von MDN. Dies sind sogenannte Sitelinks und Sie können mit den Google's webmaster tools bearbeitet werden.

-
- -
-

Hinweis: Viele <meta>-Elemente sind nicht mehr so wichtig, wie sie einmal waren. Ein Beispiel ist das keyword <meta>-Element (<meta name="keywords" content="fill, in, your, keywords, here">). Dieses sollte Schlagwörter für Suchmaschinen bereithalten , damit diese anhand der Schlagwörter Suchergebnisse zusammen stellen können. Mittlerweile wird dieses <meta>-Tag von vielen Suchmaschinen ignoriert, weil Sprammer die Stichwortliste mit hunderten von Stichwörtern gefüllt haben, womit die Suchergebnisse manipuliert werden konnten.

-
- -

Andere Typen von Metadaten

- -

Während Sie sich im Internet umschauen, werden Sie andere Typen von Metadaten entdecken. Einige Funktionen auf Webseiten sind proprietäre Kreationen (zum Beispiel Seiten von Sozialen Netzwerken), welche geschrieben wurden, um bestimmte Informationen zur Verfügung zu stellen.

- -

Zum Beispiel gibt es Open Graph Data, welches ein Metadatenprotokoll ist, welches von Facebook erfunden wurde, um reichhaltigere Metadaten zur Verfügung zu stellen. Im MDN Quellcode können Sie folgendes finden:

- -
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Dieser Code bewirkt, das ein Link zu MDN von Facebook aus, ein Bild und eine Beschreibung beinhaltet. Das sieht dann so aus:

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter nutzt ganz ähnliche Metadaten, welche einen ähnlichen Effekt haben. Ein spezifischer Titel, eine Kurzbeschreibung und ein Bild können bei Angabe eines Links angezeigt werden. Als Beispiel:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Spezielle Icons der Webseite hinzufügen

- -

Um das Design Ihrer Webseite weiter zu verschönern, können Sie in den Metadaten eine Referenz zu einem speziellen Icon-Set hinzufügen. Diese werden dann in einem bestimmten Kontext angezeigt.

- -

Das Favicon, welches es schon seit vielen Jahren gibt, ist das erste Icon seiner Art. Es ist 16 x 16 Pixel groß und wird an verschiedenen Stellen genutzt. Sie können Favicons vor dem Titel einer Webseite in den meisten Browser-Tabs sehen. Auch wenn Sie eine Seite Ihren Lesezeichen hinzufügen, wird dort das Favicon verwendet.

- -

Ein Favicon fügen Sie Ihrer Webseite wie folgt hinzu:

- -
    -
  1. Speichern Sie das Favicon mit der Endung .ico in dem selben Ordner, in dem auch Ihre index.html Datei ist. Die meisten Browser würden auch .gif und .png Format akzeptieren, mit dem ICO Format gehen Sie aber sicher, das auch ältere Browser das Favicon anzeigen.
    2. -
  2. Fügen Sie die folgende Zeile in den <head>-Bereich Ihrer HTML-Datei ein, um eine Referenz zu dem Favicon zu erzeugen: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Hier ist ein Beispiel, indem ein Favicon in einer Lesezeichen-Liste angezeigt wird:

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Es gibt heutzutage viele andere Icon-Typen die man der Webseite hinzufügen kann. Zum Beispiel werden Sie folgendes im Quellcode der MDN Startseite finden:

- -
<!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
-<!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
-<!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
-<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
-<!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
- -

Die Kommentare erklären für was die verschiedenen Icons da sind. Zum Beispiel gibt es ein hochauflösendes Icon, welches angezeigt wird, wenn die Webseite auf dem Startbildschirm eines IPad's gespeichert wird.

- -

Machen Sie sich nicht zu viele Sorgen, all diese Icons müssen Sie nicht direkt in Ihrer Webseite haben. Sie sind eher ein Feature für fortgeschrittene Webentwickler und werden nicht zur Absolvierung dieses Kurses benötigt. Sie sollen hier nur erfahren für was diese Code-Zeilen stehen, wenn Sie diese im Quellcode anderer Webseiten sehen.

- -

CSS und JavaScript der HTML-Datei hinzufügen

- -

Fast alle modernen Webseiten benutzen {{glossary("CSS")}}, um diese gut aussehen zu lassen und {{glossary("JavaScript")}} um interaktive Elemente hinzuzufügen, wie Video-Spieler, Karten, Spiele und vieles mehr. Diese werden der HTML-Datei normalerweise wie folgt hinzugefügt:

- -
    -
  • Für das Einbinden von CSS-Dateien wird das {{htmlelement("link")}}-Element benutzt. Dieses wird im Kopf der HTML-Datei eingebunden. Das Element nimmt zwei Attribute, einmal rel="stylesheet", welches Angibt das es sich um ein Stylesheet handelt. Das andere Attribut ist href, welches als Wert den Pfad zu der CSS-Datei beinhaltet: - - 
    <link rel="stylesheet" href="meine-css-datei.css">
    -
    • -
  • Für das Einbinden von JavaScript-Dateien wird das {{htmlelement("script")}}-Element genutzt und es wird meistens am Ende der HTML-Datei, vor dem schließenden </body>-Tag verwendet. Dadurch wird der HTML-Inhalt zuerst fertig geladen und erst am Ende der JavaScript-Code ausgeführt und auf die fertig gerenderte Webseite angewendet: - 
    <script src="meine-js-datei.js"></script>
    - -

    Hinweis: Das <script>-Element sieht aus wie ein leeres Element, aber das ist es nicht, weswegen ein schließendes Tag notwendig ist. Anstatt auf eine externe JavaScript-Datei zu verweisen, könnte man den Code auch direkt in das <script>-Element hineinschreiben.

    -
    • -
- -

Aktives Lernen: Binden Sie CSS und JavaScript in eine Seite ein

- -
    -
  1. Holen Sie sich jeweils eine Kopie von unseren meta-example.html, script.js und style.css-Dateien und speichern diese lokal auf ihrem Computer in demselben Ordner ab. Gehen Sie sicher das die Dateien mit den richtigen Namen und Dateiendungen gespeichert sind.
    2. -
  2. Öffnen Sie die HTML-Datei sowohl in Ihrem Browser, als auch in einem Texteditor.
    3. -
  3. Fügen Sie nun ein {{htmlelement("link")}}-Element hinzu, welches auf die CSS-Datei verweist und ein {{htmlelement("script")}}-Element, welches die JavaScript-Datei einbindet, wie Sie es in diesem Artikel gelernt haben.
    4. -
- -

Wenn Sie nun das HTML-Dokument speichern und im Browser neu laden, dann sollten Sie folgende Änderungen an der Webseite sehen:

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- -
    -
  • Der JavaScript-Code hat der Seite eine leere Liste hinzugefügt. Wenn Sie nun irgendwo auf die Liste klicken, dann öffnet sich eine Dialog-Box, in welcher Sie Text eingeben können, der nach drücken auf "OK" als neuer Listenpunkt erscheint. Wenn Sie auf einen existierenden Listeneintrag klicken können Sie, über die Dialog-Box, diesen Eintrag ändern.
    • -
  • Die eingebundene CSS-Datei hat dafür gesorgt, dass der Hintergrund grün ist und der Text größer ist. Es wurde auch der Inhalt gestylet, welcher durch den JavaScript-Code der Webseite hinzugefügt wurde, nämlich der rote Hintergrund und ein schwarzer Rahmen um die Liste herum.
    • -
- -
-

Hinweis: Falls Sie an dieser Übung hängen bleiben und die externen Dateien nicht korrekt eingebunden bekommen, dann schauen Sie sich unsere css-and-js.html Beispiel Webseite an.

-
- -

Die genutzte Sprache der Webseite angeben

- -

Am Ende soll hier noch angemerkt werden, das Sie die genutzte Sprache auf der Webseite angeben können und sollten. Dies kann einfach gemacht werden indem Sie das lang-Attribut dem öffnenden HTML-Tag hinzufügen (wie auf meta-example.html gemacht und es unten gezeigt wird).

- -
<html lang="de">
- -

Dies ist in vielerlei Hinsicht eine hilfreiche Angabe. Ihr HTML-Dokument wird effizienter von Suchmaschinen aufgenommen, wenn die Sprache angegeben ist. Auch für Screenreader ist die Angabe der Sprache am Beginn des Dokumentes wichtig.

- -

Sie können auch für Bereiche Ihrer Webseite eine andere Sprache angeben. Zum Beispiel könnten Sie einen Bereich, in welchem japanischer Text steht, wie folgt angeben:

- -
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Die Ländercodes werden im ISO 639-1 Standard definiert. Sie können hier mehr darüber lesen: Language tags in HTML and XML (in Englisch)

- -

Zusammenfassung

- -

Dies ist das Ende unseres Exkurses über den Kopf der HTML-Datei. Es gäbe noch einiges mehr, was man dort tun könnte, aber es wäre für einen Anfänger nicht hilfreich. Die meistgenutzten Sachen haben wir hier erklärt. Weiter geht es mit Einfache Textformatierung in HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/multimedia_and_embedding/index.html b/files/de/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index f81217a328b1e2..00000000000000 --- a/files/de/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Multimediainhalte einbinden - Übersicht -slug: Learn/HTML/Multimedia_and_embedding -tags: - - Assessment - - Audio - - Beginner - - CodingScripting - - Embedding - - Flash - - Guide - - HTML - - Images - - Landing - - Learn - - Multimedia - - NeedsTranslation - - SVG - - TopicStub - - Video - - Web - - iframes - - imagemaps - - img - - responsive -translation_of: Learn/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

In diesem Kurs haben wir uns bisher viel zum Thema Text angesehen. Das Internet wäre allerdings ziemlich langweilig, wenn es nur aus reinem Text bestehen würde. Deshalb wollen wir uns nun ansehen, wie wir die Inhalte lebendiger und interessanter gestalten können.

- -

Dieses Modul zeigt, wie wir HTML einsetzen können, um Multimediainhalte in unsere Webseiten zu integrieren, egal ob es sich dabei um Bilder, Videos, Tonaufnahmen oder etwa ganze Webseiten handelt.

- -

Vorwissen

- -

Bevor Sie dieses Modul beginnen, sollten Sie über zuverlässiges HTML-Grundlagenwissen verfügen, wie es zuvor in Einführung in HTML behandelt wurde. Falls Sie dieses Modul noch nicht bearbeitet haben (und auch nichts ähnliches), beginnen Sie am besten damit und kommen Sie später wieder!

- -
-

Anmerkung:Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf welchem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie JSBin oder Thimble ausprobieren.

-
- -

Einführung

- -

Dieses Modul unterteilt sich in nachfolgende Abschnitte, um Ihnen die Grundlagen zur Einbettung von multimedialen Inhalten in Webseiten zu erläutern.

- -
-
Bilder in HTML
-
Man kann an die verschiedensten Arten von Multimediainhalten denken, die man einbinden könnte, aber wir fangen hier mit dem einfachsten Typ an, nämlich mit einem {{htmlelement("img")}}, mit welchem ein einfaches Bild in die Webseite eingefügt werden kann. In diesem Abschnitt sehen wir uns dies nun genauer an, beginnend bei den Mindestangaben, welche wir dann um eine Beschriftung ergänzen, welches durch den Einsatz eines {{htmlelement("figure")}} geschieht. Wie diese Angaben dann in Bezug zu Hintergrundgrafiken stehen, welche durch CSS Angaben definiert werden, werden wir uns anschliessend ansehen.
-
Video- und Audioinhalte
-
Next, we'll look at how to use the HTML5 {{htmlelement("video")}} and {{htmlelement("audio")}} elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.
-
Von <object> bis <iframe> — andere Einbindungstechniken
-
At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. <iframe>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.
-
Vektorgrafiken einbinden
-
Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are and how to include the popular {{glossary("SVG")}} format in web pages.
-
Responsive Bilder
-
With so many different device types now able to browse the web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now, we'll look at the tools HTML has available to create responsive images, including the {{htmlelement("picture")}} element.
-
- -

Assessments

- -

The following assessments will test your understanding of the HTML basics covered in the guides above:

- -
-
Mozilla splash page
-
In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!
-
- -

See also

- -
-
Add a hitmap on top of an image
-
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
-
Web literacy basics 2
-
-

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).E

-
-
diff --git a/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html deleted file mode 100644 index b6451b1232b545..00000000000000 --- a/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Mozilla splash page -slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page -tags: - - Anfänger - - Aufgabe - - Bilder - - CodingScripting - - Einbinden - - Grafiken - - HTML - - JPG - - PNG - - Video - - img - - responsiv - - src - - srcset - - youtube -translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -

Mit dieser Aufgabe testen wir Ihr Wissen über einige der Techniken, die in den Artikeln dieses Moduls angesprochen wurden. Wir lassen Sie einige Bilder und ein Video zu einer funky Mozilla-Startseite hinzufügen!

- - - - - - - - - - - - -
Vorwissen:Bevor Sie sich dieser Aufgabe stellen, sollten Sie bereits den Rest des Multimediainhalte einbinden-Moduls bearbeitet haben.
Ziel:Testen des Wissens über das Einbinden von Bildern und Videos in Webseiten, Frames und HTML-Techniken von responsiven Grafiken.
- -

Startpunkt

- -

Um diese Aufgabe zu beginnen, holen Sie sich die HTML und alle Bilder aus dem mdn-splash-page-start--Directory auf Github. Legen Sie auf Ihrer Festplatte ein neues Verzeichnis an und speichern Sie darin die Inhalte von index.html in einer Datei mit dem Namen index.html auf Ihrer Festplatte. Speichern Sie im selben Verzeichnis pattern.png (mt einem Rechtsklick auf das Bild eröffnet Ihnen das Kontextmenü eine Option, das Bild zu speichern).

- -

Speichern Sie auf dieselbe Weise, aber zunächst in einem anderen Verzeichnis, auch die anderen Bilder aus dem originals-Verzeichnis; Sie werden einige der Bilder noch mit einem Bildbearbeitungsprogramm verändern müssen, bevor sie einsatzbereit sind.

- -
-

Anmerkung: Das HTML-Beispiel beinhaltet ein recht umfangreiches CSS, um die Seite zu stylen. Sie brauchen das CSS nicht zu touchieren, sondern lediglich die HTML innerhalb des {{htmlelement("body")}}-Elementes — solange Sie die korrekten Auszeichnungen verwenden, wird das Styling ebenfalls korrekt aussehen.

-
- -

Projekt: Kurzbeschreibung

- -

In dieser Aufgabe präsentieren wir Ihnen eine fast-fertige Mozilla Startseite, deren Ziel es ist, etwas nettes und interessantes darüber zu kommunizieren, wofür Mozila steht, sowie einige Links zu weiterführenden Quellen bereitzustellen. Leider sind bisher noch keine Bilder oder Videos eingepflegt worden — das ist schließlich Ihr Job! Sie müssen einige Medien hinzufügen, damit die Seite ansprechender aussieht und ihrem Ziel gerecht wird. Die nachfolgenden Abschnitte beschreiben Ihre Aufgabe detaillierter:

- -

Bilder vorbereiten

- -

Erzeugen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm 400px- und 120px-breite Versionen von:

- -
    -
  • firefox_logo-only_RGB.png
    • -
  • firefox-addons.jpg
    • -
  • mozilla-dinosaur-head.png
    • -
- -

Geben Sie ihnen sprechende Namen, z.B. firefoxlogo400.png und firefoxlogo120.png.

- -

Gemeinsam mit mdn.svg werden diese Bilder Ihre Icons sein, mit denen Sie auf weiterführende Quellen verlinken, innerhalb des further-info-Bereichs. Sie werden außerdem auf das Firefox-Logo im Seitenheader verlinken. Speichern Sie Kopien all dieser Bilder im selben Verzeichnis, in dem sich index.html befindet.

- -

Haben Sie dies abgeschlossen, erzeugen Sie eine 1200px-breite Landscape-Version von red-panda.jpg und eine 600px-breite Version, die den Panda in einem Close-Up-Shot zeigt. Geben Sie auch diesen Bildern sprechende Namen, damit Sie sie leicht wiederfinden. Speichern Sie eine Kopie davon im selben Verzeichnis, in dem sich index.html befindet.

- -
-

Anmerkung: Sie sollten Ihre JPG- und PNG-Bilder am besten auf eine Weise komprimieren, auf die sie so klein wie möglich sind und dabei dennoch gut aussehen. tinypng.com ist ein toller Service, um dies einfach zu erreichen.

-
- -

Dem Header ein Logo hinzufügen

- -

Innerhalb des {{htmlelement("header")}}-Elements fügen Sie ein {{htmlelement("img")}}-Element hinzu, das die kleine Version des Firefox-Logos in den Header einbindet.

- -

Dem Hauptteil des Artikels ein Video hinzufügen

- -

Fügen Sie einfach das {{htmlelement("article")}}-Element hinzu (direkt under dem öffnenden Tag) und binden Sie das YouTube-Video unter dem Link https://www.youtube.com/watch?v=ojcNcvb1olg ein, indem Sie geeignete YouTube-Tools verwenden, um den Code zu generieren. Das Video soll 400px breit sein.

- - - -

Innerhalb des {{htmlelement("div")}}-Elements mit der Klasse further-info finden Sie vier {{htmlelement("a")}}-Elemente — jedes davon verlinkt auf eine interessante Mozilla-zugehörige Seite. Um diesen Teil abzuschließen, müssen Sie innerhalb jeden dieser Elemente ein {{htmlelement("img")}}-Element hinzufügen, die geeignete {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}-, {{htmlattrxref("srcset", "img")}}- und {{htmlattrxref("sizes", "img")}}-Attribute enthalten.

- -

In jedem Fall (außer einem — der von sich aus responsiv ist?) möchten wir, dass der Browser die 120px-breite Version anzeigt, wenn das Anzeigedisplay 480px breit oder kleiner ist, und die 400px-breite Version in allen anderen Fällen.

- -

Stellen Sie sicher, dass die richtigen Bilder mit den richtigen Links verbunden sind!

- -
-

Anmerkung: Um die srcset/sizes-Beispiele zu testen, müssen Sie Ihre Seite auf einen Server uploaden (Github pages ist eine einfache und freie Lösung). Von dort aus können Sie testen, ob sie korrekt funktionieren, indem Sie Browser-Entwicklertools verwenden, wie in Responsive images: useful developer tools beschrieben.

-
- -

Ein art directed Roter Panda

- -

Innerhalb des {{htmlelement("div")}}-Elementes mit der Klasse red-panda möchten wir ein {{htmlelement("picture")}}-Element einfügen, das das kleine Panda-Portrai zeigt, wenn das Anzeigedisplay 600px breit oder schmaler ist, und das große Landscape-Bild bei breiteren Anzeigedisplays.

- -

Beispiel

- -

Die nachfolgenden Screenshots zeigen, wie die Startseite nach der korrekten Auszeichnung aussehen sollte, auf einem breiten und einem schmalen Bildschirm.

- -

A wide shot of our example splash page

- -

A narrow shot of our example splash page

- -

Einschätzung

- -

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Diskussionsthread zu dieser Übung nachfragen oder im #mdn IRC-Channel auf Mozilla IRC.Versuchen Sie es zunächst selbst — mit Mogeleien ist nichts gewonnen!

- -
-

Anmerkung: Falls Sie ihre Aufgabe mit den Developer-Tools des im Chrome-Browsers überprüfen, kann es sein, dass der Browser nicht die richtigen Bilder lädt, egal, wie klein Sie die Breite unter 'responsive view' auswählen. Es scheint sich hierbei um eine Eigenart von Chrome zu handeln. Der Firefox-Browser sollte das richtige Bild laden (sofern Ihre HTML korrekt ist).

-
- -

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

In diesem Modul

- - diff --git a/files/de/learn/html/tables/index.html b/files/de/learn/html/tables/index.html deleted file mode 100644 index b9f1b0274f6bd2..00000000000000 --- a/files/de/learn/html/tables/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: HTML-Tabellen -slug: Learn/HTML/Tables -tags: - - - - - - - - Anfänger - - Beginner - - Guide - - HTML - - Landing - - Modul - - Tabellen -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Das Strukturieren tabellarischer Daten ist eine sehr häufige Aufgabe in HTML. Es gibt nur für diesen Zweck eine ganze Reihe von Elementen und Attributen. In Verbindung mit etwas CSS zur Stilisierung können mit HTML sehr einfach tabellarische Informationen dargestellt werden, wie beispielsweise Ihr Stundenplan für die Schule, die Öffnungszeiten der lokalen Schwimmhalle oder statistische Daten über Ihre Lieblings-Dinosaurier oder Ihren Lieblings-Fußballverein. Dieses Modul zeigt Ihnen alles Wissenswerte zur Strukturierung tabellarischer Daten mit HTML.

- -

Voraussetzungen

- -

Bevor Sie dieses Modul beginnen sollten Sie sich mit den Grundlagen von HTML beschäftigt haben – lesen Sie dazu die Einführung in HTML.

- -
-

Hinweis: Wenn Sie auf einem Computer, Tablet oder anderem Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien anzulegen, können Sie die (meisten) Codebeispiele auch in einem Online-Editor, wie JSBin oder Thimble ausprobieren.

-
- -

Lerneinheiten

- -

Dieses Modul enthält die folgenden Artikel:

- -
-
HTML table basics
-
Dieser Artikel gibt Ihnen eine Einführung in HTML-Tabellen. Er behandelt die Grundlagen der Zeilen und Spalten, Kopfzeilen, Zellen, die mehrere Spalten und Zeilen überspannen, sowie das Gruppieren aller Zellen einer Spalte zur Stiländerung.
-
HTML table advanced features and accessibility
-
Der zweite Artikel dieses Moduls betrachtet fortgeschrittenere Funktionen der HTML-Tabellen, wie Bildunterschriften/Zusammenfassungen, das Gruppieren von Zeilen zum Tabellenkopf, -körper und -fuß; aber auch die Barrierefreiheit von Tabellen für sehbehinderte Nutzer.
-
- -

Aufgaben

- -
-
Structuring planet data
-
In der Aufgabe zu Tabellen stellen wir Ihnen Daten zum Sonnensystem zur Verfügung, die Sie in einer HTML-Tabelle strukturieren sollen.
-
diff --git a/files/de/learn/index.html b/files/de/learn/index.html deleted file mode 100644 index 1f3e8fda95b555..00000000000000 --- a/files/de/learn/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Lerne Webentwicklung -slug: Learn -tags: - - Anfänger - - Beginner - - Index - - Internet - - Landing - - Lernen - - Web -translation_of: Learn ---- -
-

Willkommen im MDN Lernbereich!
- Mit dieser Artikelreihe können Sie es vom Anfänger zum Webentwickler schaffen. Alles was sie brauchen, um einfache Webseiten zu coden, finden Sie hier.

-
- -

{{LearnSidebar}}

- -

Das Ziel dieser Artikelserie ist es, Sie von "Beginner" zum "Könner" Level zu bringen. Ein "Experte" werden Sie erst durch viel Übung an eigenen Projekten, wobei MDN immer eine wertvolle Ressource für Sie sein wird.

- -

Wenn Sie ein kompletter Anfänger sind, kann Webentwicklung eine schwere Herausforderung sein - wir werden behilflich "Ihre Hand halten" auf dem Weg zum echten Mozilla Webentwickler. Alle können sich hier daheim fühlen, egal ob sie Student sind, der Webentwicklung lernt (autodidaktisch oder innerhalb eines Kurses), ein Lehrer der nach Unterrichtsmaterial sucht, jemand der seinem Hobby nachgeht oder jemand der mehr über die Technologien, welche das Internet zusammenhalten, wissen möchte.

- -
-

Wichtig: Der Lernbereich wird ständig erweitert. Die Deutsche Übersetzung ist noch nicht vollständig, daran wird aber gearbeitet. Wenn Sie Fragen zu den Themen haben, dann Kontaktieren Sie uns.

-
- -

Was gibt's neues?

- -

Der Lernbereich wird regelmäßig von uns erweitert. Damit ihr auf dem neusten Stand bleibt, werden alle Neuerungen hier erfasst. Guckt also gerne später nochmal vorbei!

- -

Wenn ihr Fragen zu Themen habt, die hier nicht oder eurer Meinung nach nur unvollständig beschrieben sind, dann schreibt uns eine Nachricht im Discourse forum.

- -

Ihr wollt ein Front-end Web Entwickler werden?

- -

Wir haben alle grundlegenden Informationen in einem weiteren Kurs zusammengefasst, damit du alles hast, um dein Ziel zu erreichen.

- -

Wo anfangen

- -

Wir möchten mit Ihnen auf einen Nenner kommen. Welche Beschreibung trifft am ehesten auf Sie zu?

- -

Ich bin Anfänger

-

Herzlich Willkommen! Am besten fangen Sie mit unserer Serie "Lerne das Internet kennen" an. Hier erfahren Sie alles über die Grundlagen, welche Sie zum Einstieg in die Webentwicklung brauchen.

- -

Ich kenne das Web

-

Sehr gut! In dem Fall können Sie sich die wichtigsten Webtechnologien genauer anschauen: HTML, CSS und JavaScript.

- -

Ich habe das Web gemeistert.

-

Großartig! Dann sind Sie möglicherweise an unseren fortgeschrittenen Guides und Tutorials interessiert. Vielleicht möchten Sie auch selbst zum MDN Lernbereich beitragen ;-)

- -
-

Hinweis: Wir werden immer mehr Lernmaterial veröffentlichen, beispielsweise für erfahrene Programmierer zu spezifischen fortgeschrittenen Techniken, native Entwickler, die neu auf dem Web sind, oder Menschen, die Design-Techniken lernen wollen.

-
- -

Unsere Themen

- -

Hier ist eine Liste mit unseren Artikelreihen.

- -
-
Lerne das Internet kennen
-
Gibt eine grundlegende Einführung in Webentwicklung für Anfänger.
-
HTML - Webseiten strukturieren
-
Hier wird Ihnen die jeder Webseite zugrunde liegende Sprache beigebracht. HTML ist dazu da Webseiten ein Grundgerüst und Struktur zu geben.
-
CSS - Webseiten designen
-
CSS ist die Sprache, die wir benutzen, um einer Webseite einen bestimmten Stil zu geben. Farben, Schriftarten und die Position eines Elements auf der Webseite, das alles und mehr kann man mit CSS bestimmen. In diesem Bereich lernen sie grundlegendes CSS.
-
JavaScript - dynamische, benutzerseitige Skriptsprache
-
JavaScript ist die Skriptsprache des Internets. Sie wird benutzt um einer Webseite dynamischen Inhalt hinzuzufügen. In dieser Artikelreihe lernen Sie die Grundlagen von JavaScript.
-
Barrierefreiheit - Mache das Internet für jeden zugänglich
-
Barrierefreiheit - hier geht es darum das Internet für alle Zugänglich zu machen, ob für Menschen mit Behinderungen oder für einen mobilen Zugang oder andere Zugangsmöglichkeiten. Diese Artikel geben Ihnen einiges Wissen an die Hand, wie Sie die Zugänglichkeit Ihrer Webseite erhöhen können.
-
Werkzeuge und Tests
-
Hier werden verschiedene Werkzeuge für Webentwickler vorgestellt, zum Beispiel Werkzeuge, um eine Webseite in verschiedenen Browsern zu testen.
-
Serverseitige Webseitenprogrammierung
-
Selbst wenn Sie sich auf die benutzerseitige Webseitenentwicklung spezialisiert haben, ist es sinnvoll ein grundlegendes Verständinis für serverseitige Programmierung zu besitzen. Dieses Thema gibt Ihnen eine Einführung darin, wie serverseitige Programmiersprachen funktionieren. Es gibt detailierte Anleitungen für zwei populäre Frameworks, für Django (Python) und Express (node.js).
-
- -

Wie kommen Sie an unsere Code-Beispiele?

- -

Die Code-Beispiele, welche sie in unserem Lernbereich finden sind alle über Github zugänglich. Sie können diese auf Ihren eigenen Computer kopieren, um mit diesen zu üben.

- -

Kontaktieren Sie uns

- -

Der gesamte Lernbereich wurde von unseren Freiwilligen erstellt. Wir brauchen Sie in unserem Team, egal ob Sie Anfänger, Lehrer oder ein erfahrener Webentwickler sind. Falls Sie Interesse haben am MDN-Projekt mitzuwirken, dann können Sie und über unsere Mailing-Listen oder den IRC Channel erreichen. :)

- -

Weiteres

- -
-
Mozilla Developer Newsletter
-
Unser Newsletter für Webentwickler. (in Englisch)
-
- -
-
Codecademy
-
Eine gute, interaktive Webseite, um Programmiersprachen und Webentwicklung zu lernen. (in Englisch)
-
Code.org
-
Für Schüler und Lehrer gedacht.(teilweise in Deutsch)
-
freeCodeCamp.com
-
Interaktive Seite mit Tutorials und Projekten zum Thema coden. (auf Englisch)
-
- -

Edabit
- Tausende interaktive JavaScript-Herausforderungen.

diff --git a/files/de/learn/javascript/building_blocks/index.html b/files/de/learn/javascript/building_blocks/index.html deleted file mode 100644 index ad6df3c9f142ff..00000000000000 --- a/files/de/learn/javascript/building_blocks/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: JavaScript Bausteine -slug: Learn/JavaScript/Building_blocks -translation_of: Learn/JavaScript/Building_blocks -original_slug: Learn/JavaScript/Bausteine ---- -
{{LearnSidebar}}
- -

In diesem Modul betrachten wir weiterhin JavaScripts Kernfunktionen. Wir betrachten verschiedene, häufig vorkommende Arten von Code Blöcken, wie zum Beispiel Fallunterscheidungen, Schleifen, Funktionen und Events. Diese hast du bereits im Laufe des Kurses gesehen, allerdings nur "nebenbei" - jetzt behandeln wir sie explizit.

- -

Vorraussetzungen

- -

Bevor du mit diesem Modul anfängst, solltest du mit den Grundlagen von HTML und CSS vertraut sein und das vorherige Modul, Erste Schritte mit JavaScript, abgeschlossen haben.

- -
-

Hinweis: Falls du auf einem Computer/Tablet/anderem Gerät arbeitest, auf dem du keine Dateien erstellen kannst, kannst du die (meisten) Code Beispiele online, zum Beispiel mit JSBin oder Thimble, ausprobieren.

-
- -

Anleitungen

- -
-
Entscheidungen treffen --- Fallunterscheidungen
-
In allen Programmiersprachen muss Code Entscheidungen treffen und bei unterschiedlichen Eingaben entsprechend handeln. Falls zum Beispiel in einem Spiel der Spieler keine Leben mehr übrig hat, so hat er das Spiel verloren. In einer Wetter-App soll beispielsweise morgens ein Sonnenaufgang als Hintergrund gezeigt werden, nachts jedoch Mond und Sterne. In diesem Artikel betrachten wir Fallunterscheidungen und wie diese in JavaScript funktionieren.
-
Code wiederholen
-
Manchmal soll eine Aufgabe mehr als einmal ausgeführt werden, zum Beispiel wenn eine Liste an Namen durchsucht wird. Um solche Aufgaben zu erledigen, sind Schleifen eine gute Lösung. Im folgenden Artikel werden wir Schleifen in JavaScript genauer betrachten.
-
Funktionen -- Wiederverwendbare Codeblöcke
-
Ein essentielles Konzept in der Programmierung sind Funktionen. Funktionen erlauben es, Code, der eine bestimmte Aufgabe erfüllt, in einem eigenen Block zu definieren. Anschließend kann dieser Code über ein einzelnes, kurzes Kommando aufgerufen werden, anstatt den ganzen Code mehrere Male tippen zu müssen. In diesem Artikel erkunden wir die Konzepte hinter Funktionen wie die grundlegende Syntax oder wie diese aufgerufen werden und definieren die Begriffe Funktion, Sichtbereich (Scope) und Parameter.
-
Baue deine eigene Funktion
-
Nach dem der Großteil der grundlegenden Theorie im vorherigen Artikel thematisiert wurde, bietet dieser Artikel eine praktische Erfahrung. Hier bekommst du etwas Übung im Erstellen deiner eigenen Funktion. Außerdem werden wir einige weitere nützliche Details für das Arbeiten mit Funktionen behandeln.
-
Rückgabewerte von Funktionen
-
Es gibt ein weiteres essentielles Konzept, dass wir in diesem Kurs behandeln werden, um unsere Betrachtung von Funktionne abzuschließen --- Rückgabewerte. Manche Funktionen geben keinen "sinnvollen" Wert zurück, andere schon. Es ist wichtig zu verstehen, was diese Werte sind, wie sie benutzt werden und wie du Funktionen schreibst, die sinnvolle Werte zurückgeben.
-
Einführung in Events
-
Events sind Aktionen oder Ereignisse die in dem System, in dem du programmierts, passieren. Das System weist dich auf diese hin, so dass du gegebenenfalls entsprechend reagieren kannst. Klickt ein Nutzer beispielsweise auf einen Button auf einer Webseite, so möchtest du vermutlich darauf reagieren, in dem du eine Aktion ausführst. In diesem Artikel behandeln wir einige wichtige Konzepte bezüglich Events und betrachten deren Funktionsweise in Browsern.
-
- -

Prüfungen

- -

Die folgenden Aufgaben werden dein Verständnis der in diesen Artikeln behandelten JavaScript Grundlagen prüfen.

- -
-
Bildergalerie
-
Jetzt wo wir die grundlegenden Bausteine JavaScripts betrachtet haben, werden wir dein Wissen über Schleifen, Funktionen, Fallunterscheidungen und Events testen, indem wir eine JavaScript-basierte Bildergalerie entwickeln.
-
diff --git a/files/de/learn/javascript/first_steps/a_first_splash/index.html b/files/de/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index c30ed65801c399..00000000000000 --- a/files/de/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,598 +0,0 @@ ---- -title: Ein erster Eindruck von JavaScript -slug: Learn/JavaScript/First_steps/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash -original_slug: Learn/JavaScript/First_steps/Erster_Blick ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
- -

Nachdem Sie etwas über die Theorie von JavaScript gelernt haben und was Sie damit machen können, werden wir Ihnen in einem komplett praktischen Tutorial einen Crashkurs in den Grundfunktionen von JavaScript anbieten. Wir werden hier Schritt für Schritt ein einfaches Zahlenraten Spiel programmieren.

- - - - - - - - - - - - -
Voraussetzungen:Grundlegende Computerkenntnisse, einfache Grundkentnisse von HTML und CSS, sowie eine Vorstellung, was JavaScript ist.
Ziel:Erste Erfahrung beim Schreiben von JavaScript zu bekommen und zumindest ein grundlegendes Verständnis dafür zu erlangen, was das Schreiben eines JavaScript-Programms beinhaltet.
- -

Es ist nicht nötig, dass Sie den gesamten Code sofort im Detail verstehen - wir wollen Ihnen nur grob die Konzepte vorab vorstellen und Ihnen eine Vorstellung davon vermitteln, wie JavaScript (und andere Programmiersprachen) funktionieren. In den folgenden Artikeln werden wir alle diese Funktionen noch einmal im Detail besprechen!

- -
-

Hinweis: Viele der Befehle und Konstrukte, die Sie in JavaScript sehen werden, sind die gleichen wie in anderen Programmiersprachen - Funktionen, Schleifen, etc. Die Syntax sieht anders aus, aber die Konzepte sind immer noch weitgehend die gleichen.

-
- -

Denken wie ein Programmierer

- -

Eines der schwierigsten Dinge, die man bei der Programmierung lernen muss, sind nicht die Befehle, sondern wie man sie zur Lösung der Aufgabe anwendet. Sie müssen anfangen, wie ein Programmierer zu denken - Sie müssen sich im klaren sein was Ihr Programm tun soll, um dann herauszuarbeiten welche Funktionen und Befehle Sie dafür benötigen.

- -

Dies erfordert eine Mischung aus harter Arbeit, Erfahrung mit der Programmiersprache und Praxis - und ein wenig Kreativität. Je mehr Sie kodieren, desto besser werden Sie werden. Wir können nicht versprechen, dass Sie in fünf Minuten ein "Programmierer-Gehirn" entwickeln werden, aber wir werden Ihnen viel Gelegenheit geben, während des gesamten Kurses das Denken wie ein Programmierer zu üben.

- -

In diesem Sinne betrachten Sie das Beispiel, das wir in diesem Artikel erstellen werden und üben damit den Prozess der Zerlegung in konkrete Einzelschritte.

- -

Beispiel — Rate die Zahl

- -

In diesem Artikel zeigen wir Ihnen, wie Sie das Ratespiel aufbauen können, das Sie hier sehen können.:

- - - -

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

- -

Machen Sie sich mit der Funktionsweise des Spiels vertraut, bevor Sie weitermachen.

- -

Stellen wir uns vor, Ihr Chef hat Ihnen den folgenden Auftrag für die Erstellung dieses Spiels gegeben:

- -
-

Schreiben Sie ein Programm das ein Zahlenratespiel implementiert. Es sollte eine Zufallszahl zwischen 1 und 100 wählen und den Spieler auffordern, die Zahl nach spätestens 10 Runden zu erraten. Nach jedem Zug sollte dem Spieler mitgeteilt werden, ob er richtig geraten hat oder nicht - und, wenn er Unrecht hat, ob die Zahl zu niedrig oder zu hoch war. Außerdem sollen dem Spieler alle vorher geratenen Zahlen angezeigt werden. Das Spiel endet, wenn der Spieler richtig rät oder wenn er 10-mal falsch geraten hat. Wenn das Spiel endet, sollte dem Spieler die Möglichkeit gegeben werden, erneut zu spielen.

-
- -

Wenn wir uns diesen Anweisungen ansehen, können wir zunächst damit beginnen, ihn in einfache, umsetzbare Aufgaben aufzuteilen, und zwar aus der Sicht eines Programmierers:

- -
    -
  1. Generiere eine zufällige Zahl zwischen 1 und 100.
    2. -
  2. Speichere die Anzahl der getätigten Rateversuche, setze den Wert anfangs auf 1.
    3. -
  3. Ermögliche dem Spieler, einen Tipp abzugeben.
    4. -
  4. Sobald ein Tip abgegeben wurde, speichere sie damit der Spieler seine vorherigen Eingaben sehen kann.
    5. -
  5. Als Nächstes überprüfe, ob es sich um die richtige Zahl handelt.
    6. -
  6. Wenn sie richtig ist: -
      -
    1. Zeige Glückwunsch Nachricht.
      2. -
    2. Verhindere weiter Eingaben, da das Spiel zu Ende ist.
      3. -
    3. Biete eine Möglichkeit, das Spiel neu zu starten.
      4. -
    -
    7. -
  7. Wenn sie falsch ist und noch Versuche übrig sind: -
      -
    1. Dem Spieler mitteilen, dass die Zahl noch nicht erraten ist.
      2. -
    2. Die Eingabe einer weiteren Zahl ermöglichen.
      3. -
    3. Die Anzahl der Rateversuche um 1 erhöhen.
      4. -
    -
    8. -
  8. Wenn die Zahl falsch ist und keine Versuche mehr übrig sind: -
      -
    1. Dem Spieler mitteilen, dass das Spiel zu Ende ist.
      2. -
    2. Keine weiteren Eingaben mehr zulassen.
      3. -
    3. Ein Steuerelement zum Neustart des Spiels anzeigen.
      4. -
    -
    9. -
  9. Wenn das Spiel neu startet, sicherstellen dass Logik und Benutzeroberfläche zurückgesetzt werden. Danach zurück zum 1. Schritt.
    10. -
- -

Lassen Sie uns nun fortfahren und schauen, wie wir diese Punkte in Code umwandeln können, das Beispiel aufbauen und die JavaScript-Funktionen während der Arbeit erforschen.

- -

Vorbereitungen

- -

Um dieses Tutorial zu beginnen, möchten wir Sie bitten, eine lokale Kopie der Datei number-guessing-game-start.html (see it live here) zu erstellen. Öffnen Sie es sowohl in Ihrem Texteditor als auch in Ihrem Webbrowser. Im Moment sehen Sie eine einfache Überschrift, einen Absatz mit Anweisungen und ein Formular zur Eingabe einer Schätzung, aber das Formular wird derzeit nichts tun.

- -

Unseren gesamten Code werden wir innerhalb des {{htmlelement("script")}} Elements am Ende der HTML-Datei einfügen:

- -
<script>
-
-  // Ihr Programm steht hier
-
-</script>
-
- -

Variablen hinzufügen um Daten zu speichern

- -

Lassen Sie uns anfangen. Fügen Sie zunächst die folgenden Zeilen nach dem {{htmlelement("script")}} Element ein:

- -
let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
-
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
-
-let guessCount = 1;
-let resetButton;
- -

Obiger Code richtet die Variablen und Konstanten ein, die wir benötigen, um die Daten zu speichern, die unser Programm verwenden wird. Variablen sind im Grunde genommen Container für Werte (z.B. Zahlen oder Text). Sie erstellen eine Variable mit dem Schlüsselwort let (oder var) gefolgt von einem Namen für Ihre Variable (Sie werden mehr über den Unterschied zwischen den beiden Schlüsselwörtern in einem zukünftigen Artikel lesen). Konstanten werden verwendet, um Werte zu speichern, die Sie nicht ändern möchten, und werden mit dem Schlüsselwort const erstellt. In diesem Fall verwenden wir Konstanten, um Referenzen auf Teile unserer Benutzeroberfläche zu speichern; der Text in einigen von ihnen kann sich ändern, aber die referenzierten HTML-Elemente bleiben unverändert.

- -

Sie können Ihrer Variablen oder Konstanten einen Wert mit einem Gleichheitszeichen (=) zuweisen, gefolgt von dem Wert, den Sie ihr geben möchten.

- -

In unser Beispiel:

- -
    -
  • Die erste Variable — randomNumber — ist assigned a random number between 1 and 100, calculated using a mathematical algorithm.
    • -
  • The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code: - 
    <p class="guesses"></p>
-<p class="lastResult"></p>
-<p class="lowOrHi"></p>
    -
    • -
  • The next two constants store references to the form text input and submit button and are used to control submitting the guess later on. - 
    <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
-<input type="submit" value="Submit guess" class="guessSubmit">
    -
    • -
  • Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).
    • -
- -
-

Note: You'll learn a lot more about variables/constants later on in the course, starting with the next article.

-
- -

Functions

- -

Next, add the following below your previous JavaScript:

- -
function checkGuess() {
-  alert('I am a placeholder');
-}
- -

Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. After that we put two curly braces ({ }). Inside the curly braces goes all the code that we want to run whenever we call the function.

- -

When we want to run the code, we type the name of the function followed by the parentheses.

- -

Let's try that now. Save your code and refresh the page in your browser. Then go into the developer tools JavaScript console, and enter the following line:

- -
checkGuess();
- -

After pressing Return/Enter, you should see an alert come up that says "I am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.

- -
-

Note: You'll learn a lot more about functions later in the course.

-
- -

Operators

- -

JavaScript operators allow us to perform tests, do maths, join strings together, and other such things.

- -

If you haven't already done so, save your code, refresh the page in your browser, and open the developer tools JavaScript console. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing Return/Enter after each one, and see what results they return.

- -

First let's look at arithmetic operators, for example:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
+Addition6 + 9
-Subtraction20 - 15
*Multiplication3 * 7
/Division10 / 5
- -

You can also use the + operator to join text strings together (in programming, this is called concatenation). Try entering the following lines, one at a time:

- -
let name = 'Bingo';
-name;
-let hello = ' says hello!';
-hello;
-let greeting = name + hello;
-greeting;
- -

There are also some shortcut operators available, called augmented assignment operators. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:

- -
name += ' says hello!';
- -

This is equivalent to

- -
name = name + ' says hello!';
- -

When we are running true/false tests (for example inside conditionals — see below) we use comparison operators. For example:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
===Strict equality (is it exactly the same?) - 
-5 === 2 + 4 // false
-'Chris' === 'Bob' // false
-5 === 2 + 3 // true
-2 === '2' // false; number versus string
-
-
!==Non-equality (is it not the same?) - 
-5 !== 2 + 4 // true
-'Chris' !== 'Bob' // true
-5 !== 2 + 3 // false
-2 !== '2' // true; number versus string
-
-
<Less than - 
-6 < 10 // true
-20 < 10 // false
-
>Greater than - 
-6 > 10 // false
-20 > 10  // true
-
- -

Conditionals

- -

Returning to our checkGuess() function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.

- -

At this point, replace your current checkGuess() function with this version instead:

- -
function checkGuess() {
-  let userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    setGameOver();
-  } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
-    }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
- -

This is a lot of code — phew! Let's go through each section and explain what it does.

- -
    -
  • The first line (line 2 above) declares a variable called userGuess and sets its value to the current value entered inside the text field. We also run this value through the built-in Number() constructor, just to make sure the value is definitely a number.
    • -
  • Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword if, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns true, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the guessCount variable is equal to 1 (i.e. whether this is the player's first go or not): - 
    guessCount === 1
    - If it is, we make the guesses paragraph's text content equal to "Previous guesses: ". If not, we don't.
    • -
  • Line 6 appends the current userGuess value onto the end of the guesses paragraph, plus a blank space so there will be a space between each guess shown.
    • -
  • The next block (lines 8–24 above) does a few checks: -
      -
    • The first if(){ } checks whether the user's guess is equal to the randomNumber set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called setGameOver(), which we'll discuss later.
      • -
    • Now we've chained another test onto the end of the last one using an else if(){ } structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.
      • -
    • The final block chained onto the end of this code (the else { }) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.
      • -
    -
    • -
  • The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the guessCount variable so the player uses up their turn (++ is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.
    • -
- -

Events

- -

At this point we have a nicely implemented checkGuess() function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.

- -

Add the following line below your checkGuess() function:

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

- -

Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver() function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.

- -

Finishing the game functionality

- -

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- -
    -
  • The first two lines disable the form text input and button by setting their disabled properties to true. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.
    • -
  • The next three lines generate a new {{htmlelement("button")}} element, set its text label to "Start new game", and add it to the bottom of our existing HTML.
    • -
  • The final line sets an event listener on our new button so that when it is clicked, a function called resetGame() is run.
    • -
- -

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

- -
function resetGame() {
-  guessCount = 1;
-
-  const resetParas = document.querySelectorAll('.resultParas p');
-  for (let i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

- -
    -
  • Puts the guessCount back down to 1.
    • -
  • Empties all the text out of the information paragraphs.
    • -
  • Removes the reset button from our code.
    • -
  • Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.
    • -
  • Removes the background color from the lastResult paragraph.
    • -
  • Generates a new random number so that you are not just guessing the same number again!
    • -
- -

At this point you should have a fully working (simple) game — congratulations!

- -

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

- -

Loops

- -

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

- -

To start with, go to your browser developer tools JavaScript console again, and enter the following:

- -
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
- -

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

- -
    -
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. -
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. -
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

- -
let resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

- -

A small discussion on objects

- -

Let's add one more final improvement before we get to this discussion. Add the following line just below the let resetButton; line near the top of your JavaScript, then save your file:

- -
guessField.focus();
- -

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

- -

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

- -

In this particular case, we first created a guessField constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:

- -
const guessField = document.querySelector('.guessField');
- -

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

- -

Because guessField now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

- -
guessField.focus();
- -

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses constant contains a reference to a {{htmlelement("p")}} element, and the guessCount variable contains a number.

- -

Playing with browser objects

- -

Let's play with some browser objects a bit.

- -
    -
  1. First of all, open up your program in a browser.
    2. -
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. -
  3. Type in guessField and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. -
  4. Now type in the following: - 
    guessField.value = 'Hello';
    - The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. -
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.
    6. -
  6. Now try entering the following line: - 
    guesses.value
    - The browser will return undefined, because paragraphs don't have the value property.
    7. -
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: - 
    guesses.textContent = 'Where is my paragraph?';
    -
    8. -
  8. Now for some fun stuff. Try entering the below lines, one by one: - 
    guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
    - Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. -
- -

Finished for now...

- -

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/de/learn/javascript/first_steps/index.html b/files/de/learn/javascript/first_steps/index.html deleted file mode 100644 index 092a419e141fe1..00000000000000 --- a/files/de/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Erste Schritte mit JavaScript -slug: Learn/JavaScript/First_steps -tags: - - Anleitung - - Arrays - - Artikel - - Aufgaben - - Einsteiger - - Felder - - JavaScript - - Landing - - Lernmodul - - Mathematik - - Operatoren - - Variablen - - Zahlen - - Zeichenketten -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

In unserem ersten Lernmodul zu JavaScript beantworten wir grundlegende Fragen wie »Was ist JavaScript?«, »Wie sieht es aus?« und »Was kann es?«, bevor wir Sie bei Ihren ersten praktischen Erfahrungen mit JavaScript begleiten. Danach erklären wir einige der wichtigsten Bausteine – wie etwa Variablen, Zeichenketten, Zahlen und Felder – im Detail.

- -

Voraussetzungen

- -

Um mit diesem Lernmodul zu beginnen, brauchen Sie keinerlei Vorwissen in Sachen JavaScript – Sie sollten aber bereits ein wenig mit HTML und CSS vertraut sein. Wir raten Ihnen daher dazu, die folgendenen Lektionen durchzuarbeiten, bevor Sie mit JavaScript loslegen:

- - - -
-

Anmerkung: Falls Sie auf einem Computer, einem Tablet oder sonstigem Gerät arbeiten, auf dem Sie keine eigenen Dateien anlegen können, können Sie die Codebeispiele meist auch in einer Online-Coding-Umgebung wie JSBin oder Thimble ausprobieren.

-
- -

Anleitungen

- -
-
Was ist JavaScript?
-
Willkommen beim MDN-Einsteigerkurs zu JavaScript! In diesem ersten Artikel betrachten wir JavaScript von außen, beantworten Fragen wie »Was ist das?« und »Was macht es?«, und machen Sie mit dem Zweck von JavaScript vertraut.
-
Ein erster Abstecher zu JavaScript
-
Jetzt, da Sie ein wenig Hintergrundwissen über JavaScript und das, was Sie damit anstellen können haben, werden wir Ihnen in einem Crashkurs die wichtigsten Features von JavaScript anhand praktischer Beispiele beibringen.
-
Was lief verkehrt? JavaScript-Probleme beheben
-
Nachdem Sie im vorherigen Artikel das Spiel »Zahlen-Raten« konstruiert hatten, kann es sein, dass Sie feststellen mussten, dass es nicht funktionierte. Keine Angst – dieser Artikel soll Sie davor retten, sich wegen solcher Probleme die Haare zu raufen, indem er Ihnen einige einfache Tipps dazu gibt, wie Sie Fehler in JavaScript-Programmen finden und beheben.
-
Informationen, die Sie brauchen, speichern – Variablen
-
Nach dem Lesen der letzten paar Artikel sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es in Kombination mit anderen Web-Technologien einsetzen, und wie die wichtigsten Features in etwa aussehen. In diesem Artikel werden wir uns anschauen, wie man einen der grundlegendsten Bausteine von JavaScript verwendet – Variablen.
-
Einfache Mathematik in JavaScript – Zahlen und Operatoren
-
An dieser Stelle im Kurs erörtern wir Mathematik in JavaScript – wie wir Operatoren und andere Features verwenden können, um Zahlen erfolgreich dazu zu bringen, zu tun, was wir wollen.
-
Text verarbeiten – Zeichenketten in JavaScript
-
Als Nächstes richten wir unsere Aufmerksamkeit auf Zeichenketten – so nennt man Textschnippsel in der Programmierung. In diesem Artikel werden wir uns häufig benötigtes Wissen zu Zeichenketten ansehen, etwa wie man sie erstellt, wie man Anführungszeichen in Zeichenketten maskiert und wie man Zeichenketten aneinanderhängt.
-
Nützliche Zeichenketten-Methoden
-
Nachdem wir uns jetzt die Grundlagen von Zeichenketten angeeignet haben, schalten wir einen Gang hoch und überlegen uns, welche nützlichen Operationen wir mit den eingebauten Methoden auf Zeichenketten ausführen können: die Länge einer Zeichenkette festellen, Zeichenketten verknüpfen und aufteilen, ein Zeichen in einer Zeichenkette durch ein anderes ersetzen, und weitere.
-
Felder
-
Im letzten Artikel dieses Lernmoduls betrachten wir Felder – ein sauberer Weg, um eine Liste von Datenelementen unter einem einzigen Variablennamen abzulegen. Wir schauen uns an, warum das nützlich ist, und erforschen dann, wie man ein Feld anlegt, Elemente, die darin gespeichert sind, abruft, hinzufügt und entfernt, und vieles mehr.
-
- -

Aufgaben

- -

Die folgenden Aufgaben werden Ihr Verständnis der JavaScript-Grundlagen aus den vorherigen Anleitungen überprüfen.

- -
-
Lustige Geschichten erzeugen
-
In dieser Aufgabe sollen Sie einen Teil des Wissens, das Sie erworben haben, einsetzen, um eine spaßige Anwendung zu entwickeln, die zufällige, lustige Geschichten erzeugt. Viel Spaß!
-
diff --git a/files/de/learn/javascript/first_steps/silly_story_generator/index.html b/files/de/learn/javascript/first_steps/silly_story_generator/index.html deleted file mode 100644 index 63d5bf50ba12b9..00000000000000 --- a/files/de/learn/javascript/first_steps/silly_story_generator/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Der Lustige Geschichten Generator -slug: Learn/JavaScript/First_steps/Silly_story_generator -translation_of: Learn/JavaScript/First_steps/Silly_story_generator -original_slug: Learn/JavaScript/First_steps/lustige_geschichten_generator ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

In dieser Prüfung ist es deine Aufgabe das von dir in den vorherigen Artikeln gesammelten Wissen anzuwenden, indem due eine lustige Applikation schreibst, mit der man lustige Geschichten erzeugen kann. Viel Spass mit dem Lustige Geschichten Generator !

- - - - - - - - - - - - -
Vorraussetzungen:Bevor du dich an dieser Aufgabe versuchst, solltest du alle anderen Artikel dieses Moduls gelesen und bearbeitet haben.
Ziel:Verständnis von fundamentalen JavaScript Kenntnissen, wie Variablen, Operatoren und einfachen Datentypen (Zahlen, Zeichenketten, Arrays)
- -

Start

- -

Um mit deiner Aufgabe zu beginnen, solltest du::

- -
    -
  • Öffne die HTML-Vorlage und speichere eine lokale Kopie davon auf deinem Rechner in einen neuen Ordner als index.html. Die Datei enthält auch einige CSS-Anweisungen für das Styling.
    • -
  • Öffne die Seite, die die Text-Vorlagen enthält und öffne sie in einem seperaten Browserfenster oder -tab. Die brauchst du später noch.
    • -
- -
-

Notiz: Alternativ kannst du auch eine Seite wie JSBin oder Glitch benutzen, um die Aufgabe zu bearbeiten. Kopiere dazu einfach den Quelltext von HTML, CSS und JavaScript in einen dieser Online-Editoren. Wenn einer dieser Editoren kein extra JavaScript Panel haben sollte, kopiere das JavaScript einfach zwischen <script>-Tags in deinem HTML-Code.

-
- -

Projektbeschreibung

- -

Für diese Aufgabe geben wir dir einige HTML/CSS Codestücke, einige Textbausteine und ein paar JavaScript Funktionen in die Hand; du musst die fehlenden JavaScript-Teile ergänzen, um alles zu einem lauffähigen Programm zu kombinieren, was Folgendes tun kann:

- -
    -
  • es generiert eine lustige Geschichte, wenn der "Generate random story" button gedrückt wird.
    • -
  • es ersetzt den vorgegebenen Namen "Bob" in der Geschichte mit einem individuellen Namen, allerdings nur, wenn eine Eingabe in das "Enter custom name" Text-Feld gemacht worden ist, bevor der Button gedrückt wurde.
    • -
  • es konvertiert US-amerikanische Maßeinheiten, wie Gewicht und Temperatur in die englischen Äquivalente, wenn der Radio-Button entsprechend gesetzt wurde, bevor der Button gedrückt wurde.
    • -
  • es generiert immer wieder eine neue Variante der Geschichte, wenn der Button erneut gedrückt wird.
    • -
- -

Der folgende Screenshot zeigt dir ein Beispiel, wie die Ausgabe deines geschriebenen Programmes aussehen wird:

- -

- -

Um dich noch mehr mit deiner Arbeit vertraut zu machen, schau dir die fertige Lösung an (ohne im Quellcode zu spicken! )

- -

Schritt-für-Schritt Anleitung

- -

In den folgenden Abschnitten wird dir erklärt, was du tun musst.

- -

Grundaufbau:

- -
    -
  1. Erzeuge eine Datei mit dem Namen main.js, und zwar im selben Verzeichnis, wie deine index.html Datei.
    2. -
  2. Verbinde deine externe JavaScript Datei main.js mit deiner HTML Datei, indem du es mithilfe des Script-tags {{htmlelement("script")}} in deinem HTML aufrufst. Füge die Zeile kurz vor dem schließenden </body> tag ein.
    3. -
- -

Vorgegebene Variablen und Functions:

- -
    -
  1. Kopiere alle Code-Zeilen aus der Roh-Text-Datei, die unter der Überschrift "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" stehen und füge Sie an den Anfang deiner main.js Datei. Im Code wirst du 3 Variablen entdecken, die sich auf verschiedene Teile der Ausgabe beziehen: (customName) bezieht sich auf das "Enter custom name" Text Feld , the "Generate random story" button (randomize), and the {{htmlelement("p")}} element at the bottom of the HTML body that the story will be copied into (story), respectively. In addition you've got a function called randomValueFromArray() that takes an array, and returns one of the items stored inside the array at random.
    2. -
  2. Now look at the second section of the raw text file — "2. RAW TEXT STRINGS". This contains text strings that will act as input into our program. We'd like you to contain these inside variables inside main.js: -
      -
    1. Store the first, big long, string of text inside a variable called storyText.
      2. -
    2. Store the first set of three strings inside an array called insertX.
      3. -
    3. Store the second set of three strings inside an array called insertY.
      4. -
    4. Store the third set of three strings inside an array called insertZ.
      5. -
    -
    3. -
- -

Placing the event handler and incomplete function:

- -
    -
  1. Now return to the raw text file.
    2. -
  2. Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your main.js file. This: -
      -
    • Adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
      • -
    • Adds a partially-completed result() function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.
      • -
    -
    3. -
- -

Completing the result() function:

- -
    -
  1. Create a new variable called newStory, and set it's value to equal storyText. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to storyText, we'd only be able to generate a new story once.
    2. -
  2. Create three new variables called xItem, yItem, and zItem, and make them equal to the result of calling randomValueFromArray() on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of insertX by writing randomValueFromArray(insertX).
    3. -
  3. Next we want to replace the three placeholders in the newStory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xItem, yItem, and zItem. There is a particular string method that will help you here — in each case, make the call to the method equal to newStory, so each time it is called, newStory is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
    4. -
  4. Inside the first if block, add another string replacement method call to replace the name 'Bob' found in the newStory string with the name variable. In this block we are saying "If a value has been entered into the customName text input, replace Bob in the story with that custom name."
    5. -
  5. Inside the second if block, we are checking to see if the uk radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows: -
      -
    1. Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.
      2. -
    2. Inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate ' stone' onto the end of the result of the overall Math.round() call.
      3. -
    3. Inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate ' centigrade' onto the end of the result of the overall Math.round() call.
      4. -
    4. Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable.
      5. -
    -
    6. -
  6. Finally, in the second-to-last line of the function, make the textContent property of the story variable (which references the paragraph) equal to newStory.
    7. -
- -

Hints and tips

- -
    -
  • You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.
    • -
  • If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the {{htmlelement("html")}} element red — so the entire browser window should go red if the JavaScript is applied properly: - 
    document.querySelector('html').style.backgroundColor = 'red';
    -
    • -
  • Math.round() is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.
    • -
  • There are three instances of strings that need to be replaced. You may repeat the replace() method multiple times, or you can use regular expressions. For instance, let text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like'); will replace all instances of 'love' to 'like'. Remember, Strings are immutable!
    • -
- -

Assessment

- -

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/de/learn/javascript/first_steps/what_is_javascript/index.html b/files/de/learn/javascript/first_steps/what_is_javascript/index.html deleted file mode 100644 index a2e80f4e646ec7..00000000000000 --- a/files/de/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Was ist JavaScript? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript -original_slug: Learn/JavaScript/First_steps/Was_ist_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

Willkommen zum MDN-Einsteigerkurs für JavaScript! Im ersten Artikel werden wir uns JavaScript von aussen anschauen und Fragen beantworten wie "Was ist das?" oder "Was macht das?", und wir stellen sicher, das du weißt was JavaScript ist.

- - - - - - - - - - - - -
Voraussetzungen:Umgang mit einem Computer und ein Grundverständniss von HTML und CSS
Thema:JavaScript kennenlernen, was JavaScript tun kann und wie es in einer Webseite arbeitet.
- -

Eine Experten Definition

- -

JavaScript ist eine Programmiersprache mit der sich komplexe Programme in eine Webseite realisieren lassen. Immer wenn eine Webseite mehr macht als nur statische Informationen anzuzeigen, (zum Beispiel:

- -
    -
  • Zeitliche Inhalt-Updates ( Liveticker )
    • -
  • interaktive Karten ( Google Maps)
    • -
  • animierte 2D/3D Grafiken ( Spiele )
    • -
  • ...)
    • -
- -

kannst du dir sicher sein das JavaScript benutzt wurde. Es ist die Dritte der Drei Standard-Technologien im Web, die anderen beiden ( HTML und CSS ) werden in anderen Bereichen des MDN eingeführt und referenziert.

- -

- -
    -
  • {{glossary("HTML")}} ist die Markup-Language, die wir benutzen, um eine Webseite zu strukturieren und unsere Inhalte darzustellen, zum Beispiel durch Paragraphen, Überschriften, Tabellen aber auch um Bilder und Videos in die Webseite einzubinden.
    • -
  • {{glossary("CSS")}} ist die Sprache, um Stil-Regeln für HTML zu definieren, zum Beispiel, indem wir die Hintergrundfarbe und die Schriftart ändern.
    • -
  • {{glossary("JavaScript")}} ist eine Progammiersprache, die es erlaubt dynamische Updates der Inhalte, animierte Bilder und noch sehr viel mehr zu realisieren.
    • -
- -

Die drei Teile bauen gut auf einander auf. Hier mal ein einfaches Beispiel: Wir können zunächst HTML benutzten, um eine Struktur zu bauen.

- -
<p>Player 1: Chris</p>
- -

- -

Anschließend können wir mit einigen CSS-Regeln denn Satz schön aussehen lassen:

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor:pointer;
-}
- -

- -

Und zum Schluss können wir mit etwas JavaScript eine Reaktion auf das Klicken des Benutzers implementieren:

- -
var para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  var name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}

- -

Klick auf das Label und sieh, was passiert (den Code findest du auf GitHub und hier kannst du es in Aktion sehen).

- -

So und was kann ich jetzt damit machen?

- -

Der Kern von JavaScript ähnelt dem anderer Programmiersprachen. In JavaScript kannst du:

- -
    -
  • Nützliche Werte in Variablen speichern. Wie im Beispiel als wir eine Variable verwendet haben um den von dir eingebenen Namen zu speichern.
    • -
  • Operationen auf Texten ( in der Programmierung "Strings" genannt). Im oberen Beispiel hatten wir den String "Player 1:" und die Variable name verbunden und (wenn name "Chris" ist) haben wir den Text "Player 1: Chris" bekommen.
    • -
  • Mit Code auf Events in einer Webseite reagieren. Wir haben ein {{Event("click")}} Event benutzt um darauf zu reagieren wenn man auf das Label drückt.
    • -
  • Und viel mehr. ( siehe jedes größere Webprojekt.)
    • -
- -

Aber es gibt noch andere Funktionen die auf dem Kern von JavaScript aufbauen. Die sogenannten Application Programming Interfaces (APIs) geben dir noch mehr Funktionen mit denen du deine Projekte aufbessern kann.

- -

APIs sind von anderen Programmieren geschriebener Code die dir mehr Möglichkeiten geben für dein Programm. Die für dich schwer oder unmöglich wären selber zu programmieren. Sie sind das gleiche was Werkzeuge und Material für Handwerker sind. Es wäre deutlich schwerer alleine erst alle Werkzeuge und dann alle Materiallien herzustellen.

- -

Die APIs kann man generell in zwei Kategorien einteilen:

- -

- -

Browser APIs sind vom Webbrowser des Benutzers. Und sie können auf Ressourcen des computers zugreifen, oder erledigen Dinge die sehr komlpex sind. Ein paar Beispiele:

- -
    -
  • Die {{domxref("Document_Object_Model","DOM (Document Object Model)")}} API
    • -
  • Die Geolocation API ruft geografische Informationen ab. So ist es für Google Maps möglich dein Standort zu ermitteln um es danach z.B. auf einer Karte anzuzeigen.
    • -
  • The Canvas and WebGL APIs ermöglichen es dir, 2D oder 3D animierte Grafiken zu erstellen. Das ermöglicht die Darstellung und den Einsatz von Webtechnologien. Mehr kannst du unter Chrome Experiments und webglsamples erfahren.
    • -
  • Audio and Video APIs beispielsweise {{domxref("HTMLMediaElement")}} und WebRTC ermöglichen es wirklich spannende Dinge multimedial zu erstellen. Beispielsweise können Audio und Video in eine Webseite integriert werden, Ebenso ist es möglich die Webcam aufzunehmen und sie danach wiederzugeben. (Probiere unser einfaches Snapshot Beispiel um eine Einblick zu bekommen).
    • -
- -
-

Notiz: Viele der oben genannten Beispiele funktionieren in älteren Browsern nicht — wenn du dein Code ausprobieren willst, dann ist es eine gute Idee einen Modernen Browser wie Firefox, Chrome, Edge oder Opera zu benutzen. Es wird trotzdem nötig sein, sich mit Cross Browser Testing auseinander zu setzen, wenn es näher an eine Produktionssystem gehen soll(z.B. Echter Code die echte Kunden benutzen sollen).

-
- -

Drittanbieter-APIssind nicht standardmäßig im Browser integriert, und du wirst großenteils deren Code und Informationen von wo anders finden müssen. Zum Beispiel

- -
    -
  • Die Twitter APIerlaubt es dir Dinge, wie die aktuellsten Tweets auf deiner Webseite anzeigen zu lassen.
    • -
  • Google Maps APIerlaubt es dir, eigene Karten auf deiner Webseite anzeigen zu lassen oder andere ähnliche Funktionen zu benutzen
    • -
- -
-

Notiz: Diese APIs sind sehr fortschrittlich und werden in diesem Modul nicht weiter behandelt.Du findest weitere Informationen bei unseren ModulClientbasierte Web APIs Modul.

-
- -

Es sind noch viele weitere APIs Verfügbar! Trotzdem werde jetzt nicht zu aufgeregt, denn du wirst es nicht schaffen, das nächste Facebook, Google Maps, oder Instagram zu entwickeln, nach gerade mal 24 Stunden JavaScript lernen — es gibt nämlich noch viele Sachen die Behandelt werden müssen. Und deswegen bist du hier — also lass uns weiter machen!

- -

Was genau macht JavaScript auf deiner Webseite?

- -

Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.

- -

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

- -

- -

The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.

- -

This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS was there to affect, then errors would occur.

- -

Browser Sicherheit

- -

Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

- -
-

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

-
- -

JavaScript running order

- -

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

- -
var para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  var name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code block are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

- -

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

- -
-

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

-
- -

Interpreted versus compiled code

- -

You might hear the terms interpreted and compiled in the context of programming. JavaScript is an interpreted language — the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.

- -

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.

- -

Both approaches have different advantages, which we won't discuss at this point.

- -

Server-side versus client-side code

- -

You might also hear the terms server-side and client-side code, specially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about client-side JavaScript.

- -

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find more out about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

- -

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, inserting data requested from the server into it, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

- -

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

- -

How do you add JavaScript to your page?

- -

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

- -

Internal JavaScript

- -
    -
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. -
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. -
  3. Next, go to your text editor and add the following just before your closing </body> tag: - 
    <script>
-
-  // JavaScript goes here
-
-</script>
    -
    4. -
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: - 
    function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
    -
    5. -
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. -
- -
-

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </body> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

-
- -
-

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

-
- -

External JavaScript

- -

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

- -
    -
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. -
  2. Next, copy all of the script out of your current {{htmlelement("script")}} element and paste it into the .js file. Save that file.
    3. -
  3. Now replace your current {{htmlelement("script")}} element with the following: - 
    <script src="script.js"></script>
    -
    4. -
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got the JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.
    5. -
- -

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

- -

Inline JavaScript handlers

- -

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

- -
function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Click me!</button>
- -

You can try this version of our demo below.

- -

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

- -

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

- -

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you wanted the JavaScript to apply to.

- -

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

This might look a bit longer than the onclick attribute, but this will work for all buttons no matter how many are on the page, and how many are added or removed. The JavaScript does not need to be changed.

- -
-

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

-
- -

Comments

- -

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after 6 months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

- -
    -
  • A single line comment is written after a double forward slash (//), e.g. - 
    // I am a comment
    -
    • -
  • A multi-line comment is written between the strings /* and */, e.g. - 
    /*
-  I am also
-  a comment
-*/
    -
    • -
- -

So for example, we could annotate our last demo's JavaScript with comments like so:

- -
// Function: creates a new paragraph and append it to the bottom of the HTML body.
-
-function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Get references to all the buttons on the page and sort them in an array.
-  2. Loop through all the buttons and add a click event listener to each one.
-
-  When any button is pressed, the createParagraph() function will be run.
-*/
-
-var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Summary

- -

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

- -

JavaScript may seem a bit daunting right now, but don't worry — in this course we will take you through it in simple steps that will make sense going forward. In the next article we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

- -

In this module

- - - -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

diff --git a/files/de/learn/javascript/index.html b/files/de/learn/javascript/index.html deleted file mode 100644 index 362d34961a6af4..00000000000000 --- a/files/de/learn/javascript/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -tags: - - Anfänger - - JavaScript -translation_of: Learn/JavaScript ---- -

{{Glossary('JavaScript')}} ist eine wichtige Webtechnologie, die es erlaubt, Webseiten interaktiv zu gestalten.

- -

Wenn Ihr mehr als einfach nur eine Standard-Website erstellen wollt, solltet ihr wenigstens über JavaScript-Grundkenntnisse verfügen.
- Es ist nicht schwer, die Grundkenntnisse zu erlangen. Aber JavaScript ist eine sehr mächtige Technologie, die es euch erlaubt, komplexe Features zu verwenden - also gibt es keine Musterlösung, wie man diese Sprache erlernen kann.
- Wir empfehlen euch trotzdem, mit den nächsten Seiten anzufangen, um etwas mehr über JavaScript zu erfahren.
- Fangt von vorne an und lernt, bis ihr ganz hinten angekommen seid oder sucht euch einfach nur die Seite heraus, die ihr interessant findet.

- -
-
-

Die Grundsätze

- -

Fangt hier an, falls ihr noch keine Erfahrungen mit JavaScript habt.

- -
-
JavaScript Basics
-
JavaScript Basics zeigt euch, wie ihr anfangen könnt und gewährt euch Einblicke in die aufregende Welt von JavaScript.
-
JavaScript Guide
-
Falls Javascript noch Neuland für euch ist, wird euch dieser Guide Schritt für Schritt begleiten.
-
JavaScript Technologie-Überblick
-
EInführung zur weiten JavaScript-Landschaft.
-
Einführung zur Objekt-Orientierten Programmierung
-
Einführung in das Konzept von {{glossary("OOP","object-oriented programming")}} mit JavaScript.
-
-
- -
-

Weiteres

- -

Wenn ihr gefallen an JavaScript gefunden habt, gibt es hier einige Details, die euch interessieren könnten:

- - - -

In unserer Referenz findet ihr Details zu jedem Aspekt von JavaScript: Event Handler, Operatoren, Statements und Funktionen.

- -
-
\ No newline at end of file diff --git a/files/de/learn/javascript/objects/basics/index.html b/files/de/learn/javascript/objects/basics/index.html deleted file mode 100644 index 9c9dbd0bc73d5a..00000000000000 --- a/files/de/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: JavaScript object basics -slug: Learn/JavaScript/Objects/Basics -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

In diesem Artikel betrachten wir die fundamentale JavaScript Objekt Syntax und betrachten erneut einige JavaScript-Funktionalitäten, die im Kursverlauf bereits betrachtet wurden, immer im Hinblick darauf, dass viele der Merkmale, mit denen Sie bereits zu tun hatten, Objekte sind.

- - - - - - - - - - - - -
Vorkenntnisse:Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit JavaScript Grundlagen (siehe Erste Schritte und Bausteine).
Ziel:Verständnis für die grundlegende Theorie zur objektorientierten Programmierung, wie dies mit JavaScript zusammenhängt ("fast alle Dinge sind Objekte") und wie man mit JavaScript-Objekten zu arbeiten beginnt.
- -

Objekt Grundlagen

- -

Ein Objekt ist eine Sammlung von zusammenhängenden Daten und/oder Funktionalitäten. Diese bestehen üblicherweise aus verschiedenen Variablen und Funktionen, die Eigenschaften und Methoden genannt werden, wenn sie sich innerhalb von Objekten befinden. Arbeiten wir ein Beispiel durch, um besser zu verstehen, wie ein Objekt aussieht.

- -

Für den Anfang erzeugen wir eine lokale Kopie unserer Datei oojs.html. Sie enthält nur sehr wenig - ein {{HTMLElement("script")}} Element, um unseren Quelltext einzufügen. Wir werden diese Datei bzw. dieses Beispiel als Basis nutzen, um die grundlegende Objektsyntax zu erforschen. Während der Arbeit an diesem Beispiel sollten Sie ihre developer tools JavaScript console (z.B. Browser-Entwicklerwerkzeuge) geöffnet haben und bereit sein, einige Befehle einzutippen.

- -

Wie mit vielen Dingen in JavaScript beginnt das Erzeugen eines Objekts häufig mit der Definition und Initialisierung einer Variablen. Versuchen Sie, folgendes unterhalb des bestehenden JavaScript Quelltextes einzugeben, dann abzuspeichern und einen Browser refresh durchzuführen:

- -
var person = {};
- -

Wenn Sie person in ihrer JS console eingeben und die Entertaste drücken, sollten Sie folgendes Resultat erhalten:

- -
[object Object]
- -

Glückwunsch, Sie haben gerade ihr erstes Objekt erzeugt. Aufgabe erledigt! Aber dies ist ein leeres Objekt, also können wir noch nicht viel damit anfangen. Lassen sie uns unser Objekt erweitern, damit es folgendermaßen aussieht:

- -
var person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] +
-    ' is ' + this.age + ' years old. He likes ' +
-    this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

Nach dem Abspeichern und Aktualisieren des Browsers versuchen Sie, etwas vom Folgenden in der JavaScript-Konsole ihrer Browser Entwicklerwerkzeuge einzugeben:

- -
person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

Sie haben nun einige Daten und Funktionen innerhalb ihres Objekts und sind in der Lage, mit recht einfacher Syntax darauf zuzugreifen!

- -
-

Notiz: Wenn Sie Schwierigkeiten damit haben, dies zum Funktionieren zu bringen, versuchen Sie, Ihren Code mit unserer Version zu vergleichen - siehe oojs-finished.html (zzgl. see it running live). Die Live Version wird eine leere Anzeige erzeugen - das ist so in Ordnung - öffnen Sie erneut die Entwicklerwerkzeuge [Mozilla Firefox: F12 -> Konsole] und versuchen Sie, die obigen Befehle einzugeben um die Objektstruktur zu betrachten.

-
- -

Was passiert hier? Ein Objekt besteht aus vielen Elementen (engl. "Members", Anm. d. Übersetzers). Davon hat jedes einen Namen (z.B. name und age, wie oben) und einen Wert ( z.B. ['Bob', 'Smith' ] und 32). Jedes Name-Wert-Paar muss durch ein Komma getrennt sein und die jeweiligen Namen und Werte werden jeweils durch einen Doppelpunkt aufgeteilt. Die Syntax folgt stets diesem Muster:

- -
var objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-};
- -

Der Wert eines Objekt-Elements kann so ziemlich alles sein - in unserem person-Objekt haben wir einen String, eine Zahl, zwei Arrays und zwei Funktionen. Die ersten vier Elemente sind Datansätze und werden als Objekteigenschaften bezeichnet. Die letzten beiden Elemente sind Funktionen die es dem Objekt ermöglichen, etwas mit den Daten zu tun und werden als Methoden des Objekts bezeichnet.

- -

Ein Objekt wie dieses bezeichnet man als Objektliteral — wir haben die Inhalte des Objekts wortwörtlich aufgeschrieben, als wir es erzeugt haben. Dies steht im Gegensatz zu solchen Objekten, die aus Klassen instanziert werden, welche wir später genauer betrachten werden.

- -

Es ist durchaus üblich ein Objekt unter Verwendung eines Objektliterals zu erzeugen, wenn man eine Reihe von strukturierten, zusammenhängenden Datensätzen auf gewisse Weise übertragen möchte. Zum Beispiel beim Senden einer Anfrage an einen Server, um diese in einer Datenbank abzuspeichern. Ein einzelnes Objekt zu senden ist viel effizienter, als viele Datensätze einzeln und darüber hinaus ist es einfacher, mit einem Array zu arbeiten, wenn man einzelne Datensätze anhand ihres Namens identifizieren möchte.

- -

Punktnotation

- -

Oben haben Sie auf die Eigenschaften und Methoden des Objektes mittels Punktnotation zugegriffen. Der Objektbezeichner person dient als Namensraum - dieser muss zuerst angegeben werden, um auf etwas zuzugreifen, das innerhalb des Objektes eingekapselt ist. Als nächstes folgt der Punkt und anschließend der Bestandteil, auf den Sie zugreifen wollen - dies kann der Name einer einfachen Eigenschaft sein, ein Element einer Arrayeigenschaft oder der Aufruf einer der Objektmethoden, zum Beispiel:

- -
person.age
-person.interests[1]
-person.bio()
- -

Sub-Namensräume

- -

Es ist sogar möglich, den Wert eines Objekt-Members zu einem anderen Objekt umzuwandeln.

- -

Versuchen Sie zum Beispiel, den "name" Member von

- -
name: ['Bob', 'Smith'],
- -

zu

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

zu ändern. Hier erzeugen wir effektiv einen Sub-Namensraum. Das hört sich kompliziert an, ist es aber nicht - um auf diese Inhalte zuzugreifen, müssen Sie bloß den zusätzlichen Namensraum, getrennt durch einen Punkt, hinzufügen. Versuchen Sie folgendes in der JS Konsole:

- -
person.name.first
-person.name.last
- -

Wichtig: An diesem Punkt müssen Sie ihre Methodendeklarationen umarbeiten und Instanzen von

- -
name[0]
-name[1]
- -

zu

- -
name.first
-name.last
- -

ändern. Sonst greifen die Methoden ins Leere.

- -

Klammer-Notation

- -

Es gibt einen weiteren Weg, auf Objekteigenschaften zuzugreifen - durch Benutzung der Klammern-Notation. Statt dies zu schreiben:

- -
person.age
-person.name.first
- -

Schreibt man:

- -
person['age']
-person['name']['first']
- -

Dies gleicht der Art wie man auf Arrayelemente zugreift und ist im Grunde der gleiche Vorgang - statt einen Index zu nutzen, um ein Element auszuwählen, benutzt man den den Namen der mit jedem Memberwert assoziiert wird. Es wundert daher nicht, dass Objekte manchmal assoziative Arrays genannt werden - sie verknüpfen Zeichenketten mit Werten in der gleichen Weise, wie ein Array Indizes mit Werten verknüpft.

- -

Wertzuweisungen an Objekt-Elemente

- -

Bisher haben wir nur betrachtet, wie man Objekt-Elemente abruft ( getting ) — man kann den Wert von Objektelementen auch setzen ( updating ), indem man das Element, welches gesetzt werden soll, folgendermaßen deklariert:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Versuchen Sie, die Zeilen wie oben aufgeführt einzugeben und dann die Elemente wieder abzurufen, etwa so:

- -
person.age
-person['name']['last']
- -

Zuweisungen hören nicht beim Ändern von Werten existierender Eigenschaften und Methoden auf, man kann auch völlig neue Elemente erzeugen. Versuchen Sie dies in der JS Konsole:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

Sie können diese neuen Elemente nun ausprobieren:

- -
person['eyes']
-person.farewell()
- -

Ein nützlicher Aspekt der Klammer-Notation ist jener, dass man nicht nur Elementwerte dynamisch zuweisen kann, sondern auch Elementnamen. Nehmen wir an, wir wollen es Usern ermöglichen, selbstdefinierte Wertetypen in ihren people-Daten zu speichern, indem sie den Elementnamen und Wert in zwei Textfeldern eingeben. Wir könnten diese Werte so abrufen:

- -
var myDataName = nameInput.value;
-var myDataValue = nameValue.value;
- -

dann könnten wir diesen neuen Elementnamen und Wert zum person-Objekt so hinzufügen:

- -
person[myDataName] = myDataValue;
- -

Um das auszuprobieren, versuchen Sie, folgendes in ihren Quelltext einzufügen, gleich unterhalb der schliessenden, geschweiften Klammer des person-Objekts:

- -
var myDataName = 'height';
-var myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Nach dem Abspeichern und einem Browser-Refresh geben Sie folgendes in der Konsole ein:

- -
person.height
- -

Eine Eigenschaft zu einem Objekt hinzuzufügen ist mit der Punkt-Notation nicht möglich. Diese akzeptiert nur einen literalen Elementnamen, keine Variable, die auf einen Namen zeigt.

- -

Was bedeutet "this"?

- -

Sie haben vielleicht schon etwas seltsames in unseren Methoden bemerkt. Sehen wir uns zum Beispiel folgendes genauer an:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

Sie wundern sich wahrscheinlich, was dieses "this" sein soll. Das Schlüsselwort this referenziert das derzeitige Objekt, in dem der Code hineingeschrieben wurde - in diesem Fall wäre this gleichbedeutend mit person. Also warum nicht einfach stattdessen person schreiben? Wie Sie im Artikel Object-oriented JavaScript for beginners sehen werden, wenn wir damit beginnen, z.B. Konstruktoren zu erzeugen usw.: this ist sehr nützlich - es wird immer sicherstellen, dass die korrekten Werte verwendet werden, wenn sich der Kontext eines Elementes ändert (z.B. zwei unterschiedliche Objektinstanzen von person haben andere Namenswerte und sollten folgerichtig ihren jeweiligen Namenswert verwenden, wenn die greeting Methode aufgerufen wird).

- -

Lassen Sie uns dies an einem vereinfachten Paar Objekten vom Typ person verdeutlichen:

- -
var person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-var person2 = {
-  name: 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In diesem Fall wird person1.greeting() "Hi! I'm Chris." ausgeben; person2.greeting() wiederum wird "Hi! I'm Brian." ausgeben, obwohl der Quelltext in jedem Fall genau gleich lautet. Wie schon gesagt, this ist gleichbedeutend mit dem Objekt, in dem sich der Quelltext befindet - das ist nicht sehr nützlich, wenn man Objektliterale händisch schreibt, aber es ist sehr hilfreich, sobald Objekte dynamisch erzeugt werden (zum Beispiel unter Verwendung von Konstruktoren). Es wird im weiteren Verlauf alles deutlich werden.

- -

Sie haben die ganze Zeit Objekte verwendet

- -

Als Sie diese Beispiele durchgegangen sind, haben Sie wahrscheinlich gedacht, dass die Punktnotation, die Sie verwendet haben, sehr vertraut scheint. Es liegt daran, dass Sie diese im gesamten Kursverlauf benutzt haben. Jedes Mal, wenn wir ein Beispiel behandelten, welches Teile des built-in Browser API oder JavaScript-Objekte verwendete, haben wir Objekte verwendet, da solche Funktionalitäten genau mit der gleichen Art von Objektstrukturen aufgebaut werden, wie wir sie hier betrachtet haben. Diese sind allerdings etwas komplexer als die unserer eigenen, einfachen Beispiele.

- -

Wenn Sie String-Methoden wie diese verwenden,

- -
myString.split(',');
- -

haben Sie eine Methode verwendet, die eine Instanz der String-Klasse zur Verfügung stellte. Jedes Mal, wenn Sie einen String in ihrem Quelltext erstellen, wir dieser String automatisch als eine Instanz von String erzeugt, dadurch stehen einige allgemeine Methoden und Eigenschaften zur Verfügung.

- -

Wenn Sie im DOM folgende Zeilen verwenden,

- -
var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
- -

haben Sie Methoden verwendet, die von einer Instanz der Klasse Document zur Verfügung gestellt wurden. Für jede geladene Webseite wird eine Instanz von Document erzeugt, die document genannt wird, welche die gesamte Struktur, den Inhalt und weitere Merkmale wie die URL repräsentiert. Dies bedeutet wiederum, dass einige allgemeine Methoden und Eigenschaften entsprechend verfügbar gemacht werden.

- -

Das gleiche gilt für so ziemlich jedes andere built-in Objekt/API, welches Sie benutzt haben — z.B. Array, Math, usw.

- -

Beachten Sie, dass built-in Objekte/APIs nicht zwangsläufig immer automatisch eine Objektinstanz erzeugen. Ein Beispiel, die Notifications API — welche es modernen Browsern erlaubt, System Notifikationen zu generieren — benötigt für jede zu sendende Notifikation eine neue Objektinstanz, die Sie durch Verwendung des Konstruktors erzeugen müssen. Versuchen Sie, folgendes in Ihrer JavaScript Konsole einzugeben:

- -
var myNotification = new Notification('Hello!');
- -

Konstruktoren werden wir in einem späteren Artikel detaillierter behandeln.

- -
-

Bemerkung: Es ist nützlich, sich die Art, wie Objekte kommunizieren, als Nachrichtenweitergabe vorzustellen — wenn ein Objekt die Ausführung einer Aktion von einem anderen Objekt benötigt, wird es meist eine Nachricht an dieses Objekt mittels einer seiner Methoden senden und auf eine Antwort warten, welche wir als Rückgabewert bezeichnen.

-
- -

Zusammenfassung

- -

Glückwunsch, Sie haben das Ende unseres ersten JS Objekt Artikels erreicht —Sie sollten nun eine gute Vorstellung davon haben, wie man mit Objekten in JavaScript arbeitet — einschließlich der Erzeugung von eigenen, einfachen Objekte. Sie sollten auch zu schätzen wissen, dass Objekte als Daten- und Funktionsspeicherstrukturen sehr nützlich sind — wenn Sie versuchen würden, alle Eigenschaften und Methoden in unserem person-Objekt als einzelne Variablen bzw. Funktionen nachzuverfolgen, wäre das sehr ineffizient und frustrierend und wir würden riskieren, das gleichnamige Variablen kollidieren. Objekte lassen uns Informationen gefahrlos und sicher in ihrem jeweils eigenen Paket verstauen.

- -

Im nächsten Artikel werden wir damit beginnen, uns die Theorie der objektorientierten Programmierung (OOP) anzusehen und wie solche Techniken in JavaScript umgesetzt werden können.

- -

{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

In diesem Modul

- - diff --git a/files/de/learn/javascript/objects/classes_in_javascript/index.html b/files/de/learn/javascript/objects/classes_in_javascript/index.html deleted file mode 100644 index 3c975ea2854625..00000000000000 --- a/files/de/learn/javascript/objects/classes_in_javascript/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Objektorientiertes JavaScript für Beginner -slug: Learn/JavaScript/Objects/Classes_in_JavaScript -tags: - - Anfänger - - Artikel - - Erstellen - - Erzeugen - - Instanzen - - JavaScript - - Konstruktor - - Lernen - - OOJS - - OOP - - Objekt - - Objektorientiert - - codescripting -translation_of: Learn/JavaScript/Objects/Object-oriented_JS -original_slug: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Mit den nun bereits erlangten Grundlagen werden wir uns jetzt auf objektorientiertes JavaScript (OOJS) konzentrieren - dieser Artikel vermittelt Grundlagen der Theorie der objektorientierten Programmierung (OOP). Anschließend wird näher betrachtet, wie JavaScript Objektklassen über Konstruktor-Funktionen emuliert und wie Objekt-Instanzen erzeugt werden.

- - - - - - - - - - - - -
Voraussetzungen: -

Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit den Grundlagen von JavaScript (siehe erste Schritte und Bausteine) und OOJS-Grundlagen (siehe Einführung in Objekte).

-
Ziel:Die grundlegende Theorie hinter der objektorientierten Programmierung und wie diese in JavaScript umgesetzt ist ("alles ist ein Objekt") zu verstehen, und wie man Konstruktoren und Objektinstanzen erstellt.
- -

Objektorientierte Programmierung - Grundlagen

- -

Um zu beginnen möchten wir Ihnen eine vereinfachende und umfangreiche Übersicht darüber geben, was objektorientierte Programmierung (OOP) ist. Wir sagen vereinfachend, weil OOP schnell sehr kompliziert werden kann und an dieser Stelle eine vollständige Einführung sehr wahrscheinlich mehr verwirren als helfen würde. Die Grundidee von OOP ist, dass wir Objekte verwenden, um Dinge aus der realen Welt zu modellieren, die wir in unseren Programmen abbilden wollen und/oder eine einfache Möglichkeit bieten möchten, auf Funktionen zuzugreifen, die sonst nur schwer oder gar nicht genutzt werden könnten.

- -

Objekte können in Beziehung stehende Daten und Code enthalten, die Informationen über die Sache darstellen, die Sie modellieren möchten, sowie Funktionalitäten bzw. Verhalten, die Sie erhalten bzw. bereitstellen möchten. Objektdaten (und oft auch Funktionen) können geordnet (das Fachwort dafür lautet "gekapselt") innerhalb eines Objektpakets gespeichert werden (dem ein bestimmter Name gegeben werden kann, auf den man sich beziehen kann, der manchmal auch "Namensraum" genannt wird), wodurch es leicht strukturiert und zugänglich wird. Objekte werden auch häufig als Datenspeicher verwendet, die einfach über das Netzwerk gesendet werden können.

- -

Definieren einer Objektvorlage

- -

Betrachten wir ein einfaches Programm, das Informationen über die Schüler und Lehrer einer Schule anzeigt. Hier betrachten wir die OOP-Theorie im Allgemeinen, nicht im Zusammenhang mit einer bestimmten Programmiersprache.

- -

Um damit zu beginnen, könnten wir zu unserem person-Objekt aus dem vorhergehenden Kapitel zurückkehren, in dem wir Informationen und Funktionalitäten einer Person definiert hatten. Es gibt viele Dinge, die man über eine Person wissen kann (ihre Adresse, Größe, Schuhgröße, DNA-Profil, Ausweisnummer, signifikante Persönlichkeitsmerkmale ...), aber in diesem Fall sind wir nur daran interessiert, ihren Namen, ihr Alter, ihr Geschlecht und ihre Interessen zu betrachten. Und wir wollen auch in der Lage sein, eine kurze Erläuterung über sie auf der Grundlage dieser Daten zu schreiben und sie dazu zu bringen, "Hallo" zu sagen. Dies wird als "Abstraktion" bezeichnet - ein einfaches Modell einer komplexeren Sache wird erstellt, das die wichtigsten Aspekte in einer Weise darstellt, die für die Zwecke unseres Programms leicht zu bearbeiten sind.

- -

- -

Erstellen von realen Objekten

- -

Von unserer Klasse können wir Objektinstanzen erstellen - Objekte die Informationen und Funktionalitäten enthalten, die in der Klasse definiert worden. Von unserer Klasse person können wir nun einige tatsächliche Personen erzeugen:

- -

- -

Wenn eine Objektinstanz aus einer Klasse erzeugt wurde, wird die Konstruktorfunktion der Klasse ausgeführt, um die Objektinstanz zu erzeugen. Dieser Vorgang der Erzeugung einer Objektinstanz aus einer Klasse wird als Instanziierung bezeichnet - die Objektinstanz wird von der Klasse aus instanziiert.

- -

Spezialisierte Klassen

- -

In diesem Fall wollen wir keine allgemeinen Leute - wir wollen Lehrer und Schüler, die beide spezifischere Typen von Menschen sind. In OOP können wir neue Klassen erstellen, die auf anderen Klassen basieren - diese neuen Unterklassen können die Daten- und Funktionalitäten ihrer Elternklasse erben, so dass Sie die Funktionalitäten, die allen Objekttypen gemeinsam ist, wiederverwenden können, anstatt sie duplizieren zu müssen. Da wo sich Funktionalitäten zwischen den Klassen unterscheiden soll, können bei Bedarf spezialisierte Features direkt in den betroffenen Klassen entsprechend definieren.

- -

- -

Das ist wirklich sehr nützlich - Lehrer und Schüler haben viele gemeinsame Merkmale wie Name, Geschlecht und Alter, so dass es praktisch ist, diese Merkmale nur einmal zu definieren. Sie können dasselbe Merkmal auch separat in verschiedenen Klassen definieren, da jede Definition dieses Merkmals in einem anderen Namensraum liegt. Die Begrüßung eines Schülers könnte z.B. die Form "Yo, ich bin firstName" haben (z.B. Yo, ich bin Sam), während ein Lehrer etwas formelleres verwenden könnte, wie z.B. "Hallo, mein Name ist prefix lastName und ich unterrichte Subject". (z.B. Hallo, ich heiße Mr. Griffiths und unterrichte Chemie).

- -
-

Hinweis: Das Fachwort für die Fähigkeit, mehrere Objekttypen mit der gleichen Funktionalität zu implementieren, nennt man Polymorphismus. Nur für den Fall, dass Sie sich das fragen.

-
- -

Sie können nun Objektinstanzen aus Ihren Unterklassen erzeugen. Beispiel:

- -

- -

Im weiteren Verlauf dieses Kapitels werden wir uns damit beschäftigen, wie die OOP-Theorie in JavaScript in die Praxis umgesetzt werden kann.

- -

Konstruktoren und Objektinstanzen

- -

JavaScript verwendet spezielle Funktionen, die "Konstruktor-Funktionen" genannt werden, um Objekte und deren Eigenschaften zu definieren und zu initialisieren. Sie sind nützlich, weil Sie oft auf Situationen stoßen werden, in denen Sie nicht wissen, wie viele Objekte Sie erstellen werden müssen. Konstruktoren bieten die Möglichkeit, so viele Objekte wie nötig auf einfache und effektive Weise zu erstellen, indem sie alle erforderlichen Daten und Funktionen an diese Objekte anhängen.

- -

Lassen Sie uns nun das Erstellen von Klassen über Konstruktoren und das Erstellen von Objektinstanzen aus ihnen heraus speziell in JavaScript untersuchen. Zuerst möchten wir Sie bitten, eine neue lokale Kopie der oojs.html-Datei zu erstellen, die wir im vorhergehenden Kapitel bereits benutzt haben.

- -

Ein einfaches Beispiel

- -
    -
  1. Fangen wir damit an, wie man eine Person mit einer normalen Funktion definieren könnte. Fügen Sie diese Funktion innerhalb des Skript-Elements der oojs.html hinzu: - 
    function createNewPerson(name) {
-  var obj = {};
-  obj.name = name;
-  obj.greeting = function() {
-    alert('Hi! I\'m ' + obj.name + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Sie können nun eine neue Person erstellen, indem Sie diese Funktion aufrufen - bitte geben Sie die folgenden Zeilen in der JavaScript-Konsole Ihres Browsers ein: - 
    var salva = createNewPerson('Salva');
-salva.name;
-salva.greeting();
    - Das funktioniert zwar ganz gut, aber es ist ein bisschen umständlich. Wenn wir wissen, dass wir ein Objekt erstellen wollen, warum müssen wir dann explizit ein neues leeres Objekt erstellen und es zurückgeben? Glücklicherweise bietet uns JavaScript eine praktische Vereinfachung in Form von Konstruktorfunktionen - nutzen wir jetzt eine!
    3. -
  3. Ersetzen Sie die vorher implementierte Funktion durch folgende: - 
    function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
    -
    4. -
- -

Die Konstruktorfunktion ist die JavaScript-Version einer Klasse. Sie werden feststellen, dass sie alle Eigenschaften hat, die man in einer Funktion erwartet, obwohl sie weder etwas zurückgibt oder explizit ein Objekt erzeugt - sie definiert im Grunde nur Eigenschaften und Methoden. Sie werden sehen, dass dieses Schlüsselwort auch hier verwendet wird - es besagt im Grunde, dass immer dann, wenn eine dieser Objektinstanzen erzeugt wird, die Eigenschaft name des Objekts gleich dem Namenswert ist, der an den Konstruktoraufruf übergeben wird, und die Methode greeting() wird ebenfalls den Namenswert verwenden, der an den Konstruktoraufruf übergeben wird.

- -
-

Hinweis: Der Name einer Konstruktorfunktion beginnt normalerweise mit einem Großbuchstaben - diese Konvention wird verwendet, um Konstruktorfunktionen im Code leichter erkennbar zu machen.

-
- -

Wie rufen wir also einen Konstruktor auf, um einige Objekte zu erstellen?

- -
    -
  1. Fügen Sie die folgenden Zeilen unterhalb Ihres vorherigen Codezusatzes ein: - 
    var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
    -
    2. -
  2. Speichern Sie Ihren Code, laden Sie ihn im Browser neu und geben Sie die folgenden Zeilen in Ihre JS-Konsole ein: - 
    person1.name
-person1.greeting()
-person2.name
-person2.greeting()
    -
    3. -
- -

Cool! Sie werden nun sehen, dass wir zwei neue Objekte auf der Seite haben, die jeweils unter einem anderen Namespace gespeichert sind - wenn Sie auf ihre Eigenschaften und Methoden zugreifen, müssen Sie Aufrufe mit person1 oder person2 starten; die darin enthaltene Funktionalität ist sauber verpackt, damit sie nicht mit anderen Funktionen kollidiert. Sie haben jedoch die gleiche Namenseigenschaft und die gleiche Methode greeting() zur Verfügung. Beachten Sie, dass Sie Ihren eigenen Namenswert verwenden, der Ihnen bei der Erstellung zugewiesen wurde. Das ist ein Grund, warum es sehr wichtig ist, diesen zu verwenden, so dass Sie Ihre eigenen Werte verwenden werden, und nicht irgendeinen anderen Wert.

- -

Sehen wir uns die Konstruktoraufrufe noch einmal genauer an:

- -
var person1 = new Person('Bob');
-var person2 = new Person('Sarah');
- -

In jedem Fall wird das neue Schlüsselwort verwendet, um dem Browser mitzuteilen, dass wir eine neue Objektinstanz erstellen wollen, gefolgt vom Funktionsnamen mit den erforderlichen Parametern in Klammern. Das Ergebnis wird in einer Variablen gespeichert - sehr ähnlich wie bei dem Aufruf einer Standardfunktion. Jede Instanz wird entsprechend dieser Definition erzeugt:

- -
function Person(name) {
-  this.name = name;
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  };
-}
- -

Nach dem Anlegen der neuen Objekte enthalten die Variablen person1 und person2 die folgenden Objekte:

- -
{
-  name: 'Bob',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-{
-  name: 'Sarah',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

Beachten Sie, dass wir beim Aufruf unserer Konstruktor-Funktion jedes Mal greeting() definieren, was nicht ideal ist. Um dies zu vermeiden, können wir stattdessen Funktionen auf dem Prototypen definieren, die wir uns später genauer ansehen werden.

- -

Erstellen unseres finalen Konstruktors

- -

Das Beispiel, das wir oben betrachtet haben, war nur ein einfaches Beispiel, um den Einstieg zu erleichtern. Lassen Sie uns nun weitermachen und unsere finale Konstruktor-Funktion Person() erstellen.

- -
    -
  1. Entfernen Sie den bisher eingefügten Code und fügen Sie nachfolgenden Konstruktor als Ersatz hinzu - dies ist im Prinzip genau dasselbe, wie das einfache Beispiel, nur etwas komplexer: - 
    function Person(first, last, age, gender, interests) {
-  this.name = {
-     first : first,
-     last : last
-  };
-  this.age = age;
-  this.gender = gender;
-  this.interests = interests;
-  this.bio = function() {
-    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  };
-  this.greeting = function() {
-    alert('Hi! I\'m ' + this.name.first + '.');
-  };
-}
    -
    2. -
  2. Fügen Sie nun unter dem Code von oben folgende Zeile ein, um eine Objektinstanz zu erzeugen: - 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    -
    3. -
- -

Sie werden nun sehen, dass Sie auf die Eigenschaften und Methoden zugreifen können, genau wie wir es zuvor getan haben - probieren Sie das in Ihrer JS-Konsole aus:

- -
person1['age']
-person1.interests[1]
-person1.bio()
-// etc.
- -
-

Hinweis: Wenn Sie Probleme haben, dies zum Laufen zu bringen, vergleichen Sie Ihren Code mit unserer Version - siehe oojs-class-finished.html (hier können Sie auch sehen, wie es live läuft).

-
- -

Weitere Übungen

- -

Versuchen Sie zunächst, ein paar weitere eigene Objekte hinzuzufügen, und versuchen Sie, die Eigenschaften bzw. Funktionen der daraus erzeugten Objektinstanzen zu nutzen bzw. zu verändern.

- -

Außerdem gibt es einige Probleme mit unserer bio()-Methode - die Ausgabe enthält immer das Pronomen "He", egal ob Ihre Person weiblich ist oder einem anderen Geschlecht angehört. Und die bio()-Methode wird nur zwei Interessen enthalten, auch wenn mehr im Interessen-Array aufgelistet sind. Finden Sie heraus, wie man das in der Klassendefinition (Konstruktor) beheben kann? Sie können jeden beliebigen Code in einen Konstruktor einfügen (Sie werden wahrscheinlich ein paar Bedingungen und eine Schleife benötigen). Überlegen Sie sich, wie die Sätze je nach Geschlecht und je nachdem, ob die Anzahl der aufgelisteten Interessen 1, 2 oder mehr als 2 beträgt, unterschiedlich strukturiert werden sollten.

- -
-

Hinweis: Wenn Sie nicht weiterkommen, haben wir eine Antwort bzw. Lösung in unserem GitHub-Repo bereitgestellt (Sehen Sie es sich hier an) - versuchen Sie bitte aber erst einmal, die Lösung selbst zu schreiben!

-
- -

Andere Möglichkeiten, Objektinstanzen zu erzeugen

- -

Bisher haben wir zwei verschiedene Wege gesehen, um eine Objektinstanz zu erzeugen - die Deklaration eines Objektes als Literal und die Verwendung einer Konstruktorfunktion (siehe oben).

- -

Diese machen Sinn, aber es gibt auch andere Wege - wir möchten Sie mit diesen vertraut machen, falls Sie auf Ihren Reisen im Web auf sie stoßen sollten.

- -

Der Object()-Konstruktor

- -

Zuerst können Sie den Object() Konstruktor verwenden, um ein neues Objekt zu erstellen. Ja, sogar generische Objekte haben einen Konstruktor, der ein leeres Objekt erzeugt.

- -
    -
  1. Geben Sie dies in die JavaScript-Konsole Ihres Browsers ein: - 
    var person1 = new Object();
    -
    2. -
  2. Diese speichert ein leeres Objekt in der Variable person1. Sie können dann diesem Objekt Eigenschaften und Methoden mit Punkt- oder Klammer-Notation hinzufügen, wie gewünscht. Versuchen Sie diese Beispiele in Ihrer Konsole: - 
    person1.name = 'Chris';
-person1['age'] = 38;
-person1.greeting = function() {
-  alert('Hi! I\'m ' + this.name + '.');
-};
    -
    3. -
  3. Sie können auch ein Objektliteral als Parameter an den Object() Konstruktor übergeben, um es mit Eigenschaften/Methoden vorzufüllen. Versuchen Sie folgendes in Ihrer JS-Konsole: - 
    var person1 = new Object({
-  name: 'Chris',
-  age: 38,
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-});
    -
    4. -
- -

Verwendung der Methode create()

- -

Konstruktoren können Ihnen helfen, Ihren Code zu ordnen - Sie können Konstruktoren an einer Stelle erstellen und dann bei Bedarf Instanzen davon erstellen - und es ist immer nachvollziehbar, woher sie kommen.

- -

Einige Leute ziehen es jedoch vor, Objektinstanzen zu erstellen, ohne vorher Konstruktoren zu erstellen, insbesondere wenn sie nur wenige Instanzen eines Objekts erstellen müssen. JavaScript hat eine eingebaute Methode namens create(), die es Ihnen einfach ermöglicht, dies zu tun. Mit ihr können Sie ein neues Objekt auf Basis eines beliebigen vorhandenen Objekts erstellen.

- -
    -
  1. Wenn Ihre fertige Übung aus den vorherigen Abschnitten im Browser geladen ist, versuchen Sie folgendes in Ihrer JavaScript-Konsole: - 
    var person2 = Object.create(person1);
    -
    2. -
  2. Nun geben Sie bitte folgendes in die JavaScript-Konsole ein: - 
    person2.name
-person2.greeting()
    -
    3. -
- -

Sie werden sehen, dass person2 auf der Basis von person1 erstellt wurde - es hat die gleichen Eigenschaften und die gleiche Methode, die ihm zur Verfügung stehen.

- -

Eine Einschränkung von create() ist, dass der IE8 es nicht unterstützt. Daher können Konstruktoren effektiver sein, wenn Sie ältere Browser unterstützen wollen.

- -

Wir werden die Auswirkungen von create() später noch genauer untersuchen.

- -

Zusammenfassung

- -

Dieser Artikel hat eine vereinfachte Sicht der objektorientierten Theorie geliefert - das ist noch lange nicht die ganze Geschichte, aber er gibt Ihnen eine Vorstellung davon, womit wir es hier zu tun haben. Darüber hinaus haben wir damit begonnen, verschiedene Möglichkeiten der Erzeugung von Objektinstanzen zu betrachten.

- -

Im nächsten Artikel werden wir uns mit JavaScript-Objekt-Prototypen beschäftigen.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

- -

In diesem Modul

- - diff --git a/files/de/learn/javascript/objects/index.html b/files/de/learn/javascript/objects/index.html deleted file mode 100644 index 9178a14f6d4e05..00000000000000 --- a/files/de/learn/javascript/objects/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Introducing JavaScript objects -slug: Learn/JavaScript/Objects -tags: - - Beginner - - Guide - - JavaScript - - Objects - - Objekte - - Programmieren - - Prototypes - - Tutorial -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

In JavaScript sind die meisten Dinge Objekte die auf dem Grundstein von JavaScript aufgebaut worden sind. Hierzu zählen Strings, Arrays welche mittels der API grundlegend fundamentiert sind. Du kannst auch deine eigenen Objekte definieren um Dinge aus der Realität in Programmcode wiederzuverwenden. Die objektorientierte Programmierung ist wichtig um ein komplettes Verständnis zu bekommen als auch die Sprache wirklich zu verstehen. Aus diesem Grund stellen wir euch einige Lernmodule an um besser in das Thema einsteigen zu können.
-
- Aber hier wollen wir euch erstmal erklären, was ein Objekt genau ist und wie die Syntax für eine Definition eines Objektes ist.

- -

Voraussetzungen

- -

Bevor du mit diesem Lernmodul beginnst, solltest du dich mit HTML und CSS vertraut gemacht haben. Solltest du noch keine Vorkenntnisse haben, so sehe dir bitte Einführung in HTML und Einführung in CSS an bevor du mit JavaScript beginnst.

- -

Auch solltest du dich vorher mit den Grundlagen von JavaScript vertraut gemacht haben, sie dazu bitte in folgenden Modulen nach: JavaScript: Erste Schritte und JavaScript: Elementare Grundlagen.

- -
-

Hinweis: Solltest du an einem Computer arbeiten, der dir das Erstellen und Bearbeiten von Dateien nicht erlaubt, so kannst du Dienste wie JSBin oder Thimble für diesen Kurs nutzen.

-
- -

Guides

- -
-
Objekt Grundlagen
-
In diesem ersten Kaptiel erklären wir euch wie ein Objekt fundamental aufgebaut ist, als auch die Syntax zu diesem. Wir behandeln außerdem einige Gebiete, die wir schon bereits gesehen haben, denn die meisten Dinge in JavaScript mit denen du arbeiten wirst sind Objekte.
-
Objektorientiertes JavaScript für Anfänger
-
Hier zeigen wir euch die objektorientierte Programmierung (OOP/OOJS) - hier gibt es erste Einblicke wie du dein Objekt am besten definierst und dann zeigen wir dir, wie JavaScript dein Objekt zum Leben bringt durch Instanziierung.
-
Objekt Prototypes
-
Prototypes ist der Begriff für den Vorgang für die weitergehende Verwendung eines Objektes mit vererbbaren Funktionen. Solltest du bereits eine andere objektorientierte Programmiersprache benutzt haben, wirst du merken, dass JavaScript anders funktioniert. In dem Modul behandeln wir außerdem wie die Verkettung von Prototypen funktioniert und schauen uns die Eigenschaften eines Objektes genauer an, mit denen wir auch die Funktionen definieren werden.
-
Vererbung in JavaScript
-
Nachdem du in den vorherigen Lernmodulen einiges über OOJS gelernt hast, zeigen wir dir hier wie du Funktionen und Eigenschaften mit einem anderen Objekt vererbben kannst.
-
Arbeiten mit JSON Strukturen
-
JavaScript Object Notation (JSON) ist eine textbasierte Struktursprache um Daten kompakt und wiederverwendbar zu machen. Diese Struktursprache ist die gängigste in JavaScript um Objekte zu beschreiben, speichern oder für andere Dienste verfügbar zu machen.
-
Objekte an einer Übung definieren
-
In dieser Übung möchten wir nochmal alle vorherigen Themen aufgreifen und nochmal mit der Syntax von Objekten üben und dabei etwas Spaß mit springenden, bunten Bällen haben.
-
- -

Übungen

- -
-
Erstelle neue Funktionen für springende Bälle
-
In dieser Übung greifen wir uns das Demo-Projekt aus dem vorherigen Artikel nochmal auf und werden die springenden Bälle mit neuen Objektfunktionen erweitern.
-
diff --git a/files/de/learn/javascript/objects/json/index.html b/files/de/learn/javascript/objects/json/index.html deleted file mode 100644 index fa579909806765..00000000000000 --- a/files/de/learn/javascript/objects/json/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Arbeiten mit JSON -slug: Learn/JavaScript/Objects/JSON -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

Die JavaScript Object Notation (JSON) ist ein standardisiertes, textbasiertes Format, um strukturierte Daten auf Basis eines JavaScript Objekts darzustellen. Es wird häufig für die Übertragung von Daten in Webanwendungen verwendet (z.B. das Senden einiger Daten vom Server zum Client, damit sie auf einer Webseite angezeigt werden können oder umgekehrt). Es wird dir sehr häufig über den Weg laufen, daher geben wir dir in diesem Artikel alles mit, damit du JSON mithilfe von JavaScript nutzen kannst, einschließlich des Umwandelns von JSON, damit du auf die enthaltenen Daten zugreifen und JSON erstellen kannst.

- - - - - - - - - - - - -
Voraussetzungen:Grundlegende Computerkenntnisse, grundlegendes Verständnis von HTML, CSS und JavaScript (siehe First steps und Building blocks) sowie OOJS Grundkenntnisse (siehe Introduction to objects).
Ziele:Zu verstehen, wie man mit Daten im JSON-Format arbeitet und eigene JSON-Objekte erstellt.
- -

Nein, im ernst, was ist JSON?

- -

{{glossary("JSON")}} ist ein textbasierendes Datenformat angelehnt an die JavaScript Object Syntax und popularisiert durch Douglas Crockford. Auch wenn es der JavaScript Object Syntax ähnelt, ist es dennoch Javascript unabhängig. Heutzutage unterstützen zahlreiche Programmierumgebungen JSON, sowohl lesend (parse) als auch schreibend.

- -

JSON existiert als eine Zeichenkette (String) — das ist nützlich, um Daten über das Netzwerk zu übermitteln. Es muss in ein natives JavaScript Objekt umgewandelt werden, wenn du auf die Daten zugreifen willst. Das ist kein großes Ding — JavaScript stellt ein globales JSON-Objekt zur Verfügung, das Methoden zur Konvertierung zwischen den beiden zur Verfügung stellt.

- -
-

Note: Eine Zeichenkette in ein natives Objekt umzuwandeln nennt man parsing, wohingegen die Umwandlung eines nativen Objekts in eine Zeichenkette, um es im Netzwerk zu übermitteln, stringification genannt wird.

-
- -

Ein JSON Objekt kann als einfache Textdatei mit der Endung .json gespeichert werden oder einen {{glossary("MIME type")}} als application/json.

- -

JSON Struktur

- -

Wie bereits erwähnt, ist JSON ein textbasierendes Datenformat angelehnt an die JavaScript Object Syntax. Es können sowohl in JSON als auch in JavaScript Objekten die gleichen Datentypen verwendet werden — Strings, Zahlen, Arrays, Booleans und andere Objekttypen. Das erlaubt es dir, eine Datenhierarchie zu erstellen. Z.B.:

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Würden wir das Objekt in ein JavaScript Programm laden und die Variable superHeroes auslesen, könnten wir die Objektdaten mittels der gleichen dot/bracket notation abrufen, wie in diesem Artikel behandelt: JavaScript object basics. Zum Beispiel:

- -
superHeroes.homeTown
-superHeroes['active']
- -

Um Daten in tieferen hierarchischen Ebenen abrufen zu können, müssen die benötigten Eigenschaften und Array-indizes aneinandergereiht werden. Um beispielsweise die dritte superpower des zweiten hero in der members Liste abrufen zu können, würdest du sowas machen:

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. Zuerst haben wir den Variablennamen — superHeroes.
    2. -
  2. Darin wollen wir die members Eigenschaft abrufen, also benutzen wir["members"].
    3. -
  3. members beinhaltet ein Array mit Objekten. Wir wollen das zweite Objekt innerhalb des Arrays abrufen, also benutzen wir [1].
    4. -
  4. Innerhalb des Objekts wollen wir die powers Eigenschaft abrufen, demnach benutzen wir ["powers"].
    5. -
  5. Die powers Eigenschaft ist ein Array, welches die gewählten superpowers der heroes hält. Wir wollen die dritte superpower, also [2].
    6. -
- -
-

Note: Wir haben euch das zuvor erwähnte JSON in einer Variable in unserem JSONTest.html Beispiel (siehe source code) zur Verfügung gestellt. Versuche es hochzuladen und die Daten in der Variable mittels der JavaScript Konsole deines Browser's abzurufen.

-
- -

Arrays als JSON

- -

Eben haben wir angemerkt, dass JSON Text im Grunde wie ein JavaScript object aussieht, und das ist weitestgehend richtig. "Weitestgehend" da ein Array eben gültiges(valid) JSON darstellt, zum Beispiel:

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

Dieses Arrays ist komplett gültges JSON. Die Array Elemente müssen lediglich beginnend mit des Array's Index - z.B. [0]["powers"][0] - abgerufen werden.

- -

Anmerkungen

- -
    -
  • JSON ist ein reines Datenformat — es beinhaltet nur Eigenschaften, keine Methoden.
    • -
  • JSON benötigt immer doppelte Anführungszeichen - also " " - bei Strings und Eigenschaftsnamen. Einfache Anführungszeichen - also ' ' - sind nicht zulässig (invalid).
    • -
  • Ein einziges deplaziertes Kommata oder ähnliches lässt eine JSON Datei korrupieren und fehlschlagen. Du solltest alle Daten mit denen du arbeitest oder die du verarbeiten möchtest gründlich überprüfen (wobei computer-generiertes JSON bei korrekt funktionierenden JSON generatoren eher nicht fehleranfällig ist). Um dein JSON zu überprüfen, kannst du zum Beispiel eine Anwendung wie JSONLint benutzen.
    • -
  • JSON kann jeden Datentyp der zur Einbindung in JSON geeignet ist annehmen, nicht nur Arrays oder Objekte. So kann zum Beispiel ein einfacher String oder eine number ein gültiges JSON Objekt sein.
    • -
  • Im Gegensatz zu JavaScript Code in dem Objekt Eigenschaften Anführungszeichen nicht zwingend benötigen, dürfen in JSON nur strings in Anführungszeichen als Objekt Eigenschaften genutzt werden.
    • -
- -

Aktives Lernen: Arbeiten mithilfe eines JSON Beispiels

- -

Lasst uns durch ein Beispiel durcharbeiten um zu veranschaulichen wie wir mit JSON Daten auf einer Webseite arbeiten können.

- -

Los Geht's

- -

Anfangs, mache lokale Kopien unserer heroes.html und style.css Dateien. Letztere enthält ein paar einfache CSS Elemente um unsere Seite ein wenig zu stylen, während die Erste einen einfachen HTML body enthält:

- -
<header>
-</header>
-
-<section>
-</section>
- -

Und ein {{HTMLElement("script")}} Element, welches den JavaScript Code halten wird, den wir etwas später erstellen werden. Momentan existieren nur zwei Zeilen, welche auf das {{HTMLElement("header")}} und {{HTMLElement("section")}} Element referenzieren und sie in Variablen speichern:

- -
var header = document.querySelector('header');
-var section = document.querySelector('section');
- -

Wir haben unsere JSON Daten auf unserem GitHub Account veröffentlicht: https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

Wir laden es in unsere Seite und benutzen geschickt die DOM Manipulation um es so darzustellen:

- -

- -

JSON erhalten

- -

Um JSON zu erhalten, werden wir unsere API, genannt {{domxref("XMLHttpRequest")}} (oft XHR genannt), benutzen. Es handelt sich um ein sehr nützliches JavaScript Objekt, das es uns erlaubt, Netzwerkabfragen auszuführen um Ressourcen eines Servers via JavaScript (e.g. Bilder, Text, JSON, sogar HTML snippets) zu erhalten. So können wir kleine Sektionen mit Inhalt aktualisieren ohne die komplette Seite neuzuladen. Das führt zu responsiveren Webseiten und klingt ziemlich spannend. Allerdings fällt es außerhalb des hier behandelten Themas um es ausführlicher zu erklären.

- -
    -
  1. Zuerst werden wir die JSON URL die wir abrufen möchten in einer Variable speichern. Füge Folgendes zum Ende deines JavaScript Codes hinzu: - 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. Um eine Abfrage zu erstellen, müssen wir eine neue Objekt-Abfrage-Instanz des XMLHttpRequest constructors mit dem Keyword new erstellen. Füge Folgenden Code hinzu: - 
    var request = new XMLHttpRequest();
    -
    3. -
  3. Nun müssen wir eine neue Abfrage mit der open() Methode eröffnen. Füge Folgenden Code hinzu: - 
    request.open('GET', requestURL);
    - -

    Die Methode braucht mindestens zwei Parameter — wobei es weitere optionale Parameter gibt. Für dieses Beispiel werden wir uns jedoch nur den einfachen, zwingend erforderlichen Parametern widmen :

    - -
      -
    • Die HTTP Methode die für die Netzwerkabfrage erforderlich ist. In diesem Fall reicht GET aus, da wir ja nur simple Daten erhalten wollen .
      • -
    • Die Ziel-URL — Die JSON URL die wir zuvor in der requestURL Variable gespeichert haben.
      • -
    -
    4. -
  4. Füge als Nächstes folgende Zeilen hinzu — hier setzen wir den responseType auf JSON, sodass XHR weiß, dass der Server JSON zurückgeben und im Hintergrund in ein JavaScript Objekt konvertiert werden soll. Anschließend versenden wir die Abfrage mit der send() Methode: - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. Zu guter Letzt müssen wir auf die Antwort des Servers (response) warten und sie anschließend weiterverarbeiten. Füge folgenden Code hinter deinem bisherigen Code hinzu: - 
    request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Hier speichern wir die Response zu unserer Abfrage (verfügbar in der response Eigenschaft) in einer Variable namens: superHeroes; Diese Variable enthält nun das JavaScript Objekt basieren auf dem JSON! Nun geben wir das Objekt an zwei Funktionsaufrufe weiter— der erste wird den <header> mit korrekte Daten füllen, während der zweite einen Informationssteckbrief eines jeden Helden im Team erstellt und es in die <section>einfügt.

- -

Wir packen den Code in einen Eventhandler der ausgeführt wird, sobald das load event auf das Request Objekt angestoßen wird (siehe onload) — das passiert, da das load Event angestoßen wird sobald die response erfolgreich zurückgegeben wurde. Das garantiert, dass request.response definitiv verfügbar sein wird, wenn wir damit etwas machen wollen.

- -

Populating the header

- -

Wir haben also die JSON Daten bekommen und in ein JavaScript Objekt konvertiert. Nun arbeiten wir damit und schreiben zwei Funktionen. Als Erstes, füge folgende Funktion unter deinen bisherigen Code:

- -
function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  var myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

Wir haben den Parameter jsonObj aufgerufen, um uns daran zu erinnern, dass das JavaScript Objekt seinen Ursprung in JSON hat. Wir erstellen zunächst ein {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

- -

Creating the hero information cards

- -

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

- -
function showHeroes(jsonObj) {
-  var heroes = jsonObj['members'];
-
-  for (var i = 0; i < heroes.length; i++) {
-    var myArticle = document.createElement('article');
-    var myH2 = document.createElement('h2');
-    var myPara1 = document.createElement('p');
-    var myPara2 = document.createElement('p');
-    var myPara3 = document.createElement('p');
-    var myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    var superPowers = heroes[i].powers;
-    for (var j = 0; j < superPowers.length; j++) {
-      var listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

- -

Next, we use a for loop to loop through each object in the array. For each one, we:

- -
    -
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. -
  2. Set the <h2> to contain the current hero's name.
    3. -
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. -
  4. Store the powers property in another new variable called superPowers — this contains an array that lists the current hero's superpowers.
    5. -
  5. Use another for loop to loop through the current hero's superpowers — for each one we create a <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. -
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. -
- -
-

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

-
- -
-

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

-
- -

Converting between objects and text

- -

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

- -
request.responseType = 'json';
- -

But sometimes we aren't so lucky — sometimes we'll receive a raw JSON string, and we'll need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we'll need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

- -
    -
  • parse(): Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.
    • -
  • stringify(): Accepts an object as a parameter, and returns the equivalent JSON string form.
    • -
- -

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  var superHeroesText = request.response; // get the string from the response
-  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

- -
var myJSON = { "name": "Chris", "age": "38" };
-myJSON
-var myString = JSON.stringify(myJSON);
-myString
- -

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

- -

Summary

- -

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

- -

- -

In this module

- - - -

diff --git a/files/de/learn/javascript/objects/object_prototypes/index.html b/files/de/learn/javascript/objects/object_prototypes/index.html deleted file mode 100644 index 9071ec892e5669..00000000000000 --- a/files/de/learn/javascript/objects/object_prototypes/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: Object prototypes -slug: Learn/JavaScript/Objects/Object_prototypes -tags: - - Anfänger - - Beitrag - - 'I10n:priority' - - JavaScript - - Konstruktor - - Lernen - - OOJS - - OOP - - Objekt - - Prototypen - - Prototypketten - - codescripting - - create() -translation_of: Learn/JavaScript/Objects/Object_prototypes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -

Prototypen dienen als Mechanismus, durch den JavaScript-Objekte Eigenschaften voneinander erben. In diesem Artikel erklären wir, wie Prototypketten funktionieren und betrachten, wie die Prototypeneigenschaft verwendet werden kann, um Methoden zu bestehenden Konstruktoren hinzuzufügen.

- - - - - - - - - - - - -
Voraussetzungen: -

Verständnis der Funktionen in JavaScript, sowie Vertrautheit mit den Grundlagen von JavaScript (siehe erste Schritte und Bausteine) und OOJS-Grundlagen (siehe Einführung in Objekte).

-
Ziel:JavaScript-Objekt-Prototypen zu verstehen, wie Prototypenketten funktionieren und wie man neue Methoden auf die Prototyp-Eigenschaft hinzufügt.
- -

Eine Prototyp-basierte Sprache?

- -

JavaScript wird oft als eine prototypische bzw. Prototyp-basierte Sprache beschrieben - um Vererbung zu ermöglichen, können Objekte dazu ein Prototyp-Objekt haben, das als Vorlageobjekt fungiert, von dem es Methoden und Eigenschaften erbt. Das Prototyp-Objekt eines Objekts kann auch ein Prototyp-Objekt haben, von dem es Methoden und Eigenschaften erbt und so weiter. Dies wird oft als eine Prototypenkette bezeichnet und erklärt, warum verschiedene Objekte Eigenschaften und Methoden haben, die auf anderen Objekten definiert sind, die ihnen dadurch zur Verfügung stehen.

- -

Genau gesagt basieren die Eigenschaften und Methoden auf den Prototyp-Eigenschaften der Konstruktorfunktionen der Objekte, nicht auf den Objektinstanzen selbst.

- -

In JavaScript wird eine Verbindung zwischen der Objektinstanz und ihrem Prototyp hergestellt (seine __proto__-Eigenschaft, die von der Prototyp-Eigenschaft des Konstruktor abgeleitet ist). Die Eigenschaften und Methoden stammen aus der Kette der Prototypen (aufwärts der Prototypenkette folgend).

- -
-

Hinweis: Es ist wichtig zu wissen, dass es einen Unterschied gibt zwischen dem Prototypen eines Objekts (das über Object.getPrototypeOf(obj) oder über die veraltete __proto__-Eigenschaft zur Verfügung gestellt wird) und der Prototyp-Eigenschaft von Konstruktorfunktionen. Erstere ist die Eigenschaft auf jeder Instanz, letztere ist die Eigenschaft auf dem Konstruktor. Das heißt, Object.getPrototypeOf(new Foobar()) bezieht sich auf dasselbe Objekt wie Foobar.prototype.

-
- -

Schauen wir uns ein Beispiel an, um dies etwas deutlicher zu machen.

- -

Verstehen von Prototyp-Objekten

- -

An dieser Stelle gehen wir zu dem Beispiel zurück, an dem wir unsere Konstruktor-Funktion Person() fertig gestellt haben - bitte laden Sie das Beispiel in Ihrem Browser. Sie können dazu gerne auch unsere Beispieldatei oojs-class-further-exercises.html nutzen (hier finden Sie den Quellcode), falls Ihnen der Quellcode aus dem vorangegangenen Artikel nicht mehr zur Verfügung steht.

- -

In diesem Beispiel haben wir eine Konstruktorfunktion wie nachfolgend gezeigt definiert:

- -
function Person(first, last, age, gender, interests) {
-
-  // property and method definitions
-  this.name = {
-    'first': first,
-    'last' : last
-  };
-  this.age = age;
-  this.gender = gender;
-  //...see link in summary above for full definition
-}
- -

Wir haben dann davon eine Objektinstanz erzeugt, die wie folgt aussieht:

- -
let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
- -

Wenn Sie in Ihre JavaScript-Konsole person1. eingeben, sollten Sie sehen können, das der Browser versucht, die Ausgabe der in dem Objekt verfügbaren Eigenschaften automatisch zu vervollständigen.

- -

- -

In dieser Liste können Sie die Eigenschaften sehen, die in der Konstruktor-Funktion person() definiert sind - name, age, gender, interests, bio und greeting. Sie werden jedoch auch einige andere Eigenschaften sehen können - toString, valueOf etc. - diese sind im Prototyp-Objekt der Konstruktor-Funktion person() definiert.

- -

- -

Was passiert eigentlich, wenn man eine Methode auf person1 ausführt, welche aktuell nur im Objekt definiert ist? Zum Beispiel:

- -
person1.valueOf()
- -

Die Methode Object.valueOf() wird von person1 geerbt, weil deren Konstruktor-Funktion person() ist und der Prototyp von person() gleich Object() ist. valueOf() gibt den Wert des Objekts zurück, dass die Methode aufruft - probieren Sie es aus und sehen selber! Was in diesem Fall passiert, sieht wie folgt aus:

- -
    -
  • Der Browser prüft zunächst, ob für das person1-Objekt eine valueOf()-Methode verfügbar ist, wie sie in seinem Konstruktor Person() definiert ist.
    • -
  • Wenn das nicht der Fall ist, prüft der Browser im Prototyp-Objekt des Konstruktors von Person(), nämlich Object(), ob in diesem eine Methode valueOf() verfügbar ist. Ist dem so, wird die Methode aufgerufen und alles läuft!
    • -
- -
-

Hinweis: Wir möchten nochmals darauf hinweisen, dass die Methoden und Eigenschaften in der Prototypenkette nicht von einem Objekt auf ein anderes kopiert werden, sondern dass der Zugriff auf sie erfolgt, indem man in der Kette wie oben beschrieben nach oben geht.

-
- -
-

Hinweis: Es gibt keine offizielle Möglichkeit, direkt auf das Prototyp-Objekt eines Objekts zuzugreifen - die "Links" zwischen den Elementen in der Kette sind in einer internen Eigenschaft definiert, die in der Spezifikation für die JavaScript-Sprache als [[prototype]] bezeichnet wird (siehe {{glossary("ECMAScript")}}). Die meisten modernen Browser verfügen jedoch über eine Eigenschaft namens __proto__ (mit 2 Unterstrichen auf jeder Seite), die das Prototyp-Objekt des Konstruktors des betroffenen Objekts enthält. Geben Sie zum Beispiel person1.__proto__ und person1.__proto__.__proto__ in der JavaScript-Konsole ein, um zu sehen, wie die Kette im Code aussieht!

- -

Seit ECMAScript 2015 können Sie auf das Prototyp-Objekt eines Objekts indirekt über Object.getPrototypeOf(obj) zugreifen.

-
- -

Die Prototyp-Eigenschaft: Wo vererbte Mitglieder definiert sind

- -

Wo sind also die vererbten Eigenschaften und Methoden definiert? Wenn Sie sich die Referenzseite des Konstruktors object ansehen, sehen Sie auf der linken Seite eine große Anzahl von Eigenschaften und Methoden aufgelistet - viel mehr als die Anzahl der geerbten Eigenschaften, die wir auf dem person1-Objekt gesehen haben. Einige werden vererbt, andere nicht - warum ist das so?

- -

Wie oben erwähnt sind die geerbten diejenigen, die auf der Prototyp-Eigenschaft (man könnte es einen Unter-Namensraum nennen) definiert sind - damit sind die Eigenschaften gemeint, die mit Object.prototype. beginnen und nicht die, die nur mit Object beginnen. Der Wert der Prototyp-Eigenschaft ist ein Objekt, das im Grunde ein Bereich zum Speichern von Eigenschaften und Methoden ist, die wir an Objekte weiter unten in der Prototyp-Kette vererben wollen.

- -

Somit stehen Object.prototype.toString(), Object.prototype.valueOf() usw. für alle Objekttypen zur Verfügung, die von Object.prototype erben, einschließlich neuer Objektinstanzen, die vom Person()-Konstruktor erstellt werden.

- -

Object.is(), Object.keys() und andere Eigenschaften, die nicht innerhalb des Prototyp-Bereichs definiert sind, werden nicht von Objektinstanzen oder Objekttypen geerbt, die von Object.prototype erben. Sie sind Methoden/Eigenschaften, die nur auf dem Object()-Konstruktor selbst verfügbar sind.

- -
-

Hinweis: Das mag ein wenig befremdlich wirken - wie können Sie eine Methode in einem Konstruktor definieren, wenn er selber eine Funktion ist? Eine Funktion ist ebenfalls eine Art Objekt - siehe auch auf der Referenzseite des function()-Konstruktors, damit Sie es besser nachvollziehen können.

-
- -
    -
  1. Sie können die vorhandenen Prototyp-Eigenschaften selbst überprüfen - gehen Sie zurück zu unserem vorherigen Beispiel und geben Sie folgendes in die JavaScript-Konsole ein: - 
    Person.prototype
    -
    2. -
  2. Die Ausgabe wird Ihnen nicht sehr viel zeigen, da wir nichts im Prototyp unseres Custom-Konstruktors definiert haben! Standardmäßig startet der Prototyp eines Konstruktors immer leer. Versuchen Sie jetzt Folgendes: - 
    Object.prototype
    -
    3. -
- -

Sie werden eine große Anzahl von Methoden sehen, die in den Prototyp-Eigenschaften des Objekts (Object) definiert sind, die dann auf Objekten verfügbar sind, die von diesem Objekt (Object) erben, wie bereits gezeigt.

- -

Sie werden weitere Beispiele für die Vererbung von Prototypenketten sehen, die in JavaScript verfügbar sind - versuchen Sie zum Beispiel, nach den Methoden und Eigenschaften zu suchen, die auf dem Prototyp der globalen Objekte String, Date, Number und Array definiert sind. Diese haben alle eine Anzahl von Elementen, die auf ihrem Prototyp definiert sind, wie z.B. bei der Erstellung einer Zeichenfolge:

- -
let myString = 'This is my string.';
- -

myString hat per se eine Reihe nützlicher Methoden zur Verfügung, wie split(), indexOf(), replace() usw.

- -
-

Hinweis: Es lohnt sich unseren ausführlicheren Leitfaden zur Verwendung von Prototypen in JavaScript zu lesen, sobald Sie diesen Abschnitt verinnerlicht haben und mehr wissen möchten. Dieser Abschnitt ist absichtlich stark vereinfacht, um diese Konzepte bei der ersten Begegnung für Sie etwas leichter verständlich zu machen.

-
- -
-

Wichtig: Die Prototyp-Eigenschaft ist einer der Teile von JavaScript, die stark verwirrend benannt worden sind - man könnte meinen, dass this auf das Prototyp-Objekt des aktuellen Objekts zeigt, aber das tut sie nicht. prototype ist ein internes Objekt, auf das mit __proto__ zugegriffen werden kann, erinnern Sie sich?

-
- -

Zurück zu create()

- -

Etwas früher im Beitrag haben wir gezeigt, wie die Methode Object.create() verwendet werden kann, um eine neue Objektinstanz zu erzeugen.

- -
    -
  1. Geben Sie folgendes in der JavaScript-Konsole Ihres vorherigen Beispiels ein: - 
    let person2 = Object.create(person1);
    -
    2. -
  2. Was create() tatsächlich tut, ist lediglich ein neues Objekt aus einem spezifizierten Prototyp-Objekt zu erstellen. Hier wird person2 erstellt indem person1 als Prototyp Objekt verwendet wird. Man kann das überprüfen indem man das folgende in der Konsole eingibt: - 
    person2.__proto__
    -
    3. -
- -

Dies wird das person1-Objekt zurückgeben.

- -

Die Konstruktor-Eigenschaft

- -

Jede Konstruktorfunktion hat eine Prototyp-Eigenschaft, deren Wert ein Objekt ist, das eine constructor-Eigenschaft enthält. Diese Konstruktoreigenschaft zeigt auf die ursprüngliche Konstruktorfunktion. Wie Sie im nächsten Abschnitt sehen werden, werden Eigenschaften, die auf der Person.prototype-Eigenschaft (oder im Allgemeinen auf der Prototyp-Eigenschaft einer Konstruktorfunktion, die ein Objekt ist, wie im obigen Abschnitt erwähnt) definiert sind, für alle Instanzobjekte verfügbar, die mit dem Person()-Konstruktor erstellt werden. Daher ist die Konstruktor-Eigenschaft auch für die beiden Objekte Person1 und Person2 verfügbar.

- -
    -
  1. Probieren Sie zum Beispiel diese Befehle in der Konsole aus: - 
    person1.constructor
-person2.constructor
    - -

    Diese sollten beide den Person()-Konstruktor zurückgeben, da dieser die ursprüngliche Definition dieser Instanzen enthält.

    - -

    Ein cleverer Trick ist es, dass Sie am Ende der constructor-Eigenschaft Klammern setzen können (die alle erforderlichen Parameter enthalten), um eine weitere Objektinstanz aus diesem Konstruktor zu erzeugen. Der Konstruktor ist schließlich eine Funktion und kann daher mit Hilfe von Klammern aufgerufen werden; Sie müssen nur das neue Schlüsselwort einfügen, um anzugeben, dass Sie die Funktion als Konstruktor verwenden wollen.

    -
    2. -
  2. Geben Sie folgendes in die Konsole ein: - 
    let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
    -
    3. -
  3. Nun können Sie zum Beispiel auf die Funktionen Ihres neuen Objekts zuzugreifen: - 
    person3.name.first
-person3.age
-person3.bio()
    -
    4. -
- -

Das funktioniert gut. Sie werden es nicht oft benutzen müssen, aber es kann wirklich nützlich sein, wenn Sie eine neue Instanz erzeugen wollen und aus irgendeinem Grund keine Referenz auf den Originalkonstruktor leicht verfügbar ist.

- -

Die constructor-Eigenschaft hat andere Verwendungsmöglichkeiten. Wenn Sie z.B. eine Objektinstanz haben und den Namen des Konstruktors zurückgeben wollen, von dem das Objekt eine Instanz ist, können Sie Folgendes verwenden:

- -
instanceName.constructor.name
- -

Geben Sie zum Beispiel folgendes ein:

- -
person1.constructor.name
-
- -
-

Hinweis: Der Wert von constructor.name kann sich ändern (aufgrund von prototypischer Vererbung, Bindung, Präprozessoren, Transpilern, etc.), so dass Sie für komplexere Beispiele stattdessen den instanceof-Operator verwenden sollten.

-
- -
    -
- -

Prototypen modifizieren

- -

Schauen wir uns ein Beispiel für die Veränderung der Prototyp-Eigenschaft einer Konstruktor-Funktion näher an - Methoden, die dem Prototyp hinzugefügt werden, sind dann auf allen Objektinstanzen verfügbar, die aus dem Konstruktor heraus erzeugt werden. An diesem Punkt werden wir schließlich etwas zum Prototyp unseres Konstruktors Person() hinzufügen.

- -
    -
  1. Gehen Sie zurück zu unserem Beispiel oojs-class-further-exercises.html und erstellen Sie eine lokale Kopie des Quellcodes. Fügen Sie unter dem vorhandenen JavaScript den folgenden Code hinzu, der eine neue Methode zur Prototyp-Eigenschaft des Konstruktors hinzufügt: - - 
    Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};
    -
    2. -
  2. Speichern Sie bitte den Code, laden den Browser neu und geben bitte folgendes in die Konsole ein: - 
    person1.farewell();
    -
    3. -
- -

Sie sollten eine Warnmeldung erhalten, die den Namen der Person, wie er im Konstruktor definiert ist, anzeigt. Das ist wirklich nützlich, aber noch nützlicher ist, dass die gesamte Vererbungskette dynamisch aktualisiert wurde, wodurch diese neue Methode automatisch auf allen vom Konstruktor abgeleiteten Objektinstanzen verfügbar ist.

- -

Denken Sie einen Moment in Ruhe darüber nach. In unserem Code definieren wir den Konstruktor, dann erzeugen wir ein Instanzobjekt aus dem Konstruktor, dann fügen wir dem Prototypen des Konstruktors eine neue Methode hinzu:

- -
function Person(first, last, age, gender, interests) {
-
-  // Definition der Eigenschaften und methoden
-
-}
-
-let person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
-
-Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};
- -

Aber die Methode farewell() ist immer noch auf der person1-Objektinstanz verfügbar - ihre Mitglieder wurden automatisch aktualisiert, um die neu definierte Methode farewell() aufzunehmen.

- -
-

Hinweis: Sie können dazu gerne auch unsere Beispieldatei oojs-class-further-exercises.html nutzen (hier finden Sie den Quellcode), falls Ihnen der Quellcode aus dem vorangegangenen Artikel nicht mehr zur Verfügung steht bzw. Ihr Quellcode nicht funktioniert.

-
- -

Sie werden nur selten Eigenschaften sehen, die auf der Prototyp-Eigenschaft definiert sind, weil sie nicht sehr flexibel sind, wenn sie so definiert worden. Sie könnten zum Beispiel eine solche Eigenschaft hinzufügen:

- -
Person.prototype.fullName = 'Bob Smith';
- -

Das ist nicht sehr flexibel, da die Person vielleicht nicht so genannt wird. Es wäre viel besser, den vollen Namen aus name.first und name.last zu bilden:

- -
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
- -

Dies funktioniert jedoch nicht, da sich this in diesem Fall auf den globalen Bereich bezieht, nicht auf den Funktionsbereich. Der Aufruf dieser Eigenschaft würde undefined zurückgeben. Dies funktionierte gut auf die Methode, die wir früher im Prototyp definiert haben, weil sie innerhalb eines Funktionsbereichs sitzt, der erfolgreich in den Objektinstanzbereich übertragen wird. Sie können also konstante Eigenschaften auf dem Prototyp definieren (d.h. solche, die sich nie ändern müssen), aber im allgemeinen funktioniert es besser, Eigenschaften innerhalb des Konstruktors zu definieren.

- -

In der Tat ist es üblich, für weitere Objektdefinitionen die Eigenschaften innerhalb des Konstruktors und die Methoden auf dem Prototyp zu definieren. Dies macht den Code leichter lesbar, da der Konstruktor nur die Eigenschaftsdefinitionen enthält und die Methoden in separate Blöcke aufgeteilt sind. Zum Beispiel:

- -
// Konstruktor mit der Definition der Eigenschaften
-
-function Test(a, b, c, d) {
-  // property definitions
-}
-
-// eine erste Methode wird definiert
-
-Test.prototype.x = function() { ... };
-
-// eine zweite Methode wird definiert
-
-Test.prototype.y = function() { ... };
-
-// etc.
- -

Dieses Muster kann in Aktion im Beispiel der Schulplan-App von Piotr Zalewa gesehen werden.

- -

Zusammenfassung

- -


- Dieser Beitrag hat Objekt-Prototypen in JavaScript behandelt, einschließlich wie Prototyp-Objektketten es ermöglichen, das Objekte voneinander Funktionen (ver)erben können, sowie Prototyp-Eigenschaften und wie diese verwendet werden können, um neue Methoden zu Konstruktoren hinzuzufügen. Darüber hinaus andere mit den Themen verwandte Themen.

- -

Im nächsten Artikel sehen wir uns an, wie Sie die Vererbung von Funktionalität zwischen zwei Ihrer eigenen benutzerdefinierten Objekte implementieren können.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

- -

In diesem Modul

- - diff --git a/files/de/learn/server-side/express_nodejs/index.html b/files/de/learn/server-side/express_nodejs/index.html deleted file mode 100644 index 9e2b85bf6b2a56..00000000000000 --- a/files/de/learn/server-side/express_nodejs/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Express Web Anwendungsrahmen (Node.js/JavaScript) -slug: Learn/Server-side/Express_Nodejs -translation_of: Learn/Server-side/Express_Nodejs ---- -
{{LearnSidebar}}
-Express ist ein beliebter, weitgehend vorgabefreier Anwendungsbausatz (Framework) für das Web, das in Javascript geschrieben und in der Node.js Laufzeitumgebung beheimatet ist. Das Modul beschreibt einige Schlüsselvorteile dieses Anwendungsrahmens, wie eine Anwendungsumgebung aufzusetzen ist und wie allgemeine Entwicklungs- und Bereitstellungsaufgaben durchzuführen sind.
- -

Voraussetzungen

- -

Bevor Sie dies Modul beginnen sollten Sie verstehen, was serverseitige Web-Anwendungsentwicklung und Web Frameworks sind – idealerweise durch Studium unseres Moduls Erste Schritte Server-side Website Programmierung.
- Allgemeine Kenntnisse in Programmierung und Javascript werden vorausgesetzt, sind aber zum Verständnis der grundlegenden Konzepte nicht ausschlaggebend.

- -
-

Anmerkung: Diese Website bietet zahlreiche Quellen zum Lernen von Javascript im Kontext Client-seitiger Entwicklung: Javascript, Javascript Guide, Javascript Basics, Javascript (Lernen). Der Kern von Javascript und seine Konzepte sind identisch für Server-seitige Entwicklung mit Node.js und dieses Material ist daher relevant.
- Node.js bietet Schnittstellen/APIs zur Unterstützung von Funktionalitäten, die in einer Umgebung ohne Browser nützlich sind, z.B. um HTTP Server zu bauen oder auf das Dateisystem zuzugreifen, aber es unterstützt keine Javascript APIs zur Interaktion mit Browser oder DOM.

- -

Dieser Leitfaden bietet Informationen zum Umgang mit Node.js und Express. Darüber hinaus gibt es ausgezeichnete Informationsquellen im Internet und in Form von Fachbüchern – Links sind u.a. hier zu finden: How do I get started with Node.js (StackOverflow) und What are the best resources for learning Node.js? (Quora).

-
- -

Leitfaden

- -
-
Express/Node Einführung
-
Im ersten Artikel zum Thema Express werden die Fragen beantwortet "Was ist Node?" und "Was ist Express?", außerdem beleuchtet er die Besonderheiten des Express Web Frameworks. Wir werden die wichtigsten Eigenschaften sowie die Grundbausteine einer Express Anwendung kennen lernen (auch wenn wir hier noch keine Entwicklungsumgebung zum Testen aufsetzen werden).
-
Aufsetzen einer Node (Express) Entwicklungsumgebung
-
Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.
-
Express Tutorial: The Local Library website
-
The first article in our practical tutorial series explains what you'll learn and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.
-
Express Tutorial Part 2: Creating a skeleton website
-
This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.
-
Express Tutorial Part 3: Using a Database (with Mongoose)
-
This article briefly introduces databases for Node/Express. It then goes on to show how we can use Mongoose to provide database access for the LocalLibrary website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.
-
Express Tutorial Part 4: Routes and controllers
-
In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the LocalLibrary website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.
-
Express Tutorial Part 5: Displaying library data
-
We're now ready to add the pages that display the LocalLibrary website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database and using templates.
-
Express Tutorial Part 6: Working with forms
-
In this tutorial we'll show you how to work with HTML Forms in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.
-
Express Tutorial Part 7: Deploying to production
-
Now you've created an awesome LocalLibrary website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.
-
- -

See also

- -
-
Installing LocalLibrary on PWS/Cloud Foundry
-
This article provides a practical demonstration of how to install LocalLibrary on the Pivotal Web Services PaaS cloud — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.
-
- -

Adding more tutorials

- -
-

That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:

- -
    -
  • Using sessions.
    • -
  • User authentication.
    • -
  • User authorization and permissions.
    • -
  • Testing an Express web application.
    • -
  • Web security for Express web applications.
    • -
- -

And of course, it would be excellent to have an assessment task!

-
diff --git a/files/de/learn/server-side/first_steps/index.html b/files/de/learn/server-side/first_steps/index.html deleted file mode 100644 index 4cf8d1b67cc971..00000000000000 --- a/files/de/learn/server-side/first_steps/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Erste Schritte in serverseitiger Webseiten-Programmierung -slug: Learn/Server-side/First_steps -tags: - - Anfänger - - Einführung - - Lernen - - Serverseitige Programmierung -translation_of: Learn/Server-side/First_steps -original_slug: Learn/Server-side/Erste_Schritte ---- -

{{LearnSidebar}}
- In diesem Modul beantworten wir grundlegende Fragen zur serverseitigen Programmierung - "Was ist das?", "Worin unterscheidet sie sich von der clientseitigen Programmierung?" und "Warum ist sie so nützlich?". Danach geben wir Ihnen einen Überblick über einige der beliebtesten serverseitigen Web-Frameworks und beraten Sie, wie Sie das am besten geeignete Framework für die Erstellung Ihrer ersten Website auswählen können. Schließlich bieten wir auch noch einen Einführungsartikel über Webserver-Sicherheit.

- -

- -

Vorraussetzungen

- -

Wenn Sie mit diesem Modul starten, müssen Sie keine Kenntnisse in der serverseitigen Website-Programmierung oder in irgendeiner anderen Art von Programmierung haben.

- -

Allerdings müssen Sie verstehen, "Wie das Web funktioniert". Wir empfehlen Ihnen, zuerst die folgenden Themen zu lesen:

- - - -

Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die einzelnen Module in diesem Abschnitt zu arbeiten.

- -

Anleitungen

- -
-
Einführung auf der Serverseite
-
-

Willkommen zum MDN Einsteigerkurs Server-seitige Programmierung! In diesem ersten Artikel betrachten wir die grundlegende serverseitige Programmierung und beantworten Fragen wie "Was ist das?", "Worin unterscheidet es sich von der clientseitigen Programmierung?" und "Warum ist es so nützlich?". Nachdem Sie diesen Artikel gelesen haben, werden Sie den Einfluss verstehen, den Websites durch serverseitige Programmierung erhalten.

-
-
Überblick über den Client-Server
-
-

Nachdem Sie nun den Zweck und die möglichen Vorteile der serverseitigen Programmierung kennen, werden wir jetzt im Detail untersuchen was passiert, wenn ein Server eine "dynamische Anforderung" von einem Browser erhält. Da die meisten serverseitigen Codes auf der Website Anfragen und Antworten auf ähnliche Weise behandeln, hilft Ihnen dies zu verstehen, was Sie beim Schreiben Ihres eigenen Codes tun müssen.

-
-
Serverseitige Webframeworks
-
Der letzte Artikel zeigte Ihnen was eine serverseitige Webanwendung tun muss, um auf Anfragen von einem Webbrowser zu reagieren. Nun zeigen wir Ihnen, wie Web-Frameworks diese Aufgaben vereinfachen können und helfen Ihnen, das richtige Framework für Ihre erste serverseitige Webanwendung auszuwählen.
-
Webseitensicherheit
-
Die Sicherheit der Website erfordert ständige Aufmerksamkeit in allen Aspekten des Designs und der Nutzung der Website. Dieser einleitende Artikel wird Sie nicht zu einem Guru für Websitensicherheit machen, aber er wird Ihnen helfen, die ersten wichtigen Schritte zu verstehen die Sie unternehmen können, um Ihre Webanwendung gegen die häufigsten Bedrohungen zu schützen.
-
- -

Aufgaben

- -

Dieses Modul "Übersicht" hat keine Aufgaben, da wir Ihnen noch keinen Code angezeigt haben. Wir hoffen, dass Sie an dieser Stelle ein gutes Verständnis dafür haben, welche Art von Funktionalität Sie mit serverseitiger Programmierung liefern können und Sie haben eine Entscheidung darüber getroffen, mit welchem serverseitigen Web-Framework Sie Ihre erste Website erstellen werden.

diff --git a/files/de/learn/server-side/index.html b/files/de/learn/server-side/index.html deleted file mode 100644 index 17948cb20051c6..00000000000000 --- a/files/de/learn/server-side/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Serverseitige Webseitenprogrammierung -slug: Learn/Server-side -tags: - - Anfänger - - Beginner - - CodingScripting - - Intro - - Landing - - Learn - - Server - - Server-side programming - - Topic - - serverseitiges Programmieren -translation_of: Learn/Server-side ---- -
{{LearnSidebar}}
- -

Der Themenbereich Dynamische Webseiten – Serverseitige Programmierung beinhaltet eine Reihe von Modulen, die erläutern, wie man dynamische Webseiten erstellt. Dynamische Webseiten sind Seiten, die individualisierte Inhalte als Antwort auf HTTP-Anfragen ausliefern. Die Module bieten eine allgemeine Einführung in die serverseitige Programmierung, wie auch spezifische Anfänger-Leitfäden zur Benutzung der Django (Python) und Express (Node.js/JavaScript) Web-Frameworks zum Erstellen von einfachen Anwendungen.

- -

Die meisten großen Webseiten nutzten irgendeine Art serverseitiger Technologie zur dynamischen Anzeige von verschiedenen Daten, je nach Bedarf. Stellen Sie sich zum Beispiel einmal vor, wie viele Produkte es auf Amazon gibt und wie viele Posts auf Facebook geschrieben wurden. All diese darzustellen, indem man komplett statische Seiten nutzt, wäre völlig ineffizient. Deshalb laden solche Seiten stattdessen erst statische Vorlagen (erstellt mit HTML, CSS und JavaScript), dann aktualisieren sie die Daten in diesen Vorlagen dynamisch, wenn sie benötigt werden, z.B. wenn Sie sich ein anderes Produkt auf Amazon ansehen wollen.

- -

In der modernen Welt der Webentwicklung ist es sehr empfehlenswert, etwas über serverseitige Entwicklung zu lernen.

- -

Ihr Lernweg

- -

Mit dem serverseitigen Programmieren zu beginnen, ist in der Regel leichter als mit der clientseitigen, weil dynamische Webseiten dazu neigen, viele ähnliche Arbeitsabläufe auszuführen (Daten aus einer Datenbank laden und auf der Webseite darstellen, Benutzereingaben validieren und in einer Datenbank speichern, Berechtigungen von Nutzern prüfen und einloggen von Benutzern, etc.) und mit Web-Frameworks konstruiert werden, die diese und andere häufige Webserver-Aufgaben erleichtern.

- -

Grundlegende Kenntnisse von Konzepten der Programmierung (oder einer bestimmten Programmiersprache) sind hilfreich, aber nicht unbedingt notwendig. Genauso sind Kenntnisse in der clientseitigen Programmierung keine Vorraussetzung, aber ein grundlegendes Verständnis wird Ihnen helfen, besser mit den Entwicklern zusammen zu arbeiten, die Ihre Webseite clientseitig im "Front-end" entwickeln.

- -

Sie werden verstehen müssen, "wie das Internet funktioniert". Wir empfehlen, dass Sie zuerst die folgenden Themen lesen:

- - - -

Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die Module in diesem Abschnitt zu arbeiten.

- -

Module

- -

Dieses Thema enthält die folgenden Module. Sie sollten mit dem ersten Modul beginnen, dann eines der nachfolgenden Module auswählen, die Ihnen zeigen, wie man mit zwei sehr verbreiteten serverseitigen Sprachen arbeitet, indem man das entsprechende Web-Framework verwendet.

- -
-
Server-side website programming first steps
-
Dieses Modul bietet Server-Technologie-agnostische Informationen über serverseitiges Programmieren von Webseiten, einschließlich der Antworten auf die fundamentalen Fragen des serverseitigen Programmierens — "Was ist es?", "Wie unterscheidet es sich vom clientseitigen Programmieren?" und "Warum ist es so nützlich", einen Überblick über einige der verbreiteteren serverseitigen Web-Frameworks und einen Ratgeber darüber, wie Sie das am besten für Ihre Seite passende auswählen. Zuletzt geben wir noch eine Einführung in die Sicherheit von Webservern.
-
Django Web Framework (Python)
-
Django ist ein extrem beliebtes und vollwertiges Web-Framework, geschrieben in Python. Das Modul erklärt, warum Django so ein gutes Server-Framework ist, wie man eine Entwicklnugsumgebung einrichtet und wie man häufige Aufgaben damit erledigt.
-
Express Web Framework (Node.js/JavaScript)
-
Express ist ein beliebtes Web-Framework, geschrieben in JavaScript und gehostet in der node.js Laufzeitumgebung. Das Modul erklärt einige der Hauptvorteile dieses Frameworks, wie Sie Ihre Entwicklungsumgebung einrichten und wie man damit häufige Entwicklungs- und Bereitstellungsaufgaben umsetzt.
-
- -

Siehe auch

- -
-
Node server without framework
-
Dieser Artikel liefert einen einfachen statischen Dateiserver, der mit Node.js erstellt wurde, für diejenigen, die das Framework nicht verwenden möchten.
-
diff --git a/files/de/learn/tools_and_testing/index.html b/files/de/learn/tools_and_testing/index.html deleted file mode 100644 index 0099fb70c6f5a9..00000000000000 --- a/files/de/learn/tools_and_testing/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Tools and testing -slug: Learn/Tools_and_testing -tags: - - Anfänger - - Automation - - Barrierefreiheit - - CSS - - CodingScripting - - HTML - - JavaScript - - Landen - - Lernen - - Nutzer testen - - Testen - - Thema - - Werkzeuge - - browserübergreifend -translation_of: Learn/Tools_and_testing ---- -
{{LearnSidebar}}
- -

Wenn du dich mit den Grundlegenden Web-Technologien (wie HTML, CSS und JavaScript) vertraut gemacht, und du begonnen hast mehr Erfahrung zu sammeln, mehr Quellen zu lesen und mehr Tipps und Tricks zu lernen, wirst du auf verschiedenste Werkzeuge stoßen mit denen du arbeiten kannst. Von JavaScript über Test- und Automatisierungsapps hin zu vielen Anderen. Du wirst beginnen den Nutzen solcher Werkzeuge zu schätzen, sobald dein Webprojekt wächst und komplexer wird und damit zuverlässige Test Pläne für deinen Code erarbeiten. Dieser Teil des Lernbereichs soll dir geben was du brauchst, um anzufangen und eine bewusste Auswahl zu treffen.

- -

Die Interenet Industrie ist ein spannender Arbeitsbereich, aber er hat auch seine Schwierigkeiten. Die Kern-Technologien die wir nutzen, um Webseiten zu erstellen sind heute weitgehend stabil, aber es werden ständig neue Features hinzugefügt und neue Werkzeuge - die die Arbeit damit ermöglichen und die auf diesen Technologien aufbauen - erscheinen die ganze Zeit. Zusätzlich müssen wir vordergründig immer noch Browser-übergreifende Unterstützung und kompatibilität bedenken, um sicherzustellen, dass unser Code gängigen Best-Practices folgt. Durch diese wird gewährleistet, dass unser Projekt auf den verschiedenen Browsern und Geräten, die unsere Nutzer verwenden um im Internet zu surfen und auch von Menschen mit Einschränkungen, genutzt werden können.

- -

Es kann schwierig sein, herauszufinden mit welchen Werkzeugen du arbeiten solltest. Darum haben wir diese Artikel-Serie geschrieben: Um dich zu informieren welche Tools es gibt, was sie für dich machen können und wie du die aktuellen Industry Favorites benutzen kannst.

- -
-

Wichtig: Weil ständig neue Tools erscheinen und alte aus der Mode kommen, haben wir darauf geachtet, die Inhalte so bedacht und Neutral wie möglich zu schreiben - wir wollen den Fokus in erster Linie auf die generellen Arten von Aufgaben legen und wie Werkzeuge dir helfen diese zu lösen, und beschreiben spezifische Tools so wenig wie möglich. Klarerweise müssen wir anhand diverser Tools bestimmte Techniken vorzeigen, aber sei dir bewusst, dass wir diese Tools nicht als die besten empfehlen oder das der einzige Weg ist wie du die Dinge tun kannst - in den meisten Fällen gibt es andere Wge, aber wir wollen dir eine klare Methode vorzeigen die funktioniert.

-
- -

Lerne in der Reihenfolge

- -

Du solltest wirklich die Basics der Kernsprachen HTML, CSS und JavaScript zuerst lernen, bevor du anfängst die hier beschriebenen Tools zu benutzen. Du musst die Grundlagen dieser Sprachen kennen, bevor du ein Problem in komplexem Webcode debuggen, JavaScript Bibliotheken effektiv nutzen, oder Tests schreiben und gegen deinen Code mit Testrunners laufen lassen kannst. Usw.

- -

Du brauchst zuerst ein solides Fundament.

- -

Module

- -
-
Real world web development tools (TBD)
-
In diesem Modul erforschen wir die unterschiedlichen Arten von Web-Entwicklungs Werkzeugen die es gibt. Das beeinhaltet die Betrachtung der üblichsten Arten von Aufgaben die du zu lösen hast, wie diese in einem Arbeitsablauf zusammengelegt werden können, und die besten Werkzeuge die derzeit erhältlich sind, um diese Aufgaben durchzuführen.
-
Browser-übergreifendes Testen
-
Dieses Modul behandelt speziell das Testen von Web-Projekten auf den unterschiedlichen Browsern. Hier identifizieren wir deine Zielgruppe (z.B. um welche Nutzer, Browser und Geräte musst du dich am meisten kümmern?), Vorgehensweise bei Tests, die Hauptprobleme die dich mit den unterschiedlichen Typen von Code konfrontieren und wie du diese löst/minderst, welche Werkzeuge die hilfreichsten fürs Testen und Lösen von Problemen sind, und wie du Automatisierung nutzt, um Test zu beschleunigen.
-
diff --git a/files/de/mdn/at_ten/history_of_mdn/index.html b/files/de/mdn/at_ten/history_of_mdn/index.html deleted file mode 100644 index ae452057a96346..00000000000000 --- a/files/de/mdn/at_ten/history_of_mdn/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: MDNs Geschichte -slug: MDN/At_ten/History_of_MDN -tags: - - MDN -translation_of: MDN_at_ten/History_of_MDN -original_slug: MDN_at_ten/History_of_MDN ---- -
-

In diesem Gespräch schauen mehrere Mitwirkende von MDN auf die vergangenen zehn Jahre von developer.mozilla.org zurück und auf das kommende Jahrzehnt. Du wirst die Geschichte verschiedener Wiki-Software-Migrationen hören, wie eine Gemeinschaft rund ums Dokumentieren entstanden ist und viele weitere Highlights der Geschichte dieser Seite. Anschließend spricht die Gruppe auch über aktuelle Herausforderungen und Projekte, an denen die MDN Gemeinschaft dieses Jahr arbeitet.

- -
- - - - -

{{ EmbedLiveSample('audio', 'auto', '50px') }}

- -

Unten lernst du mehr über die Leute kennen, die ihre Erinnerungen und Gedanken teilen und erhalte einen tieferen Einblick in bestimmte Details, die sie erwähnen.

-
- -
-
Justin Crawford - -

Justin Crawford Produktmanager, MDN

- -

Justin moderiert dieses Gespräch und macht Dinge mit Code, Wörtern, Fahrradteilen und moderates this talk and makes things with code, words, bike parts, and Trödelkram. Er ist @hoosteeno auf Twitter.

-
- -
-

Was ist MDN und für wen ist es? Ein Platz für die Gemeinschaft des Open Web

- -

MDN bietet nützliche Informationen rund um Web Technologien und fördert das Lernen, Teilen und Schulen innerhalb der Open Web Gemeinschaft. Auf MDN kommen die Leute zusammen und erstellen Dinge für dich und für andere.

-Ein Platz für Mozilla Entwickler - -

MDN ist auch ein Platz für Mozilla Entwickler, wie Gecko oder Firefox Programmierer, Add-on Entwickler und Firefox OS Mitwirkende.

-
- -
Eric Shepherd - -

Eric "Sheppy" Shepherd Technischer Autor, MDN

- -

Sheppy ist hier und dokumentiert für Mozilla seit 2006 und hat eine lange Geschichte (und verrückte Ideen) im Zusammenhang mit MDC und MDN. Er ist @sheppy auf Twitter.

-
- -
-

Die Geschichte von MDN Ära vor Wiki – Netscape DevEdge

- -

In den frühen Jahren gab es DevEdge, die Entwicklerdokumentation von Netscape, welche die Basis für einen Teil der Dokumentation auf MDN bildet. Schau dir die Vergangenheit auf archive.org an:

- -

Netscape DevEdge

- -

Am 12. Oktober 2004 wurde diese beliebte Entwicklerwebseite von AOL, Netscapes Mutterkonzern, abgeschaltet. Nur ein paar Monate später, im Februar 2015 konnte Mitchell Baker DevEdge retten und eine Vereinbarung mit AOL aushandeln, die es Mozilla erlaubte, basierend auf den früheren Netscape DevEdge Materialien neue Dokumente zu posten, zu verändern und zu erstellen. Mit anderen Worten, was 1998 mit dem Mozilla Quellcode geschehen ist, passierte schließlich auch mit Netscapes Entwicklerdokumentation: Sie wurde quelloffen.

- -

Deb Richardson ist der Mozilla Foundation als technische Autorin beigetreten und leitete das neue DevMo Projekt für die von der Gemeinschaft geleitete Dokumentation.

-
- -
-

MediaWiki Die erste Wiki-Engine

- -

Mit MediaWiki als neuer darunterliegender Projektplatform wurde die Mozilla Entwicklerdokumentation im Juli 2005 für jedermann bearbeitbar gemacht. Es wurde ein neues kollaboratives Element in Mozilla eingeführt und seit diesem Augenblick ist jeder willkommen, um es zu verbessern und sein Wissen zu teilen. Eine neue internationale Gemeinschaft begann zu wachsen und Entwicklerinhalte in andere Sprachen zu übersetzen.

- -

MDC MediaWiki

-
- -
Florian Scholz - -

Florian Scholz Technischer Autor, MDN

- -

Florian ist ein technischer Autor bei Mozilla, der sich auf Technologien des Open Web fokussiert. Er ist ein Wikizwerg, der die Dokumentation pflanzt als wäre sie Blumen, und er mag es, gemeinsam mit der Gemeinschaft an dem Ziel zu arbeiten, das Web zu dokumentieren und es für jeden zugänglich zu machen. Florian ist passioniert gegenüber Open Source. Er wohnt in Bremen, Deutschland, und tweetet als @floscholz auf Twitter.

-
- -
-

DekiWiki Die zweite Wiki-Engine

- -

Im August 2008 wechselte das Mozilla Developer Center zu MindTouch DekiWiki, einem leistungsstarken und neuen Content Management System und Wiki System für technische Dokumentation. Dieser Plattformwechsel wurde in der Gemeinschaft kontrovers aufgenommen, die MediaWiki seit 2005 gewohnt war und Werkzeuge dafür entwickelt hatte.

- -

MDC DekiWiki

-
- -
Ali Spivak - -

Ali Spivak Hirtin der fantastischen MDN-Katzen

- -

Ali Spivak managt Inhalt und Gemeinschaft im Mozilla Developer Network und verbringt ihre Zeit damit, sich Wege auszudenken, die helfen, das Web noch toller zu geschalten. Sie kümmert sich darum, dass das Web offen und frei bleibt und, nachdem sie durch ihren Beitritt zu Mozilla 2012 mit Open Source in Berührung gekommen ist, konzentriert sie sich darauf, die Entwicklercommunities bei Mozilla zu stärken und daran teilzunehmen. Sie ist @alispivak auf Twitter.

-
- -
-

Kuma Die dritte und aktuelle Wiki-Engine

- -

Kuma, das sich Anfang 2011 von Kitsune abgezweigt hat und am 3. August 2012 veröffentlicht wurde, ist eine von Mozilla entwickelte Wikiplattform basierend auf Django, mit seinem eigenen KumaScript Makrosystem, welches Node.js verwendet.

- -

Dadurch, dass der Code auf GitHub lebt, fing die Gemeinschaft an, ebenfalls an MDNs CMS mitzuwirken. Seit diesem Zeitpunkt beinhaltet Programmieren auf MDN beides, die Dokumentation zu schreiben und Kuma zu entwickeln.

- -

MDN KUMA

-
- -
David Walsh - -

David Walsh Webentwickler, MDN

- -

Mozilla Senior Webentwickler, Front-End Engineer, MooTools Hauptentwickler, JavaScript Fanatiker, CSS Tüftler, PHP Hacker, Web und Open Source Liebhaber. David ist @davidwalshblog auf Twitter.

-
- -
-

Neugestaltung von MDN Kuma mit erneuertem Design

- -

Das Redesign von MDN war ein Großprojekt. Sean Martell entwarf MDNs neues Erscheinungsbild. Zu der Zeit war es ein iterativer Prozess mit einer Beta-Benutzergruppe von 3000 MDN-Leuten, der mehrere Monate in Anspruch genommen hat. Das neue Aussehen war hinter einem "Waffle Flag" (MDNs Featureflag System). Großer Dank auch an David Walsh, der das gesamte Redesign meisterte und MDN das Frontend gab, das es verdient.

-Waffle flag
- -
Janet Swisher - -

Janet Swisher Community Managerin, MDN

- -

Janet ist eine Mozilla Community Managerin für das Mozilla Developer Network. She trat Mozilla 2010 bei und hat seit 2004 mit Open Source Software zu tun und mit technischer Kommunikation seit dem 20. Jahrhundert. Sie lebt in Austin, Texas, mit ihrem Ehemann und einem Pudel. Sie ist @jmswisher auf Twitter.

-
- -
-

Gemeinschaft rund um Open Web Dokumentation Von der Gemeinschaft geleitete, browserunabhängige Open Web Dokumentation

- -

Irgendwann 2010, insbesondere als sich Mitglieder der Gemeinschaft und technische Autoren in Paris trafen, wurde deutlich, dass sich MDNs Fokus weg von "Lass uns alles rund um Firefox dokumentieren!" hin zu "Lass uns das Web dokumentieren!" bewegt. Die Dokumentation wurde über die letzten Jahre bereinigt und umstrukturiert, sodass MDNs Open Web Dokumentation browserunabhängig ist. Dieses Material, das für alle nützlich ist, die für das Web entwickeln, ist der beliebteste und am häufigsten benutzte Inhalt.

- -

Verschiedene Browserhersteller haben von Zeit zu Zeit dazu beigetragen, diesen Teil von MDN mitzugestalten. Diese browserübergreifende Zusammenarbeit war sehr erfolgreisch und wurde von den MDN Lesern sehr geschätzt.

-
- -
Luke Crouch - -

Luke Crouch Webentwickler, MDN

- -

Luke Crouch ist ein Hobbybrauer, Fußballfan und Webentwickler für Mozilla. Er arbeitet am Web seit 1996 und benutzt Firefox seit 2004, schreibt Open Source Software seit 2006 und trat 2010 Mozilla als erster angestellter MDN-Webentwickler bei. Luke ist @groovecoder auf Twitter.

-
- -
-

Übersetzungscommunities MDN dient einem globalen Publikum in vielen Sprachen

- -

Übersetzung ist ein großer Teil der Mozilla Gemeinschaft; sie ist eine Komponente fast jedes Projekts und Produkts. Durch Kuma ist MDN ebenfalls sehr leicht übersetzbar und angepasst an unsere Übersetzercommunity. Die W3C-Spezifikationen und andere Ressourcen, die die Funktionalität des Webs beschreiben, haben keine genauen Ziele und haben Communities, die Spezifikationen in mehreren Sprachen erstellen. Besonders für Einsteiger ist MDN der erste Schritt zur Erkundung der Webtechnologien, daher ist es unser Ziel, für jeden da zu sein. MDN hat ein breites Publikum und will nicht nur englische Muttersprachler einbinden. Es wird in aller Welt geschätzt.

-
- -
Julien - -

Julien (a.k.a. Sphinx) Französische Übersetzung, MDN

- -

Julien verbringt viele Nächte und Wochenenden damit, JavaScript-Artikel in französisch zu übersetzen. Er ist kein Programmierer, aber hat einen IT-Hintergrund und will mehr über neue Technologien lernen. Er arbeitet lieber an MDN mit anstatt fernzusehen.

-
- -
an-Yves Perrier - -

Jean-Yves Perrier Technischer Autor, MDN

- -

Jean-Yves ist seit 2010 technischer Autor für MDN und trat Mozilla 2011 als Vollzeitmitarbeiter bei. Er liebt das Open Web mit 15 Jahren Erfahrung C++. Er ist Schweizer, aber lebt in London, England. Seine Erdős-Zahl ist 5 und er ist @Teoli2003 auf Twitter.

-
- -
-

Lernbereich

- -

Die Learning Area ist ein neues Bestreben, grundlegende Webfähigkeiten zu vermitteln. Über die letzten 10 Jahre hat MDN viel fortgeschrittenes Material hinzugefügt, das Experten wertvolle Informationen bietet. Dieses Projekt liefert Materialien für Anfänger und versucht, viele Wissenslücken zu schließen.

-
- -
Jérémie Patonnier - -

Jérémie Patonnier Technischer Autor, MDN

- -

Jérémie ist langjähriger Mitwirkender am Mozilla Developer Network und ein professioneller Webentwickler seit 2000. Er verfechtet Webstandards und schreibt Dokumentation über Webtechnologien mit dem Ziel, sie für jeden zugänglich zu machen. Er ist @JeremiePat auf Twitter.

-
- -
-

MDNs Zukunft Was wird anders sein, wenn wir 20 Jahre MDN feiern?

- -

Jeder, der an MDN arbeitet, engagiert sich dafür, dass das Web offen und zugänglich ist, und das ist der Grund warum wir die Übersetzerteams und all die mitwirkenden Leute haben. MDN hofft, weiterhin eine Schlüsselrolle darin zu spielen, das Web so zu bewahren, wie wir finden, dass es sein sollte.

- -

Ein großer Teil dieser Zukunft werden Lernmaterialien sein. Es wird die nächsten zehn Jahre wesentlich mehr Webentwickler geben.

- -

Ein weiterer großer Teil unserer Arbeit besteht darin, die bereits bestehenden Informationen zu pflegen und zu aktualisieren, sodass wir Webentwicklern immer relevanten Inhalt bieten.

- -

Was sich ändert und in Zukunft wahrscheinlich noch mehr, ist, wie Informationen konsumiert werden. Heute suchen Leute nach Information und schauen in der Dokumentation nach. In Zukunft könnte MDN Dokumentation in Codeeditoren, den Firefox Entwicklertools und vielen anderen Entwicklertools und Services zur Verfügung stehen.

-
- -
-

Erwähnenswerte Mitwirkende Viele weitere Leute leisten fantastische Arbeit auf MDN

- -
-
    -
  • Les Orchard
    • -
  • John Karahalis
    • -
  • David Walsh
    • -
  • Jannis Leidel
    • -
  • Stephanie Hobson
    • -
  • James Bennett
    • -
  • Isac Lagerblad
    • -
  • Piotrek Koszuliński
    • -
  • Craig Cook
    • -
  • Rob Hudson
    • -
  • John Whitlock
    • -
  • ...
    - Und viele weitere Kuma Mitwirkende.
    • -
- - -
    -
  • Chris Mills
    • -
  • Will Bamberg
    • -
  • David Bruant
    • -
  • Thierry Régagnon
    • -
  • etherthank
    • -
  • Saurabh Nair
    • -
  • Deb Richardson
    • -
  • Sebastian Zartner
    • -
  • Tooru Fujisawa
    • -
  • Karen Scarfone
    • -
  • Niklas Barning
    • -
  • ...
    - Und hunderte weiterer Wiki-Mitarbeiter.
    • -
-
-The Berlin Office
- -
-
-
diff --git a/files/de/mdn/at_ten/index.html b/files/de/mdn/at_ten/index.html deleted file mode 100644 index ca383b0d3dbfdf..00000000000000 --- a/files/de/mdn/at_ten/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: 10 Jahre MDN -slug: MDN/At_ten -tags: - - MDN - - TopicStub -translation_of: MDN_at_ten -original_slug: MDN_at_ten ---- -

Feiern Sie zehn Jahre Dokumentation Ihres Internets.

- -
-
-

Die Geschichte des MDN

- -

Anfang 2005 machte es sich ein kleines Team von Idealisten zum Ziel eine neue, freie und von einer Gemeinschaft geförderte Online-Resource für alle Webentwickler zu schaffen. Ihre brillante, wenn auch ungewöhnliche Idee entwickelte sich zum heutigen Mozilla Developer Network — die wichtigste Informationsquelle für alle offenen Webtechnologien. Zehn Jahre später ist unsere globale Gemeinschaft grösser als je zuvor und gemeinsam erstellen wir noch immer Dokumentationen, Beispielcode und Lernmaterialien für alle offenen Webtechnologien, darunter CSS, HTML, JavaScript und alles andere, was das Web so mächtig macht wie wir es kennen.

- -

Mehr erfahren about the history

- - -

Zum MDN beitragen

- -

Seit zehn Jahren dokumentiert die MDN Gemeinschaft bereits das offene Web. Von der Korrektur kleiner Tippfehler bis zum Schreiben verschiedener Folgen über brandneue APIs: Jede und jeder kann etwas beitragen und kein Beitrag ist zu gross oder zu klein. Wir verfügen über 90.000 Seiten an Inhalt, welche von unserer hervorragenden Gemeinschaft an Mozillianern und Mozillianerinnen geschrieben oder übersetzt wurden. Sie können auch jemand von ihnen werden.

- -

Mehr erfahren about contributing

- -

- -

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. 10 Jahre MDN
    2. -
  2. Die Geschichte des MDN
    3. -
  3. Zum MDN beitragen
    4. -
-
diff --git a/files/de/mdn/community/contributing/getting_started/index.html b/files/de/mdn/community/contributing/getting_started/index.html deleted file mode 100644 index d4391478e72ef8..00000000000000 --- a/files/de/mdn/community/contributing/getting_started/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Erste Schritte auf MDN -slug: MDN/Community/Contributing/Getting_started -tags: - - Documentation - - Getting Started - - Guide - - MDN - - MDN Project - - New Contributors -translation_of: MDN/Contribute/Getting_started -original_slug: MDN/Contribute/Getting_started ---- -
{{MDNSidebar}}

Wir sind eine offene Gemeinschaft von Entwicklern, die Ressourcen für ein besseres Internet ohne Rücksicht auf Marke, Browser oder Plattform erstellen. Jeder kann dazu einen Beitrag leisten und jeder, der uns dabei hilft, macht uns stärker. Gemeinsam können wir auch in Zukunft Neuerungen im Internet zum Nutzen Aller voranbringen. Es beginnt hier, mit Ihnen.

- -

Alle Bestandteile von MDN (Dokumentationen, Demos und die Webseiten an sich) werden von einer offenen Gemeinschaft von Entwicklern erstellt. Bitte schließen Sie sich uns an!

- -

3 einfache Schritte um bei MDN mitzumachen

- -

MDN ist ein Wiki, dem jeder Inhalte hinzufügen und diese bearbeiten kann. Sie müssen kein Programmierer sein oder besonders viel über Technologien wissen. Es gibt eine ganze Reihe von Aufgaben, die erledigt werden müssen, vom Einfachen (Korrekturlesen und Beheben von Tippfehlern) bis zum Komplexen (API Dokumentationen schreiben).

- -

Einen Beitrag zu leisten ist einfach und sicher. Wenn Sie einen Fehler machen, wird dieser schnell behoben werden. Auch wenn Sie sich nicht sicher sind, wie manche Dinge aussehen sollen oder Ihre Grammatik nicht allzu gut ist, zerbrechen Sie sich darüber nicht den Kopf. Wir haben ein Team von Leuten, deren Job es ist zu gewährleisten, dass die Inhalte auf MDN so gut wie möglich sind. Jemand wird da sein um sicherzustellen, dass Ihre Arbeit ordentlich und gut formuliert ist.

- -

Schritt 1: Legen Sie ein Konto für MDN an

- -

Um mit Ihren Beiträgen auf MDN zu beginnen, benötigen Sie ein Konto für MDN. Näheres erfahren Sie unter Anlegen eines Accounts.

- -

Schritt 2: Suchen Sie sich eine zu erledigende Aufgabe

- -

Sobald Sie eingeloggt sind, lesen Sie die Beschreibungen der verschiedenen Arten von Aufgaben in der Liste unten und entscheiden Sie, welche Sie davon am Meisten reizt. Sie können sich jede Aufgabe die Ihnen gefällt aussuchen, um mit Ihrem Beitrag zu beginnen.

- -

Schritt 3: Erledigen Sie die Aufgabe

- -

Sobald Sie entschieden haben, welche Art von Aufgabe Sie erledigen wollen, suchen Sie nach einer Seite, einem Code Beispiel o. ä. an dem Sie arbeiten wollen und legen Sie einfach los!

- -

Machen Sie sich keine Gedanken, ob es perfekt ist! Andere Mitwirkende von MDN sind da, um durchgerutschte Fehler zu beheben. Möchten Sie lieber erst experimentieren bevor Sie etwas “in Echt” machen, können Sie die Sandbox Seite editieren. Bei auftauchenden Fragen finden Sie auf der Community Seite Informationen über Mailing Listen und Chat Kanäle, auf denen Sie Antworten erhalten können.

- -

Wenn Sie fertig sind, können Sie sich gerne eine weitere Aufgabe aussuchen oder schauen Sie unten was Sie noch auf MDN tun können.

- -

Mögliche Arten von Aufgaben

- -

Abhängig von Ihren Fähigkeiten und Interessen gibt es viele Möglichkeiten, um zu MDN beizutragen. Obwohl manche Aufgaben gewaltig sind, haben wir auch eine Menge einfacher Arbeiten zur Auswahl. Viele davon sind in fünf Minuten (oder weniger!) erledigt. Zusätzlich zur Aufgabe und einer kurzen Beschreibung finden Sie die ungefähre Zeit, die jede Art von Aufgabe normalerweise erfordert, mit angegeben.

- -

Option 1: Ich mag Worte

- -

Sie können uns bei der Durchsicht und beim Bearbeiten bestehender Dokumentationen und beim Anlegen zutreffender Schlagwörter behilflich sein.

- - - -
Hinweis: Wenn Sie Artikel rezensieren oder neue Artikel verfassen, bitten wir Sie den Style Guide einzusehen. Somit wird gewährleistet, dass alle Artikel einheitlich bleiben.
- -

Option 2: Ich mag Code

- -

Wir brauchen mehr Code Beispiele! Außerdem können Sie uns beim Aufbau unserer Webseiten Plattform Kuma behilflich sein!

- - - -

Option 3: Ich mag sowohl Worte als auch Code

- -

Wir haben Aufgaben, die sowohl technische als auch sprachliche Fähigkeiten erfordern, wie z.B. neue Artikel verfassen, Durchsichten auf technische Genauigkeit oder das Anpassen von Dokumenten.

- - - -

Option 4: Ich möchte MDN in meiner Sprache

- -

Sämtliche Lokalisierungs- und Übersetzungsarbeiten auf MDN werden von unserer phantastischen Gemeinschaft von Freiwilligen geleistet.

- - - -

Option 5: Ich habe eine falsche Information gefunden, aber ich weiß nicht wie ich den Fehler beheben kann

- -

Sie können Probleme melden indem Sie einen Dokumentations-Bug anlegen. (5 Minuten)

- -

Verwenden Sie diese Feldwerte:

- - - - - - - - - - - - - - - - - - - - - - - - -
Bugzilla FeldWert
productEntwicklerdokumentation
component[Wählen Sie einen geeigneten Bereich für das Thema oder "General", wenn Sie sich nicht sicher sind oder den richtigen Bereich nicht finden können]
URLDie Seite auf der Sie das Problem gefunden haben
DescriptionSo viel Sie über das Problem wissen oder Zeit haben, das Problem zu beschreiben und wo korrekte Informationen zu finden sind. Das können sowohl Menschen ("sprich mit so-und-so") als auch Web-Links sein.
- -

Was Sie noch auf MDN tun können

- - diff --git a/files/de/mdn/community/index.html b/files/de/mdn/community/index.html deleted file mode 100644 index 5e5c857baa061a..00000000000000 --- a/files/de/mdn/community/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Feedback zu MDN senden -slug: MDN/Community -tags: - - Dokumentation - - Guide - - MDN - - MDN-Meta -translation_of: MDN/Contribute/Feedback -original_slug: MDN/Contribute/Feedback ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/de/docs/MDN")}}
- -

Willkommen auf MDN! Falls du Verbesserungsvorschläge für oder Probleme mit der Benutzer von MDN hast, ist dies der richtige Ort. Dass du Interesse daran zeigst, Feedback zu geben, macht dich mehr Teil der Mozilla-Community, und wir danken dir im Voraus für dein Interesse.

- -

Du hast mehrere Möglichkeiten, deine Eindrücke zu schildern; dieser Artikel hilft dir dabei.

- -

Die Dokumentation aktualisieren

- -

Zuallererst, falls du ein Problem im Zusammenhang mit der Dokumentation gesehen hast, kannst du ihn gerne selbst korrigieren. Melde dich an, indem du GitHub verwendest, dann klicke auf einen blauen Bearbeiten-Button, um den Editor zu öffnen und damit an der MDN-Dokumentation mitzuwirken. Die Dokumentation hier ist in einem Wiki und wird durch ein Team von Freiwilligen und bezahlten Arbeitskräften betreut, seit also nicht schüchtern — deine Grammatik muss nicht perfekt sein. Wenn du einen Fehler machen solltest, werden wir ihn beheben; keine Sorge!

- -

Für weitere Informationen über die Mitwirkung zur MDN-Dokumentation siehe:

- - - -

Nimm an der Konversation teil

- -

Sprich mit uns! Es gibt mehrere Wege, um mit anderen Leuten, die an MDN-Inhalten arbeiten, in Kontakt zu treten.

- -

(Synchron) Chat

- -

-

(Asynchron) Diskussionen

- - -

Längere Diskussionen finden in unserem MDN-Diskussionsforum (englisch) statt. Du kannst über die E-Mail-Adresse mdn@mozilla-community.org ins Forum posten. Falls du dem Forum beitritts, kannst du zudem auswählen, ob du Benachrichtigungen über Diskussionen via E-Mail erhalten willst.

- -

Fehler melden

- -

Dokumentationsfehler

- -

Falls du einen Fehler in der Dokumentation siehst und ihn aus irgendeinem Grund nicht selbst beheben kannst, kannst du einen Fehlerbericht erstellen (englisch)! Du kannst dieses Formular für beliebige Dokumentationsprobleme verwenden, egal ob es eine einfache Korrektur ist oder eine Anfrage für einen komplett neuen Inhalt. Wie zuvor erwähnt, laden wir dich dazu ein, die Änderungen selbst beizutragen, jedoch steht dir diese Option ebenfalls offen.

- -

Seitenfehler

- -

Falls du auf Probleme mit der MDN-Webseite stößt oder Ideen für neue Features für die Seite hast, kannst du ein Ticket an das MDN-Entwicklerteam stellen (englisch).

diff --git a/files/de/mdn/contribute/howto/index.html b/files/de/mdn/contribute/howto/index.html deleted file mode 100644 index 9b2c82cf9f8247..00000000000000 --- a/files/de/mdn/contribute/howto/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: How-to Leitfäden -slug: MDN/Contribute/Howto -tags: - - Documentation - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Contribute/Howto ---- -
{{MDNSidebar}}

Diese Artikel bieten Schritt-für-Schritt-Anleitungen zum Erreichuen bestimmter Zielsetzungen, wenn Sie zu MDN beitragen.

-

{{LandingPageListSubpages}}

diff --git a/files/de/mdn/contribute/index.html b/files/de/mdn/contribute/index.html deleted file mode 100644 index 9bed1992056292..00000000000000 --- a/files/de/mdn/contribute/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Beitragen zu MDN -slug: MDN/Contribute -tags: - - Anleitung - - Dokumentation - - Einstieg - - MDC Projekt - - MDN -translation_of: MDN/Contribute ---- -
{{MDNSidebar}}

Willkommen! Durch das Betreten dieser Seite haben Sie bereits den ersten Schritt getan, um bei MDN mitzuwirken. Hier finden Sie Anleitungen zu allen Möglichkeiten des Mitwirkens bei MDN, wie etwa Style Guides, Leitfäden zur Benutzung unseres Editors und verschiedener Tools und vieles mehr.

-
-
-

Leitfäden für Helfer

-
-
- Erste Schritte
-
- Eine Kurzanleitung für Ihren ersten Beitrag.
-
- Leitfaden für Inhalte und Styles
-
- Im Leitfaden für Inhalte und Styles auf MDN erfahren Sie Details zu Schreibstil, Seitenlayout und Styles von Inhalten, so dass die von Ihnen verfassten Inhalte zu den restlichen Inhalten auf MDN passen.
-
- Autoren Anleitung
-
- Eine vollständige Anleitung zur Verwendung des Editors von MDN.
-
- Artikel überprüfen
-
- Ein Leitfaden zur Durchführung von technischen und redaktionellen Überprüfungen des Inhalts der Beiträge. So helfen Sie sicherzustellen, dass alle Inhalte auf MDN so nützlich und lesbar wie möglich sind!
-
- Terminologie und Konventionen
-
- Unser Handbuch über Terminologie und Konventionen stellt Informationen bereit, die Ihnen helfen, das korrekte Fachvokabular in Ihren Beiträgen zu verwenden.
-
- Mit der MDN Community zusammenarbeiten
-
- Ein Leitfaden zur Zusammenarbeit mit unserer Community, zum Auffinden von Hilfe und wie man mit den Leuten Kontakt aufnimmt, die Antworten auf die Fragen haben, die während Ihren Beiträgen zu MDN auftauchen.
-
- Häufig gestellte Fragen
-
- Tipps und Antworten zu den häufigsten Fragen über Beiträge zu MDN.
-
-
-
- Zu Kuma beitragen
-
- Eine Anleitung zu Beiträgen zum Kuma Projekt. Kuma ist der Name der Plattform, welche die MDN Webseiten unterstützt.
-
-
-
-

How to...

-

Unsere how-to Leitfäden stellen Schritt-für-Schritt-Anleitungen bereit, die Ihnen bei der Bewältigung spezieller Aufgaben während des Verfassens von Beiträgen für MDN behilflich sind.

-
-
- Wie man eine CSS Eigenschaft dokumentiert
-
- Eine Anleitung zum Dokumentieren von CSS Eigenschaften. Alle Dokumente über CSS Eigenschaften sollten dem in diesem Artikel beschriebenen Stil und Layout entsprechen.
-
- Wie man ein HTML Element dokumentiert
-
- Diese Anleitung zur Dokumentation von HTML Elementen gewährleistet, dass von Ihnen verfasste Dokumente zu anderen auf MDN passen.
-
- Wie man Seiten richtig mit Schlagwörtern auszeichnet
-
- Diese Anleitung zur Verschlagwortung von Seiten informiert über unsere Standards bezüglich Schlagwörtern (Tags), einschließlich Listen mit Tags, die eine Standardbedeutung auf MDN haben. Indem Sie dieser Anleitung folgen wird gewährleistet, dass Ihre Inhalte korrekt kategorisiert und leichter durchsuchbar sind und dass unser Suchfiltermechanismus mit Ihren Artikeln richtig funktioniert.
-
- Wie man Spezifikationen deutet
-
- Diese Anleitung hilft Ihnen, Standard-Web-Spezifikationen richtig zu verstehen. In der Lage zu sein, diese zu lesen, kann eine Kunst sein, und zu wissen, wie es geht, wird Ihnen helfen, bessere Dokumentationen zu schreiben.
-
-

Lokalisierung

-
-
- Führung zur Lokalisierung
-
- Während dieser Führung lernen Sie, wie Sie Inhalte auf MDN lokalisieren.
-
- Leitfaden zur Lokalisierung
-
- Diese Anleitung bietet detaillierte Informationen über den Lokalisierungsprozess für Inhalte auf MDN.
-
- Lokalisierungsprojekte
-
- Finden Sie das Lokalisierungsprojekt für Ihre Sprache—oder, wenn es noch keines gibt, erfahren Sie, wie man ein neues startet!
-
-
-
-

diff --git a/files/de/mdn/index.html b/files/de/mdn/index.html deleted file mode 100644 index 6b0218bbc974a8..00000000000000 --- a/files/de/mdn/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Das MDN Projekt -slug: MDN -tags: - - Landing - - MDN Meta - - 'l10n:priority' -translation_of: MDN ---- -
{{MDNSidebar}}
- -

Das Mozilla Developer Network (MDN) ist ein Wiki, auf dem wir das Offene Web, Technologien von Mozilla, Firefox OS und andere für Entwickler interessante Themen dokumentieren. WIr freuen uns über jeden, der Inhalte beisteuert oder bearbeitet. Sie müssen kein Programmierer sein oder besonders viel über Technologien wissen; wir haben viele unterschiedliche Aufgaben, vom Einfachen (Korrekturlesen und Beheben von Tippfehlern) bis zum Komplexen (API Dokumentationen schreiben).

- -
-

Ziel des MDN Projekts ist es, das Offene Web, Mozillas Technologien und Projekte von Mozilla zu dokumentieren. Wir laden Sie ein, dabei zu helfen!

-
- -

Wir brauchen Ihre Hilfe! Es ist ganz einfach. Machen Sie sich keine Gedanken darüber, um Erlaubnis zu bitten oder Fehler zu machen. Hingegen bitten wir Sie, sich mit der MDN community vertraut zu machen; wir sind da, um Ihnen zu helfen! Die folgende Dokumentation soll Ihnen den Einstieg erleichtern.

- - - -

Ich bin neu hier

- -

Sind Sie neu bei MDN und wollen erfahren, wie Sie mithelfen können es noch besser zu machen? Starten Sie hier!

- -

Für Fortgeschrittene

- -

Besuchen Sie unseren vollständigen, detaillierten Leitfaden für Mitwirkende bei MDN, um mehr zu erfahren, sobald Sie sich vertraut damit gemacht haben.

- -

Sagen Sie es weiter

- -

Wenn Sie MDN mögen, helfen Sie die Nachricht zu verbreiten! FInden Sie Designs, Tools und Leitfäden um MDN zu promoten.

diff --git a/files/de/mdn/tools/index.html b/files/de/mdn/tools/index.html deleted file mode 100644 index 383605a2f4e40a..00000000000000 --- a/files/de/mdn/tools/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: MDN Benutzerhandbuch -slug: MDN/Tools -translation_of: MDN/Tools -translation_of_original: MDN/User_guide -original_slug: MDN/nutzer_leitfaden ---- -
{{MDNSidebar}}

Die Mozilla Developer Network-Website ist ein fortschrittliches System zum suchen, lesen und eine beitragene Dokumentions Hilfe für Web-Entwickler (wie auch für Firefox und Firefox OS-Entwickler). Die MDN Mitglieder liefern detailierte Artikel welche zum benutzen des MDN, für Dokumentionen die du brauchst und wenn du möchtest die dir helfen das Material besser und weiter und zu vervollständigen, hilft.

- -

{{LandingPageListSubpages}}

diff --git a/files/de/mdn/tools/kumascript/troubleshooting/index.html b/files/de/mdn/tools/kumascript/troubleshooting/index.html deleted file mode 100644 index 06f3e07bbbd77b..00000000000000 --- a/files/de/mdn/tools/kumascript/troubleshooting/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Beheben von KumaScript Fehlern -slug: MDN/Tools/KumaScript/Troubleshooting -translation_of: MDN/Tools/KumaScript/Troubleshooting -original_slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern ---- -
{{MDNSidebar}}
-

KumaScript Fehler plaziert in großen roten Kästen wirken auf die Leser abstossend. Zum Glück kann jedoch jeder mit einem MDN Konto solche Fehler beseitigen. Wenn ein Fehler auf einer Seite auftritt, landet die betreffende Seite in der List der Dokumente mit Fehlern. Seitenauthoren gehen diese Seiten regelmäßig durch um Fehler zu finden und zu beseitigen. Dieser Artikel erläutert vier Typen von KumaScript Fehlern und beschreibt einige Methoden zu ihrer Beseitigung.

-
- -

DocumentParsingError

- -

DocumentParsingError tritt auf, wenn KumaScript etwas in dem Dokument nicht versteht. Im allgemeinen handelt es sich um einen Syntaxfehler in einem Makro.

- -

Beispiele:

- -
-
Geschweifte Klammern ohne Aufruf eines Makros.
-
Falls \{ in einem Dokument stehen soll ohne ein Makro aufzurufen, kann man einen Schrägstrich \ voranstellen: \\{
-
Sonderzeichen in einem Makro Parameter.
-
Wenn " oder \ innerhalb eines Makro Parameters stehen, kann ein Schrägstrich \ vorangestellt werden: \\ oder \"
-
Fehlende Kommas zwischen den Makro Parametern.
-
Makro Parameters sind mit Kommas (,) zu trennen, jedoch sollte am Ende der Parameterliste kein Komma stehen: z. B. \{\{compat("html.elements.link", 2)}}.
-
HTML Tags innerhalb eines Makro Aufrufs
-
Makros werden oft durch Textformatiertungen zerstört. So kann z. B. das Tag </code> in den Quellcode des Makros geraten. Die Quellcode Ansicht (source view) zeigt die zu beseitigenden Formatierungselemente.
-
- -
    -
- -

TemplateLoadingError

- -

TemplateLoadingError Fehler treten auf, wenn KumaScript nicht weiß, welches Makro in die Seite geladen soll.

- -

Beispiele:

- -
-
Typos in der Benennung von Makro oder Namensänderungen von Makros.
-
Es gibt eine eigene Liste von Makros für MDN, die das gesuchte Makro mit korrekter bzw. neuer Schreibweise enthalten kann.
-
- -
-

Tipp: Ein gesuchtes Makro ist leicht und schnell durch Hinzufügen eines Suchbegriffs (search keyword) in Firefox zu finden. <<<MEHR DAZU DEMNÄCHST>>

-
- -

TemplateExecutionError

- -

TemplateExecutionError Fehler treten auf, wenn KumaScript durch einen Fehler im Makro betroffen wird. Diese Fehler können nur durch Benutzer mit Admin Rechten beseitigt werden, und sollten gemeldet werden (bug report).

- -

Vor dem Schreiben des Fehlerreports sollte man überprüfen, ob der Fehler nicht bereits beseitigt wurde. Folgendermassen zwingt man KumaScript die Seite neu zu laden: Shift gedrückt halten und zum Neuladen der Seite drücken: Shift + Ctrl + R unter Windows/Linux, sowie Shift + Cmd + R auf einem Mac.

- -

Wenn derselbe Fehler wieder auftritt sollte ein Fehlerbericht (bug report) erstellte werden. Dieser Bericht sollte die URL der Seite sowie die Fehlermeldung enthalten.

- -

Fehler & Unbekannt

- -

In diese Kategory fallen alle anderen Fehler.

- -

Diese Fehler sollten auf die selbe Art wie TemplateExecutionError untersucht und beseitigt werden.

- -

- -

diff --git a/files/de/mdn/writing_guidelines/howto/tag/index.html b/files/de/mdn/writing_guidelines/howto/tag/index.html deleted file mode 100644 index f6014145458580..00000000000000 --- a/files/de/mdn/writing_guidelines/howto/tag/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Leitfaden zum Setzen von Schlagwörtern -slug: MDN/Writing_guidelines/Howto/Tag -tags: - - Beginner - - Contribute - - Guide - - Howto - - Intro - - MDN Meta - - Tutorial -translation_of: MDN/Contribute/Howto/Tag -original_slug: MDN/Contribute/Howto/Tag ---- -
{{MDNSidebar}}
- -

Artikel-Schlagwörter sind ein wichtiges Hilfsmittel, es Besuchern zu ermöglichen, hilfreichen Inhalt zu finden. Jede Seite sollte im Normalfall mehrere Schlagwörter enthalten. Diese Seite erklärt die beste Art Seiten zu markieren, so dass Leser Informationen finden und wir selbst Ordnung bewahren können.

- -

Um zur Hilfe für die Oberfläche zur Bearbeitung von Schlagwörtern zu gelangen, rufen Sie bitte den Link tagging section in unserem Editor-Handbuch auf.

- -

Bitte nutzen Sie die Schlagwörter sachgemäß, wie folgend beschrieben. Wenn Sie dies nicht tun, sind unsere automatischen Werkzeuge nicht in der Lage, Listen des Inhalts, der Einstiegsseiten und querverweisenden Artikel zu generieren.

- -

Schlagwort-Verwendung im MDN

- -

Auf MDN werden Schlagwörter auf verschiedene Weisen verwendet.

- -
-
Dokument-Kategorisierung
-
Um welchen Dokumenten-Typ handelt es sich? Ist es eine Referenz? Ein Tutorial? Eine Eine Einstiegsseite zu einem Thema? Unsere Besucher können diese Schlagwörter verwenden, um Suchen zu filtern, deshalb sind sie sehr wichtig!
-
Topic-Identifizierung
-
Worum geht es in dem Artikel? Ist er über eine API? Das DOM? Grafik? Auch diese Schlagwörter sind sehr wichtig, weil sie als Suchfilter verwendet werden können.
-
API-Identifizierung
-
Referenzseiten über eine API müssen die spezifische Komponente der API, die auf Ihnen dokumentiert wird, bezeichnen (das heißt: zu welchem Interface sie gehört und welche Eigenschaft oder Methode sie umfasst, falls zutreffend).
-
Technologie-Status
-
Welchen Status hat die beschriebene Technologie? Entspricht sie einem Standard oder nicht? Wird sie nicht mehr verwendet oder ist veraltet? Ist sie experimentell?
-
Skill-Level
-
Für Tutorials und Anleitungen - Wie weit fortgeschritten ist das Material, das im Artikel behandelt wird?
-
Dokument-Metadaten
-
Die Autoren-Gemeinschaft verwendet Schlagwörter, um nachvollziehen zu können, welche Seiten welcher Art von Arbeit bedürfen.
-
- -

Handbuch zu Schlagwort-Typen

- -

Hier ist eine Kurzanleitung zu den verschiedenen Schlagwort-Typen und ihre konkreten Werte.

- -

Kategorie

- -

Wenn Sie einen Artikel mit einem Schlagwörter aus diesen Kategorien versehen, unterstützen sie die automatischen Werkzeuge dabei, genauer Einstiegsseiten, Inhaltsverzeichnise usw. zu generieren.

- -

Wir verwenden die folgenden Kategorien als Standard-Schlagwörter:

- -
-
Intro
-
Der Artikel stellt Einführungs-Material zu einem Thema zur Verfügung. Theoretisch sollte jeder Technologie-Bereich nur ein "Intro" haben.
-
Featured
-
Dieser Artikel ist ein äußerst wichtiger Artikel, der mittels einer speziellen Methode auf erreichte Seiten hinweist. Bitte achten Sie auf eine äußerst sparsame Anwendung. Es sollten max. drei oder weniger in den Dokumentations-Bereichen existieren (Dieses Schlagwort wird in der englischen Version dieser Seite nicht mehr beschrieben und ist möglicherweise nicht mehr aktuell).
-
Reference
-
Der Artikel enthält Referenz-Material über ein API, ein Element, ein Attribut, ein Merkmal oder ähnliches.
-
Landing
-
Diese Seite ist eine Einstiegsseite.
-
Guide
-
Dieser Artikel ist eine Schritt-für-Schritt Anleitung oder ein Leitfaden.
-
Example
-
Dieser Artikel ist eine reine Code-Beispielseite, oder enthält Code-Beispiele (das heißt, tatsächlich nützliche Code-Schnipsel, nicht einzeilige "Syntaxbeispiele").
-
- -

Themen

- -

Durch die Angabe des Themenbereiches können Sie helfen, bessere Suchergebnisse zu erzeugen (und damit auch Einstiegsseiten und sonstige Navigations-Hilfen).

- -

Derzeit ist hier noch etwas Raum für Flexibilität, da wir noch neue Themenbereiche identifizieren. Wir versuchen allerdings, uns auf die Namen von APIs oder Technologien zu beschränken. Einige nützliche Bespiele:

- -
    -
  • HTML
    • -
  • CSS
    • -
  • JavaScript (Beachten Sie dabei den Großbuchstaben "S"!)
    • -
  • Document
    • -
  • DOM
    • -
  • API für jedes Interface, jede Methode und jede Eigenschaft..
    • -
  • Method für jede Methode einer API.
    • -
  • Property für jede Eigenschaft einer API.
    • -
  • Graphics
    • -
  • SVG
    • -
  • WebGL
    • -
  • Tools
    • -
  • Web
    • -
  • Element
    • -
  • Node (Dieses Schlagwort wird in der englischen Version dieser Seite nicht mehr beschrieben und ist möglicherweise nicht mehr aktuell, s.u.)
    • -
  • Extensions und WebExtensions für die WebExtension-Dokumentation
    • -
- -

Generell nützlich ist der Name eines Interfaces, wie auch weitere verwandte Seiten (wie z.B. bei Node, das viele verwandte Seiten für seine verschiedenen Eigenschaften und Methoden hat), oder der Name des übergeordneten Technologie-Typs. Eine Seite über WebGL könnten Sie zum Beispiel mit den Schlagwörtern Graphics und WebGL versehen, aber eine Seite über {{HTMLElement("canvas")}} könnte mit HTML, Element, Canvas, und Graphics gekennzeichnet werden.

- -

Mozilla-spezifische Inhalte

- -

Diese Schlagwörter werden nur für Mozilla-spezifische Inhalte verwendet:

- -
    -
  • Mozilla
    • -
  • Firefox
    • -
  • Firefox OS
    • -
  • Gecko
    • -
  • XUL
    • -
  • XPCOM
    • -
- -

API-Identifikation

- -

In der API-Referenz sollte aus jedem Artikel hervorgehen, welchen Teil der API er abdeckt:

- -
-
Interface
-
Der Hauptartikel für ein Interface sollte dieses Schlagwort verwenden. Zum Beispiel: RTCPeerConnection.
-
Constructor
-
Jedes Interface darf bis zu eine Seite haben, die mit "Constructor" gekennzeichnet ist. Dies ist der Konstruktor des Interface. Die Seite sollte den gleichen Namen haben wie das Interface, wie in RTCPeerConnection.RTCPeerConnection().
-
Property
-
Jeder Artikel, der eine Eigenschaft von einem Interface beschreibt, benötigt dieses Schlagwort. Siehe zum Beispiel: RTCPeerConnection.connectionState().
-
Method
-
Jeder Artikel, der eine Methode eines Interfaces dokumentiert, benötigt dieses Schlagwort. Siehe zum Beispiel: RTCPeerConnection.createOffer().
-
- -

Weiterhin müssen Referenzseiten Interface, Eigenschaft und Methodennamen in ihrer Schlagwortliste enthalten. Einige Bespiele:

- -
-
Das Interface RTCPeerConnection
-
Fügen Sie die Schlagwörter RTCPeerConnection zusammen mit den anderen relevanten Schlagwörtern ( Interface, WebRTC, WebRTC API, API, Reference, usw.) hinzu.
-
Die Methode RTCPeerConnection.createOffer()
-
Fügen Sie die Schlagwörter RTCPeerConnection und createOffer (Beachten Sie hierbei: keine Klammern in Schlagwörtern!) zusammen mit den anderen relevanten Schlagwörtern hinzu, wie Method, WebRTC, WebRTC API, API, Reference, usw. Erwägen Sie auch die Verwendung von Schlagwörtern wie Offer und SDP, die hier auch relevant sind.
-
Die Eigenschaft RTCPeerConnection.iceConnectionState
-
Fügen Sie die Schlagwörter RTCPeerConnection und iceConnectionState zusammen mit anderen relevanten Schlagwörtern hinzu, wie Property, WebRTC, WebRTC API, API und Reference. Erwägen sie auch, ICE hinzuzufügen.
-
- -

Technologie-Status

- -

Um dem Leser bei dem Verstehen, wie praktikabel eine Technologie ist, zu unterstützen, verwenden wir Schlagwörter, um Seiten mit dem Stand einer technischen Spezifikation zu markieren. Dies ist zwar nicht so detailliert, wie das erklären der Spezifikation und wie weit der Spezifikations-Prozess fortgeschritten ist (dafür gibt es die Spezifikations-Tabelle), aber es hilft dem Leser, mit einem kurzen Blick einzuschätzen, ob es eine gute Idee ist, die beschriebene Technologie zu verwenden.

- -

Hier sind mögliche Belegungen für diese Schlagwörter:

- -
-
Read-only
-
Nutzen Sie dieses Schlagwort für Referenzseiten, die eine Eigenschaft oder ein Attribut beschreiben, das einen Nur-Lese-Status hat.
-
Non-standard
-
Weist darauf hin, dass die auf der Seite beschriebene Technologie oder API nicht Teil eines Standards ist, unabhängig davon, ob es in den Browsern, die es implementieren, stabil funktioniert (wenn es nicht stabil sind, sollte die Seite mit Experimental gekennzeichnet werden). Wenn Sie dieses Schlagwort nicht verwenden, werden Ihre Leser davon ausgehen, dass die Technologie ein Standard ist. Die Kompatibilitäts-Tabelle auf der Seite sollte klarstellen, welche/-r Browser diese API oder Technologie unterstützen.
-
Deprecated
-
Die Technologie oder die API auf der Seite ist in der Spezifikation als veraltet gekennzeichnet und es ist zu erwarten, dass sie irgendwann entfernt wird, jedoch ist sie im Allgemeinen in den aktuellen Versionen der Browser noch verfügbar.
-
Obsolete
-
Die Technologie oder API gilt als veraltet und wurde aus allen, bzw. den meisten aktuellen Browsern entfernt (oder sie wird gerade aktiv entfernt).
-
Experimental
-
Die Technologie ist nicht standardisiert und ist noch eine experimentelle Technologie oder API, die möglicherwiese zukünftig ein Standard werden könnte. Sie unterliegt zudem der stetigen Veränderungen in der Browserengine, die sie implementiert (typischerweise ist dies nur eine). Wenn die Technologie nicht Teil einer Spezifikation ist (auch, falls sie Teil eines Entwurfs derselben ist), so sollte sie außerdem das Schlagwort Non-standard bekommen.
-
Needs Privileges
-
Die API benötigt privilegierten Zugriff zu dem Gerät, auf dem der Code läuft.
-
Certified Only
-
Die API funktioniert ausschließlich mit zertifiziertem Code.
-
- -

Die Verwendung dieser Schlagwörter ist kein Grund dafür, dass Sie die Kompatibilitätstabelle in Ihrem Artikel weglassen können! Die sollte immer vorhanden sein.

- -

Fertigkeitsstand

- -

Nutzen Sie die Fertigkeitsstand-Schlagwörter nur für Guides und Tutorials (also Seiten, die mit dem Schlagwort: Guide gekennzeichnet wurden). Sie sollen den Benutzern dabei helfen, basierend darauf, wie gut sie eine Technologie kennen, das richtige Tutorial auszuwählen. Hierfür gibt es drei Schlagwörter:

- -
-
Beginner
-
Artikel für Anfänger mit dem Zweck der Einführung in eine Technologie, die sie noch nie angewendet haben bzw. mit der sie nur wenig vertraut sind.
-
Intermediate
-
Artikel für Anwender, die zwar schon begonnen haben, die Technologie zu benutzen, jedoch keine Experten sind.
-
Advanced
-
Artikel mit dem Ziel, die Fähigkeiten der Technologien und des Lesers vollständig auszuschöpfen.
-
- -

Dokument-Metadaten

- -

Die Autoren-Gemeinschaft verwendet Schlagwörter, um Artikel entsprechend der Art der Arbeit, die gemacht werden muss, zu kennzeichnen. Hier ist eine Liste der Schlagwörter, die wir am häufigsten dafür benutzen:

- -
-
Draft
-
Der Artikel ist noch nicht vollständig und wird zumindest theoretisch noch aktiv überarbeitet (auch wenn es möglich ist, dass man ihn vergessen hat). Versuchen Sie, die letzten Beitragenden zu kontaktieren, bevor Sie Veränderungen vornehmen, um mögliche Inhaltskollisionen zu vermeiden.
-
junk
-
Beitrag enthält wertloses Zeug - sollte entfernt werden (Dieses Schlagwort wird in der englischen Version dieser Seite nicht mehr beschrieben und ist möglicherweise nicht mehr aktuell).
-
NeedsCompatTable
-
Der Artikel benötigt eine Tabelle, welche die Kompatibilität eines Features mit verschiedenen Browsern aufzeigt. Siehe hier für die Anleitung zum Beitragen der Browser-Kompatiblität.
-
NeedsContent
-
Der Artikel ist ein Kurzeintrag oder es fehlen auf eine andere Art und Weise Informationen. Das bedeutet, dass jemand den Inhalt überarbeiten, mehr Details hinzufügen und/oder den Artikel zu Ende schreiben sollte.
-
NeedsExample
-
Der Artikel benötigt ein oder mehrere Beispiele, um den Inhalt zu illustrieren. Solche Beispiele sollten das live sample system benutzen.
-
NeedsLiveSamples
-
In diesem Artikel bit es ein oder mehrere Beispiele, die mittels live sample system erneuert werden müssen.
-
NeedsSpecTable
-
Der Artikel benötigt eine Tabelle, welche das bzw. die Dokument/-e enthält, in dem/denen das Feature definiert wurde.
-
NeedsUpdate
-
Der Inhalt ist veraltet und muss aktualisiert werden.
-
l10n:exclude
-
Der Inhalt ist es nicht wirklich wert, übersetzt zu werden und wird nicht auf Übersetzungs-Status-Seiten erscheinen.
-
l10n:priority
-
Der Inhalt ist wichtig und sollte für MDN-Übersetzer als priorisiert markiert sein. Er wird in einer extra Prioritäts-Tabelle auf Lokalisierungs-Status-Seiten erscheinen.
-
- -

Web Literacy Map

- -

(Dieser Abschnitt ist in der Englischen Version dieser Seite nicht mehr vorhanden und möglicherweise nicht mehr aktuell) Das WebMaker Projekt, siehe Web Literacy Map, hat eine Reihe von Schlagwörtern definiert, um die verschiedenen und empfohlenen Fähigkeiten zu definieren, die ein besseres Lesen, Schreiben und die Teilnahme am Web ermöglichen. Wir benutzen sie auf MDN, um unseren Anwendern die besten Resourcen zu finden, welche ihren Ansprüchen genügen:

- -
-
Navigation
-
Der Beitrag liefert Informationen darüber wie man das Web durchsuchen kann.
-
WebMechanics
-
Der Beitrag liefert Informationen darüber wie das Web organisiert ist und wie es funktioniert.
-
Search
-
Der Beitrag zeigt die Möglichkeiten auf, wo Informationen, Personen und Resourcen mittels des des Webs zu finden sind.
-
Credibility
-
Der Artikel liefert Informationen darüber wie kritisch zu bewertende Informationen sind, die auf dem Web gefunden wurden.
-
Security
-
Der Artikel liefert Informationen wie man Systeme, Identitäten und Inhalt sicher aufbewahrt.
-
Composing
-
Der Artikel liefert Informationen wie Inhalt für das Web kreiert und sichert.
-
Remixing
-
Der Artikel liefert Informationen wie man existierende Web-Resourcen nutzt, um neue Inhalte zu erstellen.
-
DesignAccessibility
-
Der Artikel liefert Informationen darüber, wie eine effektive und universelle Kommunikation mittels Nutzung der Web-Resourcen zustande gebracht werden kann.
-
CodingScripting
-
Der Artikel liefert Informationen wie interaktive Kodierung und/oderErfahrungen auf dem Web erstellt werden können.
-
infrastructure
-
Der Artikel liefert Informationen, die das Verständnis der Internet-Technik aufzeigen.
-
Sharing
-
Der Artikel zeigt auf, wie man zusammen mit anderen Teilnehmern Resourcen kreiert.
-
Collaborating
-
Der Artikel liefert Informationen wie man mit an deren zusammenarbeiten kann.
-
Community
-
Der Artikel liefert Informationen wie man in Web-Communities eingebunden werden kann und zeigt deren Praktiken auf.
-
Privacy
-
Der Artikel liefert Informationen über Konsequenzen, wenn Daten online ausgetauscht werden.
-
OpenPracticies
-
Der Artikel liefert Informationen wie geholfen werden kann, das Web universell zugänglich zu machen.
-
- -

Zusammenfassung

- -

Für jede Seite fügen Sie nun verscheidene Schlagwort-Typen hinzu, zum Beispiel:

- -
-
Eine Anleitung über WebGL für Anfänger:
-
WebGL, Graphics, Guide, Beginner
-
Referenz-Seite für das {{HTMLElement("canvas")}} Element
-
Canvas, HTML, Element, Graphics, Reference
-
Seite für Firefox OS Entwickler-Werkzeuge
-
Tools, Firefox OS, Landing
-
- -

Schlagwörter und Suchfilter

- -

Suchfilter funktionieren nicht richtig, außer wir verwenden die Schlagwörter der MDN-Seiten korrekt. Hier ist eine Tabelle mit Suchfiltern und den Schlagwörtern, die sie benutzen. (Diese Tabelle ist möglicherweise nicht aktuell, siehe auch englische Version)

- -
-

Note: Falls mehrere Tags unter "Tag Name" gelistet sind, bedeutet das, dass einer oder mehrere dieser Tags benötigt werden, damit der Artikel gefunden wird.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Filter-GruppeSuchfilter NameSchlagwörter
TopicOpen Web AppsApps
HTMLHTML
CSSCSS
JavaScriptJavaScript
APIs and DOMAPI
CanvasCanvas
SVGSVG
MathMLMathML
WebGLWebGL
XULXUL
MarketplaceMarketplace
FirefoxFirefox
Firefox for AndroidFirefox Mobile
Firefox for DesktopFirefox Desktop
Firefox OSFirefox OS
MobileMobile
Web DevelopmentWeb Development
Add-ons & ExtensionsAdd-ons|| Extensions || Plugins || Themes
GamesGames
Skill levelI'm an ExpertAdvanced
IntermediateIntermediate
I'm LearningBeginner
Document typeDocsThis will restrict the search to docs content, leaving out Hacks and other MDN content.
DemosThis will include Demo Studio content in the search results.
ToolsTools
Code SamplesExample
How-To & TutorialGuide
Developer ProfilesThis will include developer profiles from the MDN site in the search results.
External ResourcesThis is something the dev team will need to figure out.
- -

Schlagwörter-Probleme, die Sie beheben können

- -

Es gibt verschiene Typen von Problemen mit Schlagwörtern, die Sie beheben können.

- -
-
Keine Schlagwörter
-
im Allgemeinen sollten alle Artikel mindestens mit einem category und einem topic Schlagwort versehen sein. Meistens sind auch andere Schlagwörter sinnvoll, aber wenn Sie uns helfen können, diese minimale Kennzeichnung mit Schlagwörtern auf allen Seiten sicherzustellen, sind sie ein Dokumentationsheld!
-
Schlagwörter, die nicht unseren Schlagwort-Standards entsprechen
-
Bitte beseitigen sie in alle Probleme auf Seiten, deren Schlagwörter nicht den Standars auf dieser Seite folgen. Beachten Sie, dass Sie gelegentlich einige lokalisierte Schlagwörter auf Englischen Seiten sehen werden (wie Référence). Dies ist aufgrund eines Bugs in Kuma passiert, was dazu führte, das einige Schlagwörter wieder auftauchten, auch wenn sie bereits gelöscht waren. Dieser Bug wurde seitdem behoben, sodass sämtliche verbliebene lokalisierte Schlagwörter (auf den englischen Seiten) bereinigt werden können, wenn sie gesichtet werden.
-
Falsch verwendete Schlagwörter
-
Wenn Sie sich einen Artikel über HTML ansehen, der mit dem Schlagwort "JavaScript" versehen ist, dann ist das wahrscheinlich falsch! Genauso ist es, wenn ein Artikel Mozilla-interne Dinge beschreibt, aber mit einem "Web" Schlagwort versehen ist. Das ist vermutlich auch falsch. Entfernen Sie diese Schlagwörter und fügen Sie die richtigen hinzu, falls sie noch nicht vorhanden sind. Bitte korrigieren Sie auch falsch geschriebene Schlagwörter (z.B. würde "Javascript" immer noch funktionieren, da Schlagwörter keine Groß- und Kleinschreibung berücksichtigen, aber lassen Sie uns nicht nachlässig sein!).
-
Fehlende Schlagwörter
-
Wenn ein Artikel ein paar, aber noch nicht alle Schlagwörter hat, die er benötigt, fügen Sie ruhig mehr hinzu. Zum Beispiel, wenn eine JavaScript-Referenzseite (korrekterweise) mit dem Schlagwort JavaScript versehen ist, aber keinem sonst, fügen Sie gerne das Schlagwort "Reference" oder einen anderes, passendes Kategorie-Schlagwort hinzu!
-
Schlagwort-Spam
-
Dieses heimtückische Biest ist das abstoßendste aller Schlagwort-Probleme: irgendein Web-Ungeziefer hat seine Häufchen in den Schlagwörtern hinterlassen (wie zum Beispiel "Free warez!" oder "Hey ich war auf deiner Seite unterwegs und wollte fragen ob du mir helfen kannst mein Flashplayer stürzt dauernd ab"). Wir müssen solche Schlagwörter sofort löschen! Sie sind unschön, es wird schwer, sie loszuwerden, wenn wir sie zu lange rumlungern lassen und sie sind schrecklich für {{Glossary("SEO")}}.
-
- -

Wenn Sie eines (oder mehrere) dieser Probleme bemerken, melden Sie sich bei MDN an und klicken Sie auf "Bearbeiten" oben rechts am MDN-Fenster. Nachdem der Editor geladen ist, scrollen Sie nach unten zum Ende der Seite. Dort finden Sie die Schlagwort-Box. Für mehr Details zur Schlagwort-Oberfläche besuchen Sie bitte "The tags box" im MDN-Editor-Leitfaden.

diff --git a/files/de/mdn/writing_guidelines/index.html b/files/de/mdn/writing_guidelines/index.html deleted file mode 100644 index f53f50887b25c0..00000000000000 --- a/files/de/mdn/writing_guidelines/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Über MDN -slug: MDN/Writing_guidelines -translation_of: MDN/About -original_slug: MDN/About ---- -
{{MDNSidebar}}
- -
{{IncludeSubNav("/en-US/docs/MDN")}}
- -

MDN Web Docs ist eine sich entwickelnde Lernplattform für Web-Techniken und Software, die das Web antreibt, einschließlich:

- - - -

Unsere Mission

- -

MDNs Mission ist einfach: Entwickler mit den Informationen versorgen, die sie benötigen, um Projekte für ein offenes Web einfach umzusetzen. Wenn es sich um eine offene Technik für das Web handelt, möchten wir sie dokumentieren.

- -

Darüber hinaus stellen wir die Dokumentation zu Mozilla-Produkten zur Verfügung und wie man Mozilla-Projekte erstellt und zu ihnen beiträgt.

- -

Wenn du dir nicht sicher bist, ob ein bestimmtes Thema für MDN geeignet ist, lies: Gehört das zu MDN?

- -

Wie du helfen kannst

- -

Du musst nicht programmieren — oder gut schreiben können — um bei MDN beitragen zu können! Es gibt viele Möglichkeiten zu unterstützen. Vom Korrekturlesen von Artikeln, um sicherzustellen, dass sie verständlich sind, über das Beitragen von Texten, bis zum Hinzufügen von Beispiel-Quelltexten. Tatsächlich gibt es so viele Arten zu helfen, dass wir eine Erste Schritte-Seite erstellt haben, die dir dabei helfen soll, zu erledigende Aufgaben nach deinen Interessen und der zur Verfügung stehenden Zeit auszuwählen!

- -

Du kannst uns auch helfen MDN bekannter zu machen, in dem du es auf deinem Blog oder deiner Website erwähnst.

- -

Die MDN-Gemeinschaft

- -

Unsere Gemeinschaft ist global! Wir haben Mitwirkende aus der ganzen Welt, in einer Vielzahl an Sprachen. Wenn du mehr über uns erfahren möchtest, oder auf irgendeine Art Hilfe bei MDN benötigst, zögere nicht unser Diskussionsforum oder unseren IRC-Kanal zu besuchen! Du kannst auch auf dem Laufenden bleiben in dem du unserem Twitter-Konto unter @MozDevNet folgst. Auf diese Art kannst du auch Tweets an uns senden, falls dir Unstimmigkeiten auffallen, du uns deine Meinung sagen oder ein großes Dankeschön an unsere Autoren und Mitwirkenden senden möchtest!

- -

Verwendung der MDN Web Docs-Inhalte

- -

Urheberrecht und Lizenzen

- -

MDN wiki documents have been prepared with the contributions of many authors, both within and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the Creative Commons Attribution-ShareAlike license (CC-BY-SA), v2.5 or any later version. Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:

- -
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
- -

Note that in the example, "Mozilla Contributors" links to the history of the cited page. See Best practices for attribution for further explanation.

- -
-

See MDN content on WebPlatform.org for information about how to reuse and attribute MDN content on that site.

-
- -

Code samples added to this wiki before August 20, 2010 are available under the MIT license; you should insert the following attribution information into the MIT template: "© <date of last wiki page revision> <name of person who put it in the wiki>".

- -

Code samples added on or after August 20, 2010 are in the public domain. No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".

- -

If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under Creative Commons CC-0 (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.

- -

Some older content was made available under a license other than the licenses noted above; these are indicated at the bottom of each page by way of an Alternate License Block.

- -
-

Es dürfen keine neuen Seiten unter Verwendung anderer Lizenzen erstellt werden.

-
- -

Das Urheberrecht für beigetragenes Material verbleibt beim Autor, bis der Autor es auf jemand anderen überträgt.

- -

Wenn du Fragen oder Bedenken betreffs der hier diskutierten Belange hast, kontaktiere bitte Eric Shepherd.

- -
-

Die Rechte an den Markenzeichen, Logos und Dienstleistungsmarken der Mozilla Foundation, sowie die Gestaltung dieser Website, stehen nicht unter der Creative Commons-Lizenz, and to the extent they are works of authorship (wie Logos und grafische Entwürfe), sie sind nicht Bestandteil der Werke die unter diesen Bedingungen lizenziert sind. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: licensing@mozilla.org.

- -

Inhalte herunterladen

- -

Du kannst ein vollständiges, gespiegeltes Archiv von MDN (2.5 GB, Stand: 2016-11-30) herunterladen.

- -

Einzelne Seiten

- -

Du kannst den Inhalt einer einzelnen Seite von MDN abfragen, in dem du den Dokumentparameter, mit dem du auch gleich das Dateiformat festlegst, zur URL hinzufügst.

- -

Werkzeuge von Dritten

- -

Du kannst dir MDN-Inhalte durch Werkzeuge, die von Dritten erstellt wurden, ansehen, wie zum Beispiel Dash (für Mac OS) und Zeal (für Linux und Windows).

- -

Kapeli veröffentlich auch offline MDN docs, die die Bereiche HTML, CSS, JavaScript, SVG und XSLT abdecken.

- -

Verlinken auf MDN

- -

Lies diesen Artikel für eine Anleitung und die beste Vorgehensweise beim Verlinken auf MDN.

- -

Probleme mit MDN Web Docs melden

- -

Siehe Wie kann man auf MDN ein Problem melden.

- -

Geschichte der MDN Web Docs

- -

Das Projekt MDN Web Docs (zuvor Mozilla Developer Network (MDN), zuvor Mozilla Developer Center (MDC), a.k.a. Devmo) startete im Jahr 2005 als die Mozilla Foundation eine Lizenz von AOL erhielt um die originalen Netscape DevEdge-Inhalte nutzen zu dürfen. Die DevEdge-Inhalte wurden dann nach noch brauchbarem Material durchsucht, welches dann von Freiwilligen in dieses Wiki übertragen wurde, so dass es leichter aktuell zu halten und zu warten wäre.

- -

Du kannst mehr über die Geschichte von MDN auf unserer Seite über die Feier zum 10. Jubiläum erfahren, einschließlich mündlicher Berichte von einigen der daran Beteiligten.

- -

Über Mozilla

- -

Whether you want to learn more about who we are, how to be a part of Mozilla or just where to find us, you've come to the right place. To find out what drives us and makes us different, please visit our mission page.

diff --git a/files/de/mdn/writing_guidelines/page_structures/index.html b/files/de/mdn/writing_guidelines/page_structures/index.html deleted file mode 100644 index 4b6779f31687bc..00000000000000 --- a/files/de/mdn/writing_guidelines/page_structures/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Document structures -slug: MDN/Writing_guidelines/Page_structures -translation_of: MDN/Structures -original_slug: MDN/Structures ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.

- -

{{LandingPageListSubPages()}}

diff --git a/files/de/mdn/writing_guidelines/page_structures/live_samples/index.html b/files/de/mdn/writing_guidelines/page_structures/live_samples/index.html deleted file mode 100644 index 0b24240ee3601d..00000000000000 --- a/files/de/mdn/writing_guidelines/page_structures/live_samples/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: How to convert code samples to be "live" -slug: MDN/Writing_guidelines/Page_structures/Live_samples -translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live -original_slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live ---- -
{{MDNSidebar}}

MDN besitzt ein "live sample"-System, bei dem die Ausgabe des angezeigten Codes direkt angezeigt wird. Allerdings gibt es noch viele Codebeispiele, die dieses System noch nicht nutzen und noch konvertiert werden müssen.

- -

Live-Beispiele, die dir direkt die Ausgabe anzeigen, machen Dokumentationen dynamischer und informativer. Der Leitfaden beschreibt, wie die "live"-Funktionalität zu bereits bestehenden Beispielen hinzugefügt werden kann.

- -
    -
  • Beispielabhängige Fähigkeiten in HTML, CSS und JavaScript
    • -
  • Fähigkeit KumaScript in Artikeln zu nutzen
    • -
- -
    -
  1. Wähle einen Artikel mit dem Tag "NeedsLiveSample" aus
    2. -
  2. Konvertiere das Codebeispiels
    3. -
  3. Lösche alle Bilder oder Texte, auf denen die Ausgabe gezeigt wird
    4. -
- -
-
Wo muss dies gemacht werden?
-
Bei Artikeln mit dem Tag "NeedsLiveSample".
-
Was musst du können um diese Aufgabe zu erledigen?
-
Welche Schritte müssen unternommen werden?
-
- -

Für weitere Informationen um das Thema Erstellen und Bearbeiten von Live-Beispielen, schau dir Using the live sample system an

diff --git a/files/de/mdn/yari/index.html b/files/de/mdn/yari/index.html deleted file mode 100644 index 4a1db717aff25b..00000000000000 --- a/files/de/mdn/yari/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 'Kuma: MDN''s wiki platform' -slug: MDN/Yari -tags: - - Einstieg bei Mozilla - - Helfen - - Kuma - - MDN Meta - - Mitarbeiten -translation_of: MDN/Kuma -original_slug: MDN/Kuma ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/de/docs/MDN")}}
- -

Kuma ist der Django Code der die MDN Dokumentation unterstützt.

- -

{{SubpagesWithSummaries}}

- -

An Kuma mitarbeiten.

- -

Um an Kuma mit zuarbeiten musst du:

- - diff --git a/files/de/mozilla/add-ons/index.html b/files/de/mozilla/add-ons/index.html deleted file mode 100644 index a0a02eeeef3571..00000000000000 --- a/files/de/mozilla/add-ons/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Add-ons -slug: Mozilla/Add-ons -tags: - - Add-ons - - Erweiterungen - - Mozilla -translation_of: Mozilla/Add-ons ---- -
{{AddonSidebar}}
- -
Ändern und Erweitern von Mozilla-Anwendungen
- -

Add-ons fügen neue Funktionalitäten zu Gecko-basierten Anwendungen wie zum Beispiel Firefox, SeaMonkey und Thunderbird hinzu. Es gibt zwei Arten von Add-ons: Erweiterungen fügen neue Funktionen zur Anwendung hinzu, während Themes nur die Oberfläche verändern.

- -

Für Erweiterungen und Themes betreibt Mozilla ein Repository auf addons.mozilla.org, auch bekannt als AMO. Wenn Sie Add-ons bei AMO einreichen werden diese überprüft und erst nach bestandener Prüfung veröffentlicht. Allerdings ist es nicht zwingend erforderlich, dass Add-ons nur über AMO veröffentlicht werden, aber durch die Überprüfung gewinnen Anwender an Vertrauen und im Gegenzug können Sie von AMO als einer zentralen Plattform, auf der viele hilfreiche Add-ons zu finden sind, nur profitieren.

- -
-
Add-ons können großen Einfluss auf das Verhalten der Anwendung haben, die sie hosten. Wir haben eine Reihe von Richtlinien entwickelt, um sicherzustellen, dass Sie eine gute Erfahrung für Benutzer bereitstellen. Diese Richtlinien gelten für alle Arten von Add-ons, ob sie auf addons.mozilla.org oder nicht gehostet werden.
-
- -
-

Erweiterungen

- -

Erweiterungen fügen neue Funktionalität bei Mozilla-Anwendungen wie Firefox und Thunderbird hinzu. Sie können dem Browser neue Funktionen hinzufügen, z. B. eine andere Möglichkeit zum Verwalten von Registerkarten, neue Funktionen hinzufügen und sie können Web-Inhalte zur Verbesserung der Benutzerfreundlichkeit oder die Sicherheit von bestimmten Webseiten ändern.

- -
-
Es gibt drei verschiedene Ansätze Erweiterungen zu erstellen können: Add-on SDK-basierte Erweiterungen, manuell bootstrapped restartless Erweiterungen und Overlay-Erweiterungen.
- - -
- -

Add-on SDK Erweiterungen

- -
- - -
Erweiterungen, die auf high-level JavaScript APIs aufbauen und keinen Browserneustart bei der Installation erfordern.
-
- -

Restartless Erweiterungen

-
- - -
Erweiterungen, die keinen Browserneustart bei der Installation erfordern.
-
- -

Overlay Erweiterungen

-
- - -
Overlay-Erweiterungen, die gewöhnlich XUL-Overlays verwenden, und einen Browserneustart bei der Installation erfordern
-
- - - -
-
Wenn Sie können, ist es ratsam, das Add-on-SDK zu verwenden, die Add-on-SDK verwendet die restartless Erweiterungsmechanismus die aber bestimmte Aufgaben vereinfacht und sich selbst bereinigt. Wenn das Add-on SDK nicht ausreichend für Ihre Bedürfnisse ist, implementieren Sie stattdessen eine manuelle restartless-Erweiterung.
- - -
- -
-
Lesen Sie für weitere Informationen zur Auswahl "welche Technik verwenden" diesen Vergleich.
- - -
- -

Debugging

- -

Die Entwicklung von Erweiterung wird erschwert, wenn man für den Debug über keine Möglichkeit verfügt zu sehen, in welcher Zeile der Fehler aufgetreten ist. Sie müssen die Entwickler Präferenzen aktivieren, damit die logs in der Browser Konsole gezeigt werden. Für Dektopnutzer: Einrichten einer Entwicklungsumgebung für Erweiterungen.

- -

Für eine Desktop-Umgebung nutzen Sie: Eine Entwicklungsumgebung einrichten, für Mobile Geräte (Android/iOS) nutzen Sie: Debugging Firefox for Android with WebIDE. Letztere verwendet die "Browser Toolbox" innerhalb der Dektop WebIDE, um auf dem Mobilgerät auftretende Fehler zu erkennen, nutzen Sie für Firefox OS auch die WebIDE.

- -
-
-

Empfohlene Vorgehensweisen

- -
-
Egal, wie Sie eine Erweiterung entwickeln. Gibt es einige Richtlinien, denen Sie folgen können, um sicherzustellen, dass Ihre Erweiterung einem Benutzer eine möglichst gute Nutzererfahrung bietet.
- - -
- -
-
Leistung
-
-
-
Die Erweiterung ist schnell, reaktionsfähig und Speicher-effizient.
-
-
-
Sicherheit
-
-
-
Die Erweiterung setzt den Nutzer keinen schädlichen Websites aus.
-
-
-
Etikette
-
-
-

Die Erweiterung arbeitet problemlos mit anderen Erweiterungen.

-
-
-
-
- -
-

Anwendungsspezifische

- -
-
Der Großteil der Dokumentation geht davon aus, dass Sie für Firefox Desktop entwickeln. Wenn Sie für einige andere Gecko-basierte Anwendung entwickeln, gibt es große Unterschiede, über die Sie Bescheid wissen müssen.
- - -
- -
-
Thunderbird
-
-
-
Entwicklung von Erweiterungen für den Thunderbird-Mail-Client.
-
-
-
Firefox for Android
-
-
-
Entwicklung von Erweiterungen für Firefox für Android.
-
-
-
SeaMonkey
-
-
-
Entwicklung von Erweiterungen für SeaMonkey Software-Suite.
-
-
-
-
-
- -
-

Themes

- -
-
Themen sind Add-ons, die Benutzeroberfläche der Anwendung anpassen. Es gibt zwei Arten von Themen: leichte Themen und komplette Themen.
- - -
- -
-
-

Leichte Themen sind viel einfacher zu implementieren als komplette Themen, aber sie bieten sehr begrenzte Anpassungs möglichkeiten .

-
- -
-
-
Mit kompletten Themes machen Sie viel tieferen Änderungen an der Benutzeroberfläche der Anwendung. Die Dokumentation für komplette Themes ist veraltet, aber ist hier als eine mögliche Grundlage für aktualisierte Dokumentation verbunden.
-
-
-
- -

Andere Arten von Add-ons

- -
-
Search engine plugins sind eine einfache und sehr spezifische Art von Add-on: sie fügen neue Suchmaschinen zu den Browser-Suchleiste hinzu.
- - -
- -
-
Plugins helfen den Anwendung den Inhalt zu verstehen, die nicht nativ unterstützt werden. Wir sind dabei ablehnend Plugins zu Supporten, da sie eine Geschichte der Stabilität, Leistung und Sicherheitsprobleme verursacht haben.
-
- -

Inhalt

- -
    -
  1. Overlay Erweiterung
    2. -
  2. Restartless Erweiterung
    3. -
  3. Add-on SDK
    4. -
  4. Erweiterung Bewährte -
      -
    1. Leistung
      2. -
    2. Sicherheit
      3. -
    3. Etikette
      4. -
    -
    5. -
  5. Themes -
      -
    1. Leichte Themes
      2. -
    2. Komplete Themes
      3. -
    -
    6. -
  6. Veröffentlichung Add-ons -
      -
    1. addons.mozilla.org
      2. -
    2. Add-on Richtlinien
      3. -
    -
    7. -
diff --git a/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html deleted file mode 100644 index 436f7c54c13ade..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Aufbau einer WebExtension -slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension ---- -
{{AddonSidebar}}
- -

Eine Extension (Erweiterung) beinhaltet eine Sammlung von Dateien, gepackt für die Verbreitung and Installation. In diesem Artikel, gehen wir kurz auf Dateien ein, die vorhanden sein könnten.

- -

manifest.json

- -

"manifest.json" ist die einzige Datei, die in jeder Extension vorhanden sein muss. Sie enthält die grundlegenden Metadaten wie Name, Version und benötigte Genehmigungen. Außerdem verweist sie auf andere Dateien der Extension.

- -

Dieses Manifest kann auch Zeiger zu mehreren anderen Dateitypen haben:

- -
    -
  • Hintergrundseiten: führen Langzeitprozesse aus
    • -
  • Icons für die Extension und jegliche Buttons können festgelegt werden.
    • -
  • Sidebars, Pop-ups und Options-Pages: HTML-Dokumente, die Inhalte für unterschiedliche Komponenten der Benutzeroberfläche bereitstellen.
    • -
  • Content-Scripts: JavaScript in Ihrer Erweiterung, das in Webseiten eingefügt wird.
    • -
- -

- -

Für weitere Einzelheiten gehe auf manifest.json.

- -

Neben den vom Manifest referenzierten Seiten, kann eine Extension zusätzlche Extension pages mit unterstützenden Dateien enthalten.

- -

Hintergrundskripte

- -

Extensions müssen oft langzeitig ihren Zustand aufrechterhalten oder Operationen, unabhängig der Lebensdauer von irgendwelchen speziellen Webseiten oder Browserfenstern, durchführen. Dafür gibt es Hintergrundskripte (background scripts).

- -

Hintergrundskripte werden geladen, sobald die Extension geladen ist und laufen bis die Extension deaktiviert oder deinstalliert wird. Du kannst alles aus den WebExtension APIs im Skript benutzen, solange du die notwendigen Berechtigungen abgefragt hast.

- -

Hintergrundskripte festlegen

- -

Du kannst ein Hintergrundskript einbinden in dem du den background-Key in "manifest.json" benutzt:

- -
// manifest.json
-
-"background": {
-  "scripts": ["background-script.js"]
-}
- -

Du kannst mehrere background scripts angeben: wenn du sie im selben Kontext laufen lässt, so wie mehrere Skripts, die in eine einzelne Seite geladen werden.

- -

Hintergrundskript-Umgebung

- -

DOM APIs

- -

Hintergrundskripte laufen im Rahmen spezieller Seiten genannt 'background pages' (Hintergrundseiten). Diese geben ihnen ein globales window, samt der vollständigen Standard DOM APIs, die von diesem Objekt bereitgestellt werden.

- -

Du musst deine Hintergrundseite nicht bereitstellen. Wenn du dein Hintergrundskript hinzufügst, wird eine leere Hintergrundseite für dich erstellt.

- -

Dennoch kannst du deine Hintergrundseite auch als separate HTML-Datei erstellen:

- -
// manifest.json
-
-"background": {
-  "page": "background-page.html"
-}
- -

WebExtension APIs

- -

Hintergrundskripte können alles aus den WebExtension APIs im Skript nutzen, solange deren Extension die notwendigen Berechtigungen hat.

- -

Cross-origin access

- -

Hintergrundskripte können XHR-Anfragen an alle Hosts machen, für die sie host permissions haben.

- -

Web content

- -

Hintergrundskripte haben keinen direkten Zugriff auf Webseiten. Sie können jedoch Content-Scripts in Webseiten laden und mit ihnen über message-passing API kommunizieren.

- -

Content security policy

- -

Hintergrundskripte sind beschränkt in einigen potenziell gefährlichen Operationen, wie dem Benutzen von eval(), durch ein Sicherheitskonzept. Für mehr Informationen siehe Content Security Policy.

- - - -

Deine Extension kann unterschiedliche Benutzeroberflächenkomponenten enthalten, deren Inhalt wird durch ein HTML-Dokument festgelegt:

- -
    -
  • eine Sidebar ist ein Element, das auf der linken Seite des Browserfensters neben der Webseite angezeigt wird
    • -
  • ein Pop-up ist ein Dialogfenster, dass du anzeigen kannst, wenn der Benutzer auf einen Button der Werkzeugleiste oder der Adressleiste klickt
    • -
  • eine Options-Page ist eine Seite, die gezeigt wird, wenn der Benutzer deine Add-on-Einstellungen im browser-eigenen Add-ons-Manager abruft.
    • -
- -

Für jeden dieser Komponenten, erstellst du eine HTML-Datei und verweist auf sie über ein spezielles Attribut in manifest.json. Die HTML-Datei kann, wie eine normale Webseite, CSS- und JavaScript-Dateien einbinden.

- -

Sie alle sind Arten von Extension pages, und nicht wie eine normale Webseite, dein JavaScript kann dieselben WebExtension APIs wie dein Hintergrundskript benutzen. Sie können sogar direkt Variabeln aus der Hintergrundseite, mit {{WebExtAPIRef("runtime.getBackgroundPage()")}}, abrufen.

- -

Extension pages

- -

Du kannst außerdem HTML-Dokumente in deine Extension mit einbeziehen, die nicht vordefinierten Benutzeroberflächenkomponenten beigefügt wurden. Anders als die Dokumente, die du für Sidebars, Pop-ups, oder Option-Pages bereitstellen könntest, haben diese keinen Zugang zu "manifest.json". Dennoch haben sie Zugriff auf dieselben WebExtension APIs wie dein Hintergrundskript.

- -

Du lädst eine solche Seite normalerweise mit {{WebExtAPIRef("windows.create()")}} oder {{WebExtAPIRef("tabs.create()")}}.

- -

Siehe Extension pages um mehr zu lernen.

- -

Content scripts

- -

Benutze Content-Scripts um Webseiten abzurufen und zu manipulieren. Content-Scripts werden in Webseiten geladen und laufen im Rahmen der jeweiligen Seite.

- -

Content-Scripts sind von der Erweiterung bereitgestellte Skripts, die im Kontext einer Webseite laufen; das unterscheidet sie von Skripts, die von der Seite selber geladen werden, einschließlich derer, die in {{HTMLElement("script")}}-Elementen innerhalb der Seite bereitgestellt werden.

- -

Content-Scripts können das Seiten-DOM sehen und manipulieren, so wie normale, von der Seite geladene Skripte.

- -

Im Gegensatz zu normalen Skripten können sie:

- -
    -
  • domainübergreifende XHR-Anfragen machen.
    • -
  • eine kleine Teilmenge der WebExtension APIs benutzen.
    • -
  • Nachrichten mit ihren Hintergrundskripten austauschen und auf diesem Web indirekt die gesamten WebExtension APIs abrufen.
    • -
- -

Content-Scripts können nicht direkt normale Skripte der Seite abrufen, aber mit ihnen Nachrichten austauschen über die übliche window.postMessage() API.

- -

Wenn wir gewöhnlich über Content-Scripts sprechen, dann im Bezug auf JavaScript. Du kannst jedoch auch CSS zu einer Webseite über das selbe System hinzufügen.

- -

Sieh dir content scripts an um mehr zu erfahren.

- -

Web accessible resources

- -

Zugängliche Webressourcen(Web accessible resources) sind Ressourcen wie Bilder, HTML, CSS, und JavaScript, die du in die Extension einbindest und für Content-Scripts und Skripten der Seite zugänglich machen möchtest. Ressourcen, die web-zugänglich gemacht werden, können von Skripten der Seite und Content-Scripts über ein spezielles URI-Schema referenziert werden.

- -

Wenn zum Beispiel ein Content-Script Bilder in eine Webseite einfügen will, kannst du sie in der Extension beifügen und web-zugänglich machen. Dann könnte das Content-Script img-Tags erzeugen und hinzufügen, die über das src-Attribut auf die Bilder verweisen.

- -

Um mehr zu lernen, sieh die Dokumentation für den web_accessible_resources manifest.json key.

- -

- -

diff --git a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html deleted file mode 100644 index 09c172290c607e..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Lesezeichen -slug: Mozilla/Add-ons/WebExtensions/API/bookmarks -translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks -original_slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich. ---- -
{{AddonSidebar}}
- -

Die WebExtensions {{WebExtAPIRef("bookmarks")}} API erlaubt es einer Erweiterung mit dem Lesezeichensystem des Browsers interagieren und dieses zu manipulieren. Sie können die API verwenden, um für Seiten Lesezeichen zu setzen, vorhandene Lesezeichen abzurufen und Lesezeichen zu bearbeiten, zu entfernen und zu organisieren.

- -

Um diese API zu verwenden, muss die Erweiterung die Berechtigung "Lesezeichen" in der manifest.json Datei besitzen.

- -

Types

- -
-
{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}
-
Ein {{jsxref("String")}} enum, das angibt, warum ein Lesezeichen oder ein Ordner unmodifizierbar ist.
-
{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}
-
Stellt ein Lesezeichen oder einen Ordner im Lesezeichenbaum dar.
-
{{WebExtAPIRef("bookmarks.CreateDetails")}}
-
Enthält Informationen, die bei der Erstellung eines neuen Lesezeichens an die {{WebExtAPIRef("bookmarks.create()")}} Funktion übergeben werden.
-
- -

Functions

- -
-
{{WebExtAPIRef("bookmarks.create()")}}
-
Erstellt ein Lesezeichen oder Ordner.
-
{{WebExtAPIRef("bookmarks.get()")}}
-
Ruft eine oder mehrere {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab und übergibt eine Lesezeichen-ID oder ein Array von Lesezeichen ID.
-
{{WebExtAPIRef("bookmarks.getChildren()")}}
-
Ruft die Kinder des angegebenen {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab.
-
{{WebExtAPIRef("bookmarks.getRecent()")}}
-
Ruft eine angeforderte Anzahl von zuletzt hinzugefügten Lesezeichen ab.
-
{{WebExtAPIRef("bookmarks.getSubTree()")}}
-
Ruft einen Teil des Lesezeichenbaums ab und beginnt am angegebenen Knoten.
-
{{WebExtAPIRef("bookmarks.getTree()")}}
-
Ruft den gesamten Lesezeichenbaum in ein Array von {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} Objekte auf.
-
{{WebExtAPIRef("bookmarks.move()")}}
-
Moves the specified {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} to a new location in the bookmark tree.
-
{{WebExtAPIRef("bookmarks.remove()")}}
-
Removes a bookmark or an empty bookmark folder, given the node's ID.
-
{{WebExtAPIRef("bookmarks.removeTree()")}}
-
Recursively removes a bookmark folder; that is, given the ID of a folder node, removes that node and all its descendants.
-
{{WebExtAPIRef("bookmarks.search()")}}
-
Searches for {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s matching a specified set of criteria.
-
{{WebExtAPIRef("bookmarks.update()")}}
-
Updates the title and/or URL of a bookmark, or the name of a bookmark folder, given the bookmark's ID.
-
- -

Events

- -
-
{{WebExtAPIRef("bookmarks.onCreated")}}
-
Fired when a bookmark or folder is created.
-
{{WebExtAPIRef("bookmarks.onRemoved")}}
-
Fired when a bookmark or folder is removed. When a folder is removed recursively, a single notification is fired for the folder, and none for its contents.
-
{{WebExtAPIRef("bookmarks.onChanged")}}
-
Fired when a bookmark or folder changes. Currently, only title and url changes trigger this.
-
{{WebExtAPIRef("bookmarks.onMoved")}}
-
Fired when a bookmark or folder is moved to a different parent folder or to a new offset within its folder.
-
{{WebExtAPIRef("bookmarks.onChildrenReordered")}}
-
Fired when the user has sorted the children of a folder in the browser's UI. This is not called as a result of a {{WebExtAPIRef("bookmarks.move", "move()")}}.
-
{{WebExtAPIRef("bookmarks.onImportBegan")}}
-
Fired when a bookmark import session is begun. Expensive observers should ignore {{WebExtAPIRef("bookmarks.onCreated")}} updates until {{WebExtAPIRef("bookmarks.onImportEnded")}} is fired. Observers should still handle other notifications immediately.
-
{{WebExtAPIRef("bookmarks.onImportEnded")}}
-
Fired when a bookmark import session has finished.
-
- -

Browser compatibility

- -

{{Compat("webextensions.api.bookmarks")}}

- -

Edge incompatibilities

- -

Promises are not supported in Edge. Use callbacks instead.

- -

{{WebExtExamples("h2")}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.bookmarks API. This documentation is derived from bookmarks.json in the Chromium code.

- -

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

-
diff --git a/files/de/mozilla/add-ons/webextensions/api/commands/index.html b/files/de/mozilla/add-ons/webextensions/api/commands/index.html deleted file mode 100644 index 7449af34b7616c..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/api/commands/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: commands -slug: Mozilla/Add-ons/WebExtensions/API/commands -translation_of: Mozilla/Add-ons/WebExtensions/API/commands ---- -
{{AddonSidebar}}
- -

Verwenden Sie die Ausführungsbefehle der Benutzer, die Sie mit Hilfe des Schlüssels commands der manifest.json registriert haben.

- -

Typen

- -
-
{{WebExtAPIRef("commands.Command")}}
-
Objekt, das einen Befehl repräsentiert. Es enthält die für den Befehl im Schlüssel commands der manifest.json festgelegten Informationen.
-
- -

Funktionen

- -
-
{{WebExtAPIRef("commands.getAll")}}
-
-

Stellt alle registrierten Befehle für diese Erweiterung zur Verfügung.

-
-
{{WebExtAPIRef("commands.reset")}}
-
-

Angegebene Befehlsbeschreibung und das Tastaturkürzel auf die im Manifest-Schlüssel angegebenen Werte zurücksetzen.

-
-
{{WebExtAPIRef("commands.update")}}
-
-

Beschreibung oder Tastenkürzel des angegebenen Befehls ändern.

-
-
- -

Ereignisse

- -
-
{{WebExtAPIRef("commands.onCommand")}}
-
-
Wird ausgelöst, wenn ein Befehl mit Hilfe seines zugewiesenen Tastenkürzels ausgeführt wird.
-
-
- -

Browserkompatibilität

- -

{{Compat("webextensions.api.commands")}} {{WebExtExamples("h2")}}

- -
Danksagungen - -

Diese API basiert auf der API chrome.commands von Chromium.

- -

Die Kompatibilitätsdaten von Microsoft Edge werden von der Microsoft Corporation bereitgestellt und stehen hier unter der Lizenz Creative Commons Attribution 3.0 United States.

-
diff --git a/files/de/mozilla/add-ons/webextensions/api/index.html b/files/de/mozilla/add-ons/webextensions/api/index.html deleted file mode 100644 index c0497b77222ccd..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/api/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: JavaScript APIs -slug: Mozilla/Add-ons/WebExtensions/API -tags: - - NeedsTranslation - - TopicStub - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/API ---- -
{{AddonSidebar}}
- -
-

JavaScript APIs for WebExtensions can be used inside the extension's background scripts and in any other documents bundled with the extension, including browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts (see the list in the content script guide).

- -

To use the more powerful APIs you need to request permission in your extension's manifest.json.

- -

You can access the APIs using the browser namespace:

- -
function logTabs(tabs) {
-  console.log(tabs);
-}
-
-browser.tabs.query({currentWindow: true}, logTabs);
-
- -
-

Many of the APIs are asynchronous, returning a Promise:

- -
function logCookie(c) {
-  console.log(c);
-}
-
-function logError(e) {
-  console.error(e);
-}
-
-var setCookie = browser.cookies.set(
-  {url: "https://developer.mozilla.org/"}
-);
-setCookie.then(logCookie, logError);
-
- -
-

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

- -

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

- -

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

-
- -
{{SubpagesWithSummaries}}
diff --git a/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html deleted file mode 100644 index 457ace64e42878..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Browser support for JavaScript APIs -slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs -translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs ---- -
{{AddonSidebar}}
- -

{{WebExtAllCompatTables}}

- -
Acknowledgements - -

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

-
diff --git a/files/de/mozilla/add-ons/webextensions/examples/index.html b/files/de/mozilla/add-ons/webextensions/examples/index.html deleted file mode 100644 index 42a9fdb2d1cf81..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/examples/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Beispiele für Erweiterungen -slug: Mozilla/Add-ons/WebExtensions/Examples -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Examples -original_slug: Mozilla/Add-ons/WebExtensions/Beispiele ---- -
{{AddonSidebar}}
- -

Um zu veranschaulichen, wie Erweiterungen entwickelt werden, gibt es von uns ein Repository mit einfachen Beispielerweiterungen unter https://github.com/mdn/webextensions-examples. Dieser Artikel beschreibt die WebExtension-APIs, die in diesem Repository verwendet werden.

- -

Diese Beispiele funktionieren in Firefox Nightly: Die meisten funktionieren in früheren Versionen von Firefox, aber überprüfen Sie zur Sicherheit den Schlüssel strict_min_version in der Datei manifest.json der Erweiterung.
-
- Wenn Sie diese Beispiele ausprobieren möchten, haben Sie drei Möglichkeiten:
-
- 1. Klonen Sie das Repository, und laden Sie die Erweiterung direkt aus dem Quellverzeichnis mit der Funktion "Load Temporary Add-on". Die Erweiterung bleibt solange geladen, bis Sie Firefox neu starten.
- 2. Klonen Sie das Repository und verwenden Sie dann das web-ext Befehlszeilentool, um Firefox mit der installierten Erweiterung auszuführen.
- 3. Klonen Sie das Repository und gehen Sie dann zum Build-Verzeichnis. Dieses enthält "Build"- und "Signed"-Versionen aller Beispiele; Sie können sie also einfach in Firefox öffnen (mit Datei / Datei öffnen) und sie dauerhaft installieren, genau wie eine Erweiterung, die Sie von addons.mozilla.org installieren würden.
-
- Wenn Sie einen Beitrag zum Repository leisten möchten, senden Sie uns ein Pull-Request!

- -

{{WebExtAllExamples}}

diff --git a/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html deleted file mode 100644 index 64b420ba825f91..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Extending the developer tools -slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools -tags: - - Deutsch Guide - - DevTools - - Extentions - - german -translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools ---- -
-

Das heißt Folgendes wird nicht unterstützt , sie können Änderungen an der Seite sehen, die von Seitenskripten vorgenommen wurden.Diese Seite beschreibt devtools-APIs, wie sie in Firefox 55 vorhanden sind. Obwohl die APIs auf den Chrome devtools APIs basieren, gibt es noch viele Funktionen, die in Firefox noch nicht implementiert sind und daher hier nicht dokumentiert sind. Informationen zu den derzeit fehlenden Funktionen finden Sie unter Einschränkungen der devtools-APIs.

-
- -
    -
  • Sie können WebExtensions-APIs verwenden, um die integrierten Entwicklertools des Browsers zu erweitern. Um eine devtools-Erweiterung zu erstellen, geben Sie den Schlüssel "devtools_Seite" in manifest.json ein:
    • -
  • - 
    "devtools_seite": "devtools/devtools-seite.html"
    -
    • -
  • Der Wert dieses Schlüssels ist eine URL, die auf eine HTML-Datei verweist, die mit Ihrer Erweiterung gebündelt wurde . Die URL sollte relativ zur manifest.json-Datei selbst sein.
    • -
  • Die HTML-Datei definiert eine spezielle Seite in der Verlängerung, Seite der devtools ResourceHinzufügen -

    Devtools Seite

    -
    • -
  • Die davetool Seite wird beim Öffnen der Browser Devtools geladen und beim Schließen entladen. Beachten Sie, dass, weil die devtools Fenster mit einem einzigen Register zugeordnet ist, es für mehr als ein devtools Fenster durchaus möglich ist - also mehr als eine devtools Seite - zur gleichen Zeit existieren.
    • -
- -

Die devtools-Seite hat kein sichtbares DOM, kann aber JavaScript-Quellen mit <script> -Tags enthalten. Die Quellen müssen mit der Erweiterung selbst gebündelt werden. Die normalen DOM-APIs, auf die über das globale Fensterobjekt zugegriffen werden kann Die gleichen WebExtension-APIs wie in Inhaltsskripten Die devtools-APIs: Devtools inspiziertes Fenster devtools.network devtools.panels Beachten Sie, dass die devtools-Seite keinen Zugriff auf andere Web Extensions-APIs erhält und die Hintergrundseite keinen Zugriff auf die devtools-APIs erhält. Stattdessen müssen die davetool-Seite und die Hintergrundseite definiert werden. Verwenden der Laufzeit-Messeging-APIs. Hier ist ein Beispiel:

- -
-
    -
  • - 
    <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">   </head>   <body>     <script sec="devtools.js"></script>   </body> </html>The devtools.js file will hold the actual code creating your dev tools extensions.
    -
    • -
  • -

    Erstellen von panel

    -
    • -
  • Das devtools-Fenster enthält eine Reihe separater Tools - den JavaScript-Debugger, den Netzwerkmonitor usw. Über eine Reihe von Registerkarten am oberen Rand kann der Benutzer zwischen den verschiedenen Werkzeugen wechseln. Das Fenster, in dem sich die Benutzeroberfläche jedes Tools befindet, wird als "Panel" bezeichnet.
    • -
  • Gebrauche der devtools.panels.create() API,, um Ihren eigenen Panel Herzustellen in devtools Fenster(Window)
    • -
  • - 
    browser.devtools.panels.create(
-  "My Panel",                      // title
-  "icons/star.png",                // icon
-  "devtools/panel/panel.html"      // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(initialisePanel);
-  newPanel.onHidden.addListener(unInitialisePanel);
-});
    -
    • -
  • -

    Hierfür sind drei Argumente erforderlich: Titel, Symbol und Inhalt des Panels. Es wird ein Versprechen zurück gegeben, das devtool panel ExtensionPanel-Objekt aufgelöst wird, das in neue Panel darstellt.

    -
    • -
  • devtools.panels.ExtensionPanel dieser obieckt reprsentiert das neue Panel
    • -
  • -

    Interaktion mit dem Zielfenster

    -
    • -
  • Die Entwicklertools sind immer an eine bestimmte Browserregisterkarte angehängt. Dies wird als "Ziel" für die Entwicklertools oder als "inspiziertes Fenster" bezeichnet, damit können Sie inspizierten Fenster mit der Sie interagieren
    • -
  • devtools.inspectedWindow API.
    • -
-
- -

Code im Zielfenster ausführen

- -

Derdevtools.inspectedWindow.eval() bereitgestellt in einfacher weisen um den Code auszuführen in den lnspector Fensten

- -
-

Arbeiten mit Inhaltsskripten Dies entspricht in etwa der Verwendung von {{WebExtAPIRef ("tabs.executeScript ()")}} zum Einfügen eines Inhaltsskripts, mit einem wichtigen Unterschied nommen wurden.Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird. Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.

-
- -

Mit devtools.inspectedWindow.eval () geladene Skripte sehen auch keine von c definierten JavaJavaScript-Variablen

- -

Arbeiten mit Inhaltsskripten

- -

devtools document hat keinen direkten Zugrif Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird. Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.<

- -

Bei einem Skript muss das devtools5-Dokument eine Nachricht senden, in der es aufgefordert wird, das Skript einzufügen. Die devtools.inspectedWindow.table gibt die ID der Zielregisterkarte an:

- -

Wenn Sie Nachrichten zwischen den im Zielfenster ausgeführten Inhaltsskripten und einem devtools-Dokument austauschen müssen, sollten Sie {{WebExtAPIRef ("runtime.connect ()")}} und {{WebExtAPIRef ("runtime.onConnect")}} verwenden, um eine Verbindung zwischen der Hintergrundseite und dem devtools-Dokument herzustellen. Die Hintergrundseite kann dann eine Zuordnung zwischen Registerkarten-IDs und {{WebExtAPIRef ("runtime.Port")}} -Objekten verwalten und diese verwenden, um Nachrichten zwischen den beiden Bereichen weiterzuleiten.

- -

Diese APIs basieren auf den Chrome devtools-APIs, aber im Vergleich zu Chrome fehlen noch viele Funktionen. In diesem Abschnitt werden die Funktionen aufgeführt, die ab Firefox 54 noch nicht implementiert sind. Beachten Sie, dass sich die devtools-APIs in der aktiven Entwicklung befinden und wir erwarten, dass die meisten davon in zukünftigen Versionen unterstützt werden.

- -
    -
  • - 
    // devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-window.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
    -
    • -
  • - 
    // background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
    -
    • -
    • -
  • -

    Einschränkungen der devtools APIs

    -
    • -
  • -

    devtools inspizierte Window

    -
    • -
  • Folgendes wird nicht unterstüzt
    • -
  • inspectedWindow.getResources()
    • -
  • inspectedWindow.onResourceAdded
    • -
  • inspectedWindow.onResourceContentCommitted
    • -
  • None of the options to inspectedWindow.eval() are supported.
    • -
  • Scripts injected using inspectedWindow.eval() can't use all the Console's command-line helper functions, but $0 and inspect(...) are both supported (starting from Firefox 55).
    • -
  • -

    devtools.panele

    -
    • -
  • The following are not supported:
    • -
  • panels.elements
    • -
  • panels.sources
    • -
  • panels.setOpenResourceHandler()
    • -
  • panels.openResource()
    • -
  • panels.ExtensionPanel.createStatusBarButton()
    • -
  • panels.Button
    • -
  • panels.ElementsPanel
    • -
  • panels.SourcesPanel
    • -
  • -

    Beispielsweise

    -
    • -
  • Das webextensions-examples bericht an GitHub, enthält einige Beispiele für Erweiterungen, die devtools-Panels verwenden:
    • -
  • -

    devtools-panels benutzen Sie dentools Panels

    -
    • -
diff --git a/files/de/mozilla/add-ons/webextensions/index.html b/files/de/mozilla/add-ons/webextensions/index.html deleted file mode 100644 index bb1b68b2deee3f..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: WebExtensions -slug: Mozilla/Add-ons/WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions ---- -
{{AddonSidebar}}
- -

WebExtensions sind ein Cross-Browser-System zur Entwicklung von Browser-Add-ons. Das System ist in weiten Teilen kompatibel mit der extension API, welche von Google Chrome und Opera unterstützt wird. Erweiterungen, welche für diese Browser geschrieben wurden, werden in den meisten Fällen mit nur wenigen Anpassungen auch in Firefox oder Microsoft Edge lauffähig sein. Die API ist außerdem vollständig kompatibel mit Multiprozess-Firefox.

- -

Wir beabsichtigen auch, die APIs zu erweitern, um die Unterstützung für Add-on-Entwickler zu verbessern. Sollten Sie Vorschläge dazu haben, würden wir uns über Ihre Mitteilung freuen. Sie erreichen uns über die englischsprachige Mailingliste für Add-on-Entwickler oder auf #webextensions im IRC.

- -
-
-

Erste Schritte

- - - -

Kurzanleitungen

- - - -

Konzepte

- - - -

Portieren

- - - -

Firefox workflow

- - -
- -
-

Referenz

- - - -

JavaScript APIs

- -
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
- -

Manifest keys

- -
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
-
-
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html deleted file mode 100644 index ba58b7a84da56d..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: commands -slug: Mozilla/Add-ons/WebExtensions/manifest.json/commands -tags: - - Add-ons Erweiterungen WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/commands ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TypObjekt
ObligatorischNein
Beispiel - 
-"commands": {
-  "toggle-feature": {
-    "suggested_key": {
-      "default": "Ctrl+Shift+Y",
-      "linux": "Ctrl+Shift+U"
-    },
-    "description": "Ereignis 'toggle-feature' senden"
-  }
-}
-
- -

Verwenden Sie dencommands-Schlüssel, um für Ihre Erweiterung eine oder mehrere Tastenkürzel zu definieren.

- -

Jedes Tastenkürzel wird mit einem Namen, eine Kombination von Tasten und einer Beschreibung definiert. Sobald Sie einige Befehle in der manifest.json definiert haben, können Sie die zugewiesenen Tastenkombinationen mittels der JavaScript-API {{WebExtAPIRef("commands")}} verwenden.

- -

Syntax

- -

Der commands-Schlüsselist ein Objekt, und jedes Tastenkürzel ist eine Eigenschaft von ihm. Der Name der Eigenschaft ist der Name des Tastenkürzels.

- -

Jedes Tastenkürzel ist selbst ein Objekt, das bis zu zwei Eigenschaften hat:

- -
    -
  • suggested_key: diese definiert die Tastenkombination
    • -
  • description: eine Zeichenkette, die dieses Tastenkürzel beschreibt
    • -
- -

Die Eigenschaft suggested_key ist selbst ein Objekt, das folgende Eigenschaften haben kann, die alle Zeichenketten sind:

- -
    -
  • "default", "mac", "linux", "windows", "chromeos", "android", "ios"
    • -
- -

Der Wert jeder Eigenschaft ist das Tastenkürzel für den Befehl auf der angegebenen Plattform, der als Zeichenkette angegeben wird, die die durch ein „+“ voneinander getrennten Tasten enthält. Der Wert für „default“ wird auf allen Plattformen verwendet, die nicht ausdrücklich angegeben sind.

- -

Beispiel:

- -
"commands": {
-  "toggle-feature": {
-    "suggested_key": {
-      "default": "Alt+Shift+U",
-      "linux": "Ctrl+Shift+U"
-    },
-    "description": "'toggle-feature'-Ereignis an die Erweiterung senden"
-  },
-  "do-another-thing": {
-    "suggested_key": {
-      "default": "Ctrl+Shift+Y"
-    }
-  }
-}
- -

Dies definiert zwei Tastenkürzel:

- -
    -
  • eine mit dem Namen "toggle-feature", auf die mit Hilfe von Ctrl+Shift+U auf Linux und Alt+Shift+U auf allen anderen Plattformen zugegriffen wird
    • -
  • eine mit dem Namen "do-another-thing", auf die mit Hilfe von Ctrl+Shift+Y auf allen Plattformen zugegriffen wird.
    • -
- -

Sie könnten dann den ersten dieser Befehle mit einem Code wie diesen verwenden:

- -
browser.commands.onCommand.addListener(function(command) {
-  if (command == "toggle-feature") {
-    console.log("toggling the feature!");
-  }
-});
- -

Besondere Tastenkürzel

- -

Es gibt drei besondere Tastenkürzel:

- -
    -
  • _execute_browser_action: funktioniert wie ein Klick auf die Browseraktion der Erweiterung.
    • -
  • _execute_page_action: funktioniert wie ein Klick auf die Seitenaktion der Erweiterung.
    • -
  • _execute_sidebar_action: öffnet die Seitenleiste der Erweiterung. Wird nur in Firefox unterstützt und erst ab Firefox Version 54.
    • -
- -

Dies definiert zum Beispiel eine Tastenkombination, um auf die Browseraktion der Erweiterung zu klicken:

- -
"commands": {
-  "_execute_browser_action": {
-    "suggested_key": {
-      "default": "Ctrl+Shift+Y"
-    }
-  }
-}
- -

Tastenkürzel-Werte

- -

Es gibt zwei gültige Formate für Tastenkürzel: als Tastenkombination oder als Medien-Taste.

- -

Tastenkombinationen

- -
-
Auf Macs wird "Ctrl" als "Command"-Taste interpretiert, geben Sie also "MacCrtl" an, wenn Sie eigentlich "Ctrl" brauchen.
-
- -

Tastenkombinationen müssen aus zwei oder mehr Tasten bestehen:

- -
    -
  • Modifikator (obligatorisch, mit Ausnahme der Funktionstasten). Dieser kann sein: "Ctrl", "Alt", "Command", "MacCtrl".
    • -
  • zweiter Modifikator (optional). Wenn angegeben, muss dieser entweder "Shift" oder (für Firefox ≥ 63) "Ctrl", "Alt", "Command" und "MacCtrl" sein, wenn sie nicht als Hauptmodifikator verwendet werden.
    • -
  • Taste (obligatorisch). Die kann sein: -
      -
    • die Buchstaben A-Z
      • -
    • die Zahlen 0-9
      • -
    • die Funktionstasten F1-F12
      • -
    • Comma (Komma), Period (Punkt), Home (Pos1), End (Ende), PageUp (Bild hoch) , PageDown (Bild runter), Space (Leertaste), Insert (Einfg), Delete (Entf), Up (Pfeil hoch), Down (Pfeil runter), Left (Pfeil links), Right (Pfeil rechts)
      • -
    -
    • -
- -

Die Taste wird dann als Zeichenkette angegeben, die den Satz an Tastenwerten enthält, in der oben angegebenen Reihenfolge, getrennt durch "+": zum Beispiel "Ctrl+Shift+Z".

- -

Wenn eine Tastenkombination bereits vom Browser (zum Beispiel "Ctrl+P") oder durch ein bestehendes Add-on verwendet wird, können Sie sie nicht überschreiben. Sie dürfen sie definieren, aber Ihr Eventhandler wird nicht aufgerufen, wenn der Benutzer sie eingibt.

- -

Medientasten

- -

Alternativ kann das Tastenkürzel als eine der folgenden Medientasten angegeben werden:

- -
    -
  • "MediaNextTrack", "MediaPlayPause", "MediaPrevTrack", "MediaStop"
    • -
- -

Beispiel

- -

Definieren Sie ein einzelnes Tastenkürzel, das nur standardmäßig verwendet wird:

- -
"commands": {
-  "toggle-feature": {
-    "suggested_key": {
-      "default": "Ctrl+Shift+Y"
-    },
-    "description": "Ereignis'toggle-feature' senden"
-  }
-}
- -

Definieren Sie zwei Tastenkürzel, eins mit einer plattformspezifischen Tastenkombination:

- -
"commands": {
-  "toggle-feature": {
-    "suggested_key": {
-      "default": "Alt+Shift+U",
-      "linux": "Ctrl+Shift+U"
-    },
-    "description": "Ereignis 'toggle-feature' senden"
-  },
-  "do-another-thing": {
-    "suggested_key": {
-      "default": "Ctrl+Shift+Y"
-    }
-  }
-}
- -

Browserkompatibilität

- -

{{Compat("webextensions.manifest.commands")}}

diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html deleted file mode 100644 index 8ab2595de263fa..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/manifest.json/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: manifest.json -slug: Mozilla/Add-ons/WebExtensions/manifest.json -tags: - - Add-ons - - Extensions - - NeedsTranslation - - TopicStub - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json ---- -
{{AddonSidebar}}
- -

Die Datei manifest.json ist eine JSON-formatierte Datei, und die einzige Datei, die eine Erweiterung, die das WebExtensions API verwendet, unterstützt.

- -

Durch das Verwenden von manifest.json, legst du Metadaten, wie zum Beispiel Name und Version, für deine Erweiterung fest, und kannst auch einige Aspekte der Funktionalität deiner Erweiterung,wie zum Beispiel Hintergrundskripte, Inhaltsskripte und Browserationen.

- -

Manifest.json keys sind unten gelistet:

- -
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
- -
- -

"manifest_version", "version", und "name" sind die einzigen verpflichtenden Keys. "default_locale" muss vorhanden sein, wenn der "_locales"-Ordner vorhanden ist und darf sonst nicht vorhanden sein. "applications" wird von Google Chrome nicht unterstützt, und ist verpflichtend in Firefox vor Firefox 48 und Firefox für Android.

- -

Browserkompatiblität

- -

{{Compat("webextensions.manifest")}}

- -

Beispiel

- -

Hier ein kurzes Syntax-Beispiel für manifest.json:

- -
{
-  "applications": {
-    "gecko": {
-      "id": "addon@example.com",
-      "strict_min_version": "42.0"
-    }
-  },
-
-  "background": {
-    "scripts": ["jquery.js", "my-background.js"],
-    "page": "my-background.html"
-  },
-
-  "browser_action": {
-    "default_icon": {
-      "19": "button/geo-19.png",
-      "38": "button/geo-38.png"
-    },
-    "default_title": "Whereami?",
-    "default_popup": "popup/geo.html"
-  },
-
-  "commands": {
-    "toggle-feature": {
-      "suggested_key": {
-        "default": "Ctrl+Shift+Y",
-        "linux": "Ctrl+Shift+U"
-      },
-      "description": "Send a 'toggle-feature' event"
-    }
-  },
-
-  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
-
-  "content_scripts": [
-    {
-      "exclude_matches": ["*://developer.mozilla.org/*"],
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ],
-
-  "default_locale": "en",
-
-  "description": "...",
-
-  "icons": {
-    "48": "icon.png",
-    "96": "icon@2x.png"
-  },
-
-  "manifest_version": 2,
-
-  "name": "...",
-
-  "page_action": {
-    "default_icon": {
-      "19": "button/geo-19.png",
-      "38": "button/geo-38.png"
-    },
-    "default_title": "Whereami?",
-    "default_popup": "popup/geo.html"
-  },
-
-  "permissions": ["webNavigation"],
-
-  "version": "0.1",
-
-  "web_accessible_resources": ["images/my-image.png"]
-}
- -

diff --git a/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html deleted file mode 100644 index 85498e8b309f1f..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Was sind WebExtensions? -slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

WebExtensions erweitern und modifizieren die Funktionen eines Web-Browsers. Sie werden unter Verwendung von Standard-Webtechnologien - JavaScript, HTML und CSS - sowie zusätzlichen speziell dafür vorgesehenen JavaScript APIs erstellt. Unter anderem können mit so einer Erweiterung neue Funktionen zum Browser hinzufügt, das Erscheinungsbild oder der Inhalt bestimmter Webseiten verändert werden.

- -

Erweiterungen für Firefox werden mit Hilfe von WebExtensions APIs erstellt, einem Cross-Browser-System zum Entwickeln von Browsererweiterungen. Zum größten Teil ist die API kompatibel mit der extension API für Google Chrome und Opera. Erweiterungen, die für diese Browser erstellt wurden, laufen in den meisten Fällen mit wenigen Änderungen in Firefox oder Microsoft Edge. Die API ist ebenfalls vollständig mit Multiprozess-Firefox kompatibel.

- -

Vor WebExtensions gab es drei unterschiedliche Möglichkeiten, Erweiterungen für Firefox zu erstellen: XUL/XPCOM overlays, bootstrapped extensions und das Add-on SDK. Seit Ende November 2017 sind WebExtensions APIs die einzige Möglichkeit, Firefox-Erweiterungen zu entwickeln, die vorherigen Systeme gelten als veraltet.

- -

Wir sind stets bemüht, die API ständig zu erweitern, um den Anforderungen der Add-on-Entwickler gerecht zu werden. Sollten Sie Anregungen dazu haben, würden wir uns über Ihre Mitteilung auf der englischsprachigen Mailingliste für Add-on-Entwickler oder auf #webextensions im IRC freuen.

- -

Nächste Schritte?

- - diff --git a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html deleted file mode 100644 index 4f98caf747ad2a..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html +++ /dev/null @@ -1,609 +0,0 @@ ---- -title: Arbeiten mit Taps API -slug: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API -tags: - - tabs -translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API -original_slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API ---- -

{{AddonSidebar}}

- -

Tabs lassen einen Benutzer mehrere Webseiten in seinem Browserfenster öffnen und wechseln dann zwischen diesen Webseiten. Mit der Tabs API können Sie mit diesen Tabs arbeiten und diese manipulieren, um Programme zu erstellen, die Nutzern neue Möglichkeiten bieten, mit Tabs zu arbeiten oder die Funktionen Ihrer Erweiterung zu liefern.

- -

In diesem "how-to"-Artikel schauen wir uns an:

- -
    -
  • Berechtigungen, die für die Verwendung der Tabs API benötigt werden.
    • -
  • Mehr über Tabs und ihre Eigenschaften erfahren Sie mit {{WebExtAPIRef("tabs.query")}}.
    • -
  • Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen.
    • -
  • Manipulationen des Zoomniveaus eines Tab.
    • -
  • Manipulationen eines Tabs CSS.
    • -
- -

Wir schließen dann mit Blick auf einige andere, andere Funktionen, die von der API angeboten werden.

- -
-

Hinweis: Es gibt einige Tab-API-Funktionen, die an anderer Stelle abgedeckt sind. Dies sind die Methoden, die Sie verwenden können, um den Inhalt der Registerkarten mit Skripten zu manipulieren ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}} und {{WebExtAPIRef("tabs.executeScript")}}). Wenn Sie mehr Informationen über diese Methoden wünschen, lesen Sie die Artikelinhaltskripte Concepts und die Anleitung ändern Sieeine Webseite.

-
- -

Berechtigungen und die Tabs API

- -

Für die meisten Tabs API-Funktionen benötigen Sie keine Berechtigungen; Es gibt jedoch einige Ausnahmen:

- -
    -
  • Für den Zugriff auf die Eigenschaften Tab.url, Tab.title und Tab.favIconUrl des Tab-Objekts ist die Erlaubnis "Tabs" erforderlich. In Firefox benötigen Sie auch "Tabs", um eine Abfrage per URL durchzuführen.
    • -
  • Die Host-Berechtigung ist für die {{WebExtAPIRef("tabs.executeScript")}} oder {{WebExtAPIRef("tabs.insertCSS")}}. erforderlich.
    • -
- -

Im Folgenden können Sie in der manifest.json-Datei Ihrer Erweiterung die Erlaubnis "Tabs " beantragen :

- -
"permissions": [
-  "<all_urls>",
-  "tabs"
-],
- -

Diese Anfrage gibt Ihnen die Nutzung aller Tabs API-Funktion auf allen Websites, die Ihr Nutzer besucht. Es gibt auch einen alternativen Ansatz für die Anforderung von Berechtigungen zur Verwendung von {{WebExtAPIRef("tabs.executeScript")}} or {{WebExtAPIRef("tabs.insertCSS")}}, bei dem Sie keine Host-Erlaubnis benötigen, in Form von "activeTab". Diese Erlaubnis bietet die gleichen Rechte wie "Tabs" mit< all _ urls >,aber mit zwei Einschränkungen:

- -
    -
  • Der Benutzer muss mit der Erweiterung über seine Browser-oder Seiten-Aktion, Kontextmenü oder Tastenkombination interagieren.
    • -
  • Es erteilt nur die Erlaubnis innerhalb der aktiven Registerkarte.
    • -
- -

Der Vorteil dieses Ansatzes ist, dass der Benutzer keine Berechtigung erhält, die besagt, dass Ihre Erweiterung "Zugriff auf Ihre Daten für alle Websites" kann. Das liegt daran , dass < all _ urls > Erlaubnis einer Erweiterung die Möglichkeit gibt, Skripte in jedem Tab auszuführen, zu jeder Zeit, die sie mag, während "activeTab" darauf beschränkt ist, der Erweiterung zu erlauben, eine vom Benutzer angeforderte Aktion in der Aktuelle Registerkarte.

- -

Mehr über Tabs und ihre Eigenschaften entdecken

- -

Es wird Gelegenheiten geben, in denen Sie eine Liste aller Tabs in allen Browser-Fenstern erhalten wollen. Zu anderen Zeiten möchten Sie vielleicht eine Untergruppe von Tabs finden, die bestimmten Kriterien entsprechen, wie zum Beispiel solchen, die von einem bestimmten Tab geöffnet werden oder Seiten aus einer bestimmten Domain anzeigen. Und wenn Sie Ihre Liste der Tabs haben, werden Sie wahrscheinlich mehr über ihre Eigenschaften wissen wollen.

- -

Hier kommt die {{WebExtAPIRef("tabs.query")}} in den Fall. Wird allein verwendet, um alle Tabs zu erhalten oder das queryInfo-Objekt zu nehmen —, um Abfragekriterien anzugeben, wie zum Beispiel, ob die Registerkarte im aktuellen Fenster aktiv ist, oder eines oder mehrere von 17 Kriterien — {{WebExtAPIRef("tabs.query")}} gibt ein Array von {{WebExtAPIRef("tabs.Tab")}} Objekte, die Informationen über die Registerkarten enthalten.

- -

Wenn Sie nur Informationen über den aktuellen Reiter wünschen, können Sie eine {{WebExtAPIRef("tabs.Tab")}} erhalten. Objekt für diese Registerkarte mit {{WebExtAPIRef("tabs.getCurrent")}}. Wenn Sie eine Tab-ID haben, können Sie die {{WebExtAPIRef("tabs.Tab")}} Objekt mit {{WebExtAPIRef("tabs.get")}}.

- -
-

notiz:

- -
    -
  • In Chrome kann der Benutzer mehrere Tabs in einem Fenster auswählen, und die Tabs API sieht diese als hervorgehobene Tabs.
    • -
  • In Firefox kann der Benutzer mehrere Tabs nicht auswählen, daher sind "hervorgehoben" und "aktiv" synonym.
    • -
-
- -

Wie man mit dem Beispiel geht

- -

Um zu sehen, wie {{WebExtAPIRef("tabs.query")}} und {{WebExtAPIRef("tabs.Tab")}} werden verwendet, lassen Sie uns durch, wie das Tabs-Tabs-Tabs Beispiel fügt die Liste von" Schalter auf Tabs "zu seiner Toolbar-Taste Popup.

- -

- -

manifest.json

- -

Hier ist das manifest.json:

- -
{
-  "browser_action": {
-    "browser_style": true,
-    "default_title": "Tabs, tabs, tabs",
-    "default_popup": "tabs.html"
-  },
-  "description": "A list of methods you can perform on a tab.",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
-  "manifest_version": 2,
-  "name": "Tabs, tabs, tabs",
-  "permissions": [
-    "tabs"
-  ],
-  "version": "1.0"
-}
- -
-

Hinweis:

- -
    -
  • Tabs.html wird als Standard _ Popup in browser _ actiondefiniert.Es wird angezeigt, wenn der Benutzer auf das Symbollei-Symbol der Erweiterung klickt.
    • -
  • Die Berechtigungen beinhalten Registerkarten. Dies ist notwendig, um die Tabelliste zu unterstützen, da die Erweiterung den Titel der Registerkarten für die Anzeige im Popup liest.
    • -
-
- -

Tabs.html

- -

Tabs.html definiert den Inhalt des Popups der Erweiterung:

- -
<!DOCTYPE html>
-
-<html>
-
- <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="tabs.css"/>
- </head>
-
-<body>
-
- <div class="panel">
-    <div class="panel-section panel-section-header">
-     <div class="text-section-header">Tabs-tabs-tabs</div>
-    </div>
-
-    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-
-
-…
-
-Define the other menu items
-…
-
-    <div class="switch-tabs">
-
-     <p>Switch to tab</p>
-
-     <div id="tabs-list"></div>
-
-    </div>
- </div>
-
- <script src="tabs.js"></script>
-
-</body>
-
-</html>
- -

Hier ist eine Zusammenfassung der oben genannten tut:

- -
    -
  1. Die Menüpunkte werden deklariert.
    2. -
  2. Ein leerer Div mit der ID-Tabs-Liste wird deklariert, um die Liste der Tabs zu enthalten.
    3. -
  3. Tabs.js heißt.
    4. -
- -

Tabs.js

- -

In tabs.jswerdenwir sehen, wie die Liste der Tabs aufgebaut und zum Popup hinzugefügt wird.

- -

Das Popup schaffen

- -

Zunächst wird ein Event-Handler hinzugefügt, um ListTabs () auszuführen , wenn tabs.html geladen wird:

- -
document.addEventListener ("DOMContentLoaded", hört Tabs);
- -

Das erste, was listTabs () tut, ist getCurrentWindowTabs ()zu nennen. Hier wird ein {{WebExtAPIRef("tabs.query")}} verwendet, um eine {{WebExtAPIRef("tabs.Tab")}} zu erhalten. Objekt für die Tabs im aktuellen Fenster:

- -
function getCurrentWindowTabs() {
-  return browser.tabs.query({currentWindow: true});
-}
- -

Jetzt ist listTabs() bereit , den Inhalt für das Popup zu erstellen.

- -

Zunächst:

- -
    -
  1. Schnappen Sie sich die tabs-list div.
    2. -
  2. Erstellen Sie ein Dokumentenfragment (in das die Liste eingebaut wird).
    3. -
  3. Setzen Sie Zähler.
    4. -
  4. Klären Sie den Inhalt der Tabs-Liste div.
    5. -
- -
function listTabs() {
- getCurrentWindowTabs().then((tabs) => {
-    let tabsList = document.getElementById('tabs-list');
-    let currentTabs = document.createDocumentFragment();
-    let limit = 5;
-    let counter = 0;
-
-    tabsList.textContent = '';
- -

Als nächstes werden wir die Links für jeden Tab erstellen:

- -
    -
  1. Schleifen Sie sich durch die ersten 5 Elemente aus der {{WebExtAPIRef("tabs.Tab")}} Objekt.
    2. -
  2. Fügen Sie für jeden Artikel einen Hyperlink zum Dokumentenfragment hinzu. -
      -
    • Das Etikett des Links — das heißt, sein Text — wird mit dem Titel des Tab gesetzt (oder mit der ID, wenn er keinen Titel hat).
      • -
    • Die Adresse des Links wird mit der Personalausweis des Tabs gesetzt.
      • -
    -
    3. -
- -
 for (let tab of tabs) {
-     if (!tab.active && counter <= limit) {
-        let tabLink = document.createElement('a');
-
-        tabLink.textContent = tab.title || tab.id;
-
-       tabLink.setAttribute('href', tab.id);
-        tabLink.classList.add('switch-tabs');
-        currentTabs.appendChild(tabLink);
-     }
-
-     counter += 1;
-
-    }
- -

Schließlich wird das Dokumentenfragment auf die Tabs-Liste div geschrieben:

- -
  tabsList.appendChild(currentTabs);
-  });
-}
- -

Arbeiten mit dem aktiven Reiter

- -

Ein weiteres verwandtes Beispielmerkmal ist die Info-Option "Alert active tab", die alle Registerkarten [{WebExtAPIRef ("-Register) ablegt. Tab ")} Objekteigenschaften für die aktive Registerkarte in einen Alarm:

- -
 else if (e.target.id === "tabs-alertinfo") {
-   callOnActiveTab((tab) => {
-     let props = "";
-     for (let item in tab) {
-       props += `${ item } = ${ tab[item] } \n`;
-     }
-     alert(props);
-   });
- }
- -

Wobei callOnActiveTab() das aktive Tab-Objekt findet, indem man sich durch die Registerkarten {{WebExtAPIRef("tabs.Tab")}} schlodert. Tab ")} Objekte, die nach dem Gegenstand mit aktivem Satz suchen:

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
-}
- -

Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen

- -

Nachdem Sie Informationen über die Registerkarten gesammelt haben, werden Sie höchstwahrscheinlich etwas mit ihnen machen wollen — entweder den Benutzern Funktionen für die Manipulation und Verwaltung von Registern bieten oder Funktionen in Ihrer Erweiterung implementieren.

- -

Folgende Funktionen stehen zur Verfügung:

- -
    -
  • Erstellen Sie eine neue Registerkarte ({{WebExtAPIRef("tabs.create")}}).
    • -
  • Duplizieren sie eine neue Registerkarte ({{WebExtAPIRef("tabs.duplicate")}}).
    • -
  • Entfernen Sie eine Registerkarte ({{WebExtAPIRef("tabs.remove")}}).
    • -
  • Verschieben Sie eine Registerkarte ({{WebExtAPIRef("tabs.move")}}).
    • -
  • Aktualisieren Sie die URL der Registerkarte, um — effektiv auf eine neue Seite — ({{WebExtAPIRef("tabs.update")}}).
    • -
  • Die Seite der Registerkarte neu Laden ({{WebExtAPIRef("tabs.reload")}}).
    • -
- -
-

notiz:

- -

Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:

- -
    -
  • {{WebExtAPIRef ("tabs.duplicate")}}
    • -
  • {{WebExtAPIRef("tabs.remove")}})
    • -
  • {{WebExtAPIRef ("tabs.move")}}
    • -
- -

Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:

- -
    -
  • {{WebExtAPIRef("tabs.update")}}
    • -
  • {{WebExtAPIRef("tabs.reload")}}
    • -
-
- -

Wie man mit dem Beispiel geht

- -

Das Beispiel Tabs-Tabs übt all diese Funktionen aus, bis hin zur Aktualisierung der URL eines Tabs. Die Art und Weise, in der diese APIs verwendet werden, ist ähnlich, so dass wir uns eine der am meisten involvierten Implementierungen ansehen werden, die des "Move active tab to the beginning of the the. Option "Option der Fensterliste.

- -

Aber zunächst ist hier eine Demonstration des Features in Aktion:

- -

{{EmbedYouTube("-lJRzTIvhxo")}}

- -

manifest.json

- -

Keine der Funktionen benötigt eine Betriebsgenehmigung, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.

- -

Tabs.html

- -

Tabs.html definiert das "Menü", das im Popup angezeigt wird, das die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben" enthält, mit einer Reihe von <a> Tags, die von einem visuellen Separator gruppiert sind. Jeder Menüpunkt erhält eine ID, die in tabs.js verwendet wird, um festzustellen, welcher Menüpunkt angefordert wird.

- -
  <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
-
-    <div class="panel-section-separator"></div>
-
-
-    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
-
-    <a href="#" id="tabs-reload">Reload active tab</a><br>
-    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
- -

Tabs.js

- -

Um das in tabs.html definierte "Menü" zu implementieren, enthält tabs.js einen Hörer für Klicks in tabs.html:

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
-}
-}
- -

Eine Reihe von ifAnweisungen dann schauen, um die ID des Artikels geklickt.

- -

Dieser Code-Snippet ist für die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben":

- -
 if (e.target.id === "tabs-move-beginning") {
-   callOnActiveTab((tab, tabs) => {
-     var index = 0;
-     if (!tab.pinned) {
-       index = firstUnpinnedTab(tabs);
-     }
-     console.log(`moving ${tab.id} to ${index}`)
-     browser.tabs.move([tab.id], {index});
-   });
- }
- -

Es ist erwähnenswert, die Verwendung von console.log (). Auf diese Weise können Sie Informationen an die Debugger-Konsole ausgeben , was bei der Lösung von Problemen, die während der Entwicklung gefunden wurden, nützlich sein kann.

- -

- -

Der Bewegungscode ruft zunächst callOnActiveTab () an , der wiederum getCurrentWindowTabs () anruft, um eine {{WebExtAPIRef("tabs.Tab")}} Objekt, das die Registerkarten des aktiven Fensters enthält. Es schleift sich dann durch das Objekt, um das aktive Tab-Objekt zu finden und zurückzugeben:

- -
function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
- -

Gepinnte Tabs

- -

Eine Besonderheit von Registern ist, dass der Benutzer Tabs in ein Fenster einfügen kann. Gepinnte Tabs werden am Anfang der Tab-Liste platziert und können nicht verschoben werden. Das bedeutet, dass die früheste Position, in die sich ein Tab bewegen kann, die erste Position nach einem gefiederten Tabs ist. Also , firstUnpinnedTab () wird aufgerufen, um die Position des ersten ungepasten Tab zu finden, indem man durch das Tabs-Objekt Looping:

- -
function firstUnpinnedTab(tabs) {
- for (var tab of tabs) {
-   if (!tab.pinned) {
-     return tab.index;
-   }
- }
-}
- -

Wir haben jetzt alles, was zum Verschieben des Tab notwendig ist: Das aktive Tab-Objekt, von dem wir die Reiter-ID erhalten können und die Position, in die der Reiter verschoben werden soll. So können wir den Schritt umsetzen:

- -
browser.tabs.move ([tab.id], {index});
- -

Die restlichen Funktionen zum Duplizieren, Laden, Erstellen und Entfernen von Tabs werden ähnlich implementiert.

- -

Manipulationen eines Tab

- -

Die nächste Reihe von Funktionen ermöglicht es Ihnen, die Zoomstufe in einem Tab zu erhalten ({{WebExtAPIRef("tabs.getZoom")}}) und zu setzen ({{WebExtAPIRef("tabs.setZoom")}}) . Sie können auch die Zoom-Einstellungen abrufen ({{WebExtAPIRef("tabs.getZoomSettings")}}) , aber zum Zeitpunkt des Schreibens war die Möglichkeit, die Einstellungen zu setzen ({{WebExtAPIRef("tabs.setZoomSettings")}}) , war in Firefox nicht verfügbar.

- -

Der Zoomwert kann zwischen 30% und 300% liegen (dargestellt als Dezimalzahl 0,3 bis 3).

- -

In Firefox sind die Standard-Zoom-Einstellungen:

- -
    -
  • Standard-Zoom-Level: 100%.
    • -
  • Zoommodus: Automatik (so verwaltet der Browser, wie Zoomstufen gesetzt werden).
    • -
  • Umfang der Zoomwechsel : "pro-origin",was bedeutet, dass, wenn Sie eine Website wieder besuchen, es die Zoomstufe, die in Ihrem letzten Besuch eingestellt wird, benötigt.
    • -
- -

Wie man mit dem Beispiel geht

- -

Das Beispiel der Tabs-Tabs-Tabs enthält drei Vorführungen der Zoom-Funktion: Zoomen, Zoomen und Zoom zurücksetzen. Hier ist das Feature in Aktion:

- -

{{EmbedYouTube("RFr3oYBCg28")}}

- -

Schauen wir uns an, wie der Zoom-In umgesetzt wird.

- -

manifest.json

- -

Keine der Zoom-Funktionen benötigt Berechtigungen, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.

- -

Tabs.html

- -

Wir haben bereits darüber diskutiert, wie der tabs.html die Optionen für diese Erweiterung definiert, nichts Neues oder Einzigartiges wird getan, um die Zoom-Optionen zur Verfügung zu stellen.

- -

Tabs.js

- -

Tabs.js beginnt mit der Definition mehrerer Konstanten, die im Zoom-Code verwendet werden:

- -
const ZOOM_INCREMENT = 0.2;
-const MAX_ZOOM = 3;
-const MIN_ZOOM = 0.3;
-const DEFAULT_ZOOM = 1;
- -

Es verwendet dann den gleichen Hörer, den wir zuvor besprochen haben, so dass es auf Klicks in tabs.html wirken kann.

- -

Für den Zoom in der Funktion läuft das:

- -
else if (e.target.id === "tabs-add-zoom") {
-   callOnActiveTab((tab) => {
-     var gettingZoom = browser.tabs.getZoom(tab.id);
-     gettingZoom.then((zoomFactor) => {
-       //the maximum zoomFactor is 3, it can't go higher
-       if (zoomFactor >= MAX_ZOOM) {
-         alert("Tab zoom factor is already at max!");
-       } else {
-         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
-         //if the newZoomFactor is set to higher than the max accepted
-         //it won't change, and will never alert that it's at maximum
-         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
-         browser.tabs.setZoom(tab.id, newZoomFactor);
-       }
-     });
-   });
- }
- -

Dieser Code verwendet callOnActiveTab () , um die Details des aktiven Tab zu erhalten, dann wird {{WebExtAPIRef("tabs.getZoom")}} den aktuellen Zoom-Faktor der Registerkarte erhalten. Der aktuelle Zoom wird mit dem definierten Maximum (MAX _ ZOOM)und einem Alarm verglichen, der ausgegeben wird, wenn sich der Tab bereits im Maximalzoom befindet. Andernfalls wird der Zoom-Level erhöht, aber auf den maximalen Zoom beschränkt, dann wird der Zoom mit {{WebExtAPIRef("tabs.getZoom")}}. gesetzt .

- -

Manipulationen eines Tabs CSS

- -

Eine weitere wichtige Fähigkeit, die die Tabs API bietet, ist die Möglichkeit, die CSS innerhalb eines Tab zu manipulieren.

- -

Dies kann zum Beispiel nützlich sein, wenn Sie bestimmte Seitenelemente markieren oder das Standardlayout der Seite ändern wollen.

- -

Wie man mit dem Beispiel geht

- -

Das Apply-css-Beispiel nutzt diese Funktionen, um der Webseite im aktiven Tab einen roten Rand hinzuzufügen. Hier ist das Feature in Aktion:

- -

{{EmbedYouTube ("bcK-GT2Dyhs")}}

- -

Gehen wir durch, wie es aufgebaut ist.

- -

manifest.json

- -

Um die CSS-Funktionen nutzen zu können, benötigen Sie entweder:

- -
    -
  • "Tabs " -Erlaubnis und Host-Erlaubnis oder
    • -
  • "activeTab"-Erlaubnis .
    • -
- -

Letzteres ist das nützlichste, da es einer Erweiterung erlaubt, {{WebExtAPIRef("tabs.insertCSS")}} und {{WebExtAPIRef("tabs.removeCSS")}} in der aktiven Registerkarte zu verwenden, wenn sie von der Browser-oder Seitenaktion, dem Kontextmenü oder einem Shortcut der Erweiterung ausgeführt wird.

- -
{
-  "description": "Adds a page action to toggle applying CSS to pages.",
-
- "manifest_version": 2,
- "name": "apply-css",
- "version": "1.0",
- "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
-
- "background": {
-
-    "scripts": ["background.js"]
- },
-
- "page_action": {
-
-    "default_icon": "icons/off.svg",
-    "browser_style": true
- },
-
- "permissions": [
-    "activeTab",
-    "tabs"
- ]
-
-}
- -

Sie werden darauf hinweisen, dass zusätzlich zu "activeTab" die Erlaubnis " Tabs"angefordert wird. Diese zusätzliche Erlaubnis ist erforderlich, um das Skript der Erweiterung in die Lage zu versetzen, auf die URL des Registers zuzugreifen, deren Bedeutung wir gleich sehen werden.

- -

Die anderen Hauptmerkmale in der manifest.json-Datei sind die Definition von:

- -
    -
  • Ein Hintergrundskript, das gestartet wird, sobald die Erweiterung geladen wird.
    • -
  • Eine "Seitenaktion", die ein Symbol definiert, das in die Adressleiste des Browsers aufgenommen werden soll.
    • -
- -

Background.js

- -

Beim Start setzt background.js einige Konstanten, um die zu bewendenden CSS zu definieren, Titel für die "Seitenaktion", und eine Liste von Protokollen, in denen die Erweiterung funktioniert:

- -
const CSS = "body { border: 20px solid red; }";
-const TITLE_APPLY = "Apply CSS";
-const TITLE_REMOVE = "Remove CSS";
-const APPLICABLE_PROTOCOLS = ["http:", "https:"];
- -

Wenn die Erweiterung zum ersten Mal geladen wird, verwendet sie {{WebExtAPIRef("tabs.query")}}, um eine Liste aller Tabs im aktuellen Browserfenster zu erhalten. Es schleit sich dann durch die Tabs, die InitializePageAction()rufen.

- -
var gettingAllTabs = browser.tabs.query({});
-
-gettingAllTabs.then((tabs) => {
- for (let tab of tabs) {
-   initializePageAction(tab);
- }
-});
- -

InitializePageAction verwendet protokolIsApplicable () , um festzustellen, ob die URL der aktiven Registerkarte eine ist, auf die die CSS angewendet werden kann:

- -
function protocolIsApplicable(url) {
- var anchor =  document.createElement('a');
- anchor.href = url;
- return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
-}
- -

Wenn das Beispiel dann auf der Registerkarte wirken kann, setzt initializePageAction () das PageAction-Symbol und den Titel des Tab, um die "Off"-Versionen zu verwenden, bevor die PageAction-Version sichtbar gemacht wird:

- -
function initializePageAction(tab) {
-
- if (protocolIsApplicable(tab.url)) {
-   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-   browser.pageAction.show(tab.id);
- }
-}
- -

Als Nächstes wartet ein Zuhörer auf der pageAction.onClicked darauf, dass das PageAction-Symbol angeklickt wird , und ruft toggleCSS an , wenn es ist.

- -
browser.pageAction.onClicked.addListener (toggleCSS);
- -

ToggleCSS () erhält den Titel der PageAction und nimmt dann die beschriebene Aktion auf:

- -
    -
  • Für "Apply CSS": - -
      -
    • Das PageAction-Symbol und den Titel in die "Entfernen"-Versionen.
      • -
    • Es ist eine sehr gut. {{WebExtAPIRef("tabs.insertCSS")}}.
      • -
    -
    • -
  • Für "Remove CSS": -
      -
    • Das PageAction-Symbol und den Titel in die "Anwendung"-Versionen.
      • -
    • Entfernt die CSS mit {{WebExtAPIRef("tabs.removeCSS")}}.
      • -
    -
    • -
- -
function toggleCSS(tab) {
-
-
- function gotTitle(title) {
-
-    if (title === TITLE_APPLY) {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
-     browser.tabs.insertCSS({code: CSS});
-    } else {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-     browser.tabs.removeCSS({code: CSS});
-    }
- }
-
- var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
-
- gettingTitle.then(gotTitle);
-}
- -

Um sicherzustellen, dass die PageAction nach jedem Update auf den Tab gültig ist, ruft ein Zuhörer auf {{WebExtAPIRef("tabs.onUpdated")}} jedes Mal, wenn der Tab aktualisiert wird, auf initializePageAction () , um zu überprüfen, ob der Reiter immer noch ein Protokoll, auf das das CSS angewendet werden kann.

- -
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
- initializePageAction(tab);
-});
- -

Einige weitere interessante Fähigkeiten

- -

Es gibt noch ein paar andere Tabs API-Funktionen, die nicht in einen der früheren Abschnitte passen:

- -
    -
  • Erfassen Sie den sichtbaren Tab-Inhalt mit {{WebExtAPIRef("tabs.captureVisibleTab")}}.
    • -
  • Erkennen Sie die Hauptsprache des Inhalts in einem Tab mit {{WebExtAPIRef("tabs.detectLanguage")}} . Dies könnte zum Beispiel verwendet werden, um die Sprache in Ihrem UI mit der Seite, in der sie läuft, zu vergleichen.
    • -
- -

Weitere Informationen

- -

Wenn Sie mehr über die Tabs API erfahren möchten, schauen Sie sich an:

- - - -

diff --git a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html deleted file mode 100644 index 6c331b52bb778b..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Deine erste Erweiterung -slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -tags: - - Anleitung - - Erweiterung - - Weberweiterung -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension -original_slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung ---- -
{{AddonSidebar}}
- -

In diesem Artikel wird die Erstellung einer Erweiterung (Extension) für Firefox komplett beschrieben. Diese Erweiterung soll einen roten Rand zu jeder Seite, die von "mozilla.org" oder einer Subdomain geladen wurde, hinzufügen.

- -

Der Quellcode für dieses Beispiel ist auf GitHub auffindbar: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Als Erstes benötigst du Firefox Version 45 oder neuer.

- -

Schreiben der Erweiterung

- -

Erstelle ein neues Verzeichnis und navigiere zu diesem:

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis mit dem folgenden Inhalt:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Adds a red border to all webpages matching mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- -
    -
  • Die ersten drei Keys: manifest_version, name und version sind verpflichtend und beinhalten grundlegende Metadaten für die Erweiterung.
    • -
  • description ist optional, aber empfehlenswert: diese wird dann im Add-ons Manager angezeigt.
    • -
  • icons ist optional, aber empfehlenswert: es erlaubt es dir ein Icon für deine Erweiterung festzulegen, welches ebenfalls im Add-ons Manager angezeigt wird.
    • -
- -

Der interessanteste Key hier ist content_scripts, welcher Firefox auffordert, ein Skript in allen Webseiten zu laden, deren URLs einem spezifischen Muster zuzuordnen sind. In diesem Fall fragen wir Firefox nach dem Skript namens "borderify.js", um es in allen HTTP oder HTTPS Seiten von "mozilla.org" oder einer Subdomain zu laden.

- - - -
-

In manchen Situation musst eine ID für deine Erweiterung festlegen. Wenn du eine Add-on ID festlegen musst, schreibe den applications key in manifest.json und setze die gecko.id-Eigenschaft:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

Die Erweiterung sollte ein Icon haben. Dieses wird neben dem Erweiterungseintrag in dem Add-ons manager angezeigt. Unsere manifest.json gibt den Ort des Icons unter "icons/border-48.png" an.

- -

Erstelle das "icons" Verzeichnis direkt in dem "borderify" Verzeichnis. Speichere dort ein Icon namens "border-48.png". Du kannst dazu das von unserem Beispiel benutzen, welches von der Google Material Design Iconsammlung stammt und unter den Richtlinien der Creative Commons Attribution-ShareAlike Lizenz steht.

- -

Wenn du dich entscheidest ein eigenes Icon zu verwenden, dann sollte dieses 48x48 Pixel groß sein. Du kannst ebenfalls ein 96x96 Pixel großes Icon für hochauflösende Bildschirme, übergeben, welches dann als die 96 Property des icons-Objekts in der manifest.json festgelegt wird:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Alternativ kannst du auch eine SVG-Datei übergeben, welche dann automatisch korrekt skaliert wird.
- (Beachte: Wenn du SVG verwendest und dein Symbol Text enthält, kannst du das Werkzeug "convert to path" deines SVG-Editors verwenden, um den Text zu verflachen, so dass er mit einer einheitlichen Größe/Position skaliert wird.

- - - -

borderify.js

- -

Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify"-Verzeichnis mit diesem Inhalt:

- -
document.body.style.border = "5px solid red";
- -

Dieses Skript wird in Seiten geladen, welche mit dem Muster des content_scripts-Keys in der manifest.json Datei übereinstimmen. Das Skript hat direkten Zugriff auf das Dokument, genauso wie die Skripte, die von der Seite selbst geladen werden.

- - - -

Probiere es aus:

- -

Als Erstes stelle sicher, dass du die richtigen Dateien an den richtigen Orten hast:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Installiere nun das Plugin

- -

Öffne "about:debugging" in Firefox, klicke "Add-on temporär laden" und wähle eine beliebige Datei aus deinem Erweiterungsverzeichnis:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

Die Erweiterung wird nun ausgeführt und ist solange aktiv, bis du Firefox neustartest.

- -

Alternativ kannst du Erweiterung auch von der Kommandozeile mit dem web-ext Tool ausführen.

- -

Teste es nun aus

- -

Nun besuche eine Seite von "mozilla.org". Du solltest jetzt einen roten Rand um die Seite erkennen:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Versuche es allerdings nicht auf addons.mozilla.org! Content Scripts werden zurzeit auf dieser Domain geblockt.

-
- -

Experimentiere nun ein bisschen. Bearbeite das "content script", um die Farbe des Randes zu ändern oder mache etwas anderes mit dem Seiteninhalt. Speichere das "content script", lade die Erweiterungsdateien in about:debugging neu mit Hilfe des "Neu laden"-Knopfs. Du kannst die Änderungen sofort sehen:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Verpacken und Veröffentlichen

- -

Damit andere Personen deine Erweiterung benutzen können musst du deine Erweiterung verpacken und zum Signieren an Mozilla senden. Um mehr darüber zu lernen, siehe "Deine Erweiterung veröffentlichen".

- -

Was nun?

- -

Jetzt hast du eine Vorstellung vom Prozess der WebExtension-Entwicklung für Firefox erhalten. Versuche:

- - diff --git a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html deleted file mode 100644 index 5168f66c688f11..00000000000000 --- a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Deine zweite Erweiterung -slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension -original_slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung ---- -

{{AddonSidebar}}

- -

Wenn du den Artikel "Deine erste Erweiterung" gelesen hast, hast du schon eine Vorstellung, wie man eine Erweiterung schreibt. In diesem Artikel werden wir eine komplexere Erweiterung schreiben, die mehr APIs benutzt.

- -

Die Erweiterung fügt eine neue Schaltfläche zu Firefox hinzu. Wenn der Nutzer diese anklickt, wird ihm ein Popup angezeigt auf dem er ein Tier auswählen kann. Sobald er eines ausgewählt hat, wird der aktulle Inhalt der Website mit dem Bild des ausgewählten Tieres ersetzt.

- -

Um das zu implementieren werden wir:

- -
    -
  • eine Browser-Aktion definieren, die zur Firefox-Toolbar hinzugefügt werden wird.
    - Für die Schaltfläche benötigen wir: -
      -
    • ein Icon namens "beasts-32.png"
      • -
    • Ein Popup welches sich öffnet, sobald der Nutzer auf die Schaltfläche klickt. Das Popup wird HTML, CSS, und JavaScript beinhalten.
      • -
    -
    • -
  • ein Icon festlegen, genannt "beasts-48.png". Dieses wird im Addon-Manager angezeigt werden.
    • -
  • Ein content-script "beastify.js" schreiben, welches auf Webseiten angezeigt werden wird.
    - Das ist der Code, der letztendlich die Webseite verändert.
    • -
  • Einige Tier-Bilder einfügen, um die Bilder auf der Webseite zu ersetzen
    - Die Bilder werden "web-abrufbare Ressourcen" werden, sodass die Webseite sie abrufen kann.
    • -
- -

Man kann die Struktur der Erweiterung wie folgt darstellen:

- -

- -

Es ist eine einfache Erweiterung, aber es zeigt viele der Grundkonzepte der WebExtensions API:

- -
    -
  • Hinzufügen einer Schaltfläche zur Toolbar
    • -
  • Erstellen eines Popup-Menüs mit HTML, CSS, und JavaScript
    • -
  • Verändern des Webseiteninhalts
    • -
  • Kommunikation zwischen dem content-script und dem Rest der Erweiterung
    • -
  • Verpacken von Ressourcen, die später auf der Webseite genutzt werden können.
    • -
- -

Der komplette Quellcode der Erweiterung ist auf GitHub zu finden.

- -

Um die Erweiterung zu erstellen, brauchst du mindestens Firefox 45.

- -

Die Erweiterung schreiben

- -

Erstelle einen neuen Ordner und öffne ihn:

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

Erstelle jetzt eine Datei namens "manifest.json" und füge den folgenden Inhalt ein:

- -
{
-
-  "manifest_version": 2,
-  "name": "Beastify",
-  "version": "1.0",
-
-  "description": "Erstellt eine Schaltfläche in der Toolbar. Klicke auf eine der Schaltflächen, um ein Tier auszuwählen. Der Inhalt des gerade geöffneten Tabs wird dann mit dem Bild des ausgewählten Tieres ersetzt. Nachschlagen: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
-  "icons": {
-    "48": "icons/beasts-48.png"
-  },
-
-  "permissions": [
-    "activeTab"
-  ],
-
-  "browser_action": {
-    "default_icon": "icons/beasts-32.png",
-    "default_title": "Beastify",
-    "default_popup": "popup/choose_beast.html"
-  },
-
-  "web_accessible_resources": [
-    "beasts/frog.jpg",
-    "beasts/turtle.jpg",
-    "beasts/snake.jpg"
-  ]
-
-}
-
- -
    -
  • Die ersten drei Eigenschaften manifest_version, name, und version sind erforderlich und enthalten Basismetadaten.
    • -
  • description und homepage_url sind optional aber empfohlen, sie erhalten nützliche Informationen.
    • -
  • icons ist optional aber empfohlen, hier kannst du ein Icon festlegen, welches im Addon-Manager angezeigt werden wird.
    • -
  • permissions listet die Berechtigungen auf, die die Erweiterung benötigt. Hier brauchen wir nur die activeTab Berechtigung.
    • -
  • browser_action spezifiziert die Schaltfläche. Hier übergeben wir drei Informationen: -
      -
    • default_icon ist notwendig, und gibt das Icon der Schaltfläche an
      • -
    • default_title ist optional und wird unter dem Icon angezeigt
      • -
    • default_popup wird verwendet, wenn ein Popup angezeigt werden soll, sobald der Nutzer auf die Schaltfläche klickt. Das soll so sein, deshalb wird hier die Eigenschaft mit einer HTML-Datei belegt.
      • -
    -
    • -
  • web_accessible_resources listet die Dateien auf, die auf Webseiten verwendet werden solllen. Weil die Erweiterung den Inhalt der Webseite mit den Bilder, die der Erweiterung hinzugefügt wurden, verändern soll, müssen die Bilder hier aufgelistet werden.
    • -
- -

Beachte, dass alle Pfade relativ zur manifest.json angegeben werden.

- -

Das Icon

- -

Die Erweiterung soll ein Icon beinhalten, das neben dem Eintrag der Erweiterung in der Add-ons-Verwaltung angezeigt wird (diese kannst du durch Aufrufen der URL "about:addons" öffnen). In manifest.json haben wir festgelegt, dass wir ein Icon für die Toolbar unter "icons/beasts-48.png" bereitstellen.

- -

Erstelle das "icons"-Verzeichnis and speichere dort das Icon namens "beasts-48.png". Du kannst das Icon aus unserem Beispiel verwenden, welches aus dem Aha-Soft’s Free Retina Icon-Set stammt und gemäß seiner Lizenzbestimmungen genutzt wird.

- -

Wenn du dich entscheidest, ein eigenes Icon zu verwenden, sollte es eine Auflösung von 48x48 Pixeln besitzen. Zusätzlich kannst du ein 96x96 Pixel großes Icon für hochaufgelöste Bildschirme bereitstellen. In diesem Fall wird es unter der Eigenschaft 96 des icons Objekts in manifest.json aufgeführt:

- -
"icons": {
-  "48": "icons/beasts-48.png",
-  "96": "icons/beasts-96.png"
-}
- -

Die Toolbar-Schaltfläche

- -

Die Toolbar-Schaltfläche benötigt ebenfalls ein Icon, das laut unserer manifest.json unter "icons/beasts-32.png" bereitsteht.

- -

Speichere ein Icon namens "beasts-32.png" im Verzeichnis "icons".Du kannst das Icon aus unserem Beispiel verwenden, welches aus dem IconBeast Lite Icon-Set stammt und gemäß seiner Lizenzbestimmungen genutzt wird.

- -

Wenn du kein Popup einsetzt, dann wird ein Klick-Event zur Erweiterung gesendet, sobald der Benutzer die Schaltfläche anklickt. Wenn du hingegen ein Popup einsetzt, wird dieses Klick-Event nicht gesendet, sondern das Popup wird geöffnet. Da wir ein Popup verwenden wollen, soll dieses im nächsten Schritt erstellt werden.

- -

Das Popup

- -

Mithilfe des Popups soll der Benutzer eines von drei Tieren auswählen können.

- -

Erstelle ein neues Verzeichnis namens "popup" in der obersten Ebene des Erweiterungsverzeichnisses. Dieses Verzeichnis wird den Code für das Popup enthalten. Das Popup besteht aus drei Dateien:

- -
    -
  • choose_beast.html legt den Inhalt des Fensters fest
    • -
  • choose_beast.css legt das Styling des Fensters fest
    • -
  • choose_beast.js verarbeitet die Auswahl des Benutzers, indem es im aktiven Tab ein Content Script ausführt
    • -
- -

choose_beast.html

- -

Die HTML-Datei sieht folgendermaßen aus:

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
-  </head>
-
-  <body>
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button clear">Reset</div>
-
-    <script src="choose_beast.js"></script>
-  </body>
-
-</html>
- -

Es gibt ein Element für jedes Tier. Beachte, dass in dieser Datei auch die CSS- und JavaScript-Dateien verlinkt werden, genau wie auf einer Website.

- -

choose_beast.css

- -

Die CSS-Datei legt die Größe des Popups fest, stellt sicher, dass die drei Auswahlmöglichkeiten, den verfügbaren Platz ausfüllen und legt das grundlegende Styling fest:

- -
html, body {
-  width: 100px;
-}
-
-.button {
-  margin: 3% auto;
-  padding: 4px;
-  text-align: center;
-  font-size: 1.5em;
-  cursor: pointer;
-}
-
-.beast:hover {
-  background-color: #CFF2F2;
-}
-
-.beast {
- background-color: #E5F2F2;
-}
-
-.clear {
- background-color: #FBFBC9;
-}
-
-.clear:hover {
- background-color: #EAEAC9;
-}
-
- -

choose_beast.js

- -

In der JavaScript-Datei des Popups empfangen wir Klick-Events. Wenn ein Klick auf eines der Tiere erfolgte, wird das Content Script zum aktiven Tab hinzugefügt. Sobald das Content Script geladen wird, übergeben wir ihm eine Nachricht mit der Auswahl des Tieres:

- -
/*
-Given the name of a beast, get the URL to the corresponding image.
-*/
-function beastNameToURL(beastName) {
-  switch (beastName) {
-    case "Frog":
-      return browser.extension.getURL("beasts/frog.jpg");
-    case "Snake":
-      return browser.extension.getURL("beasts/snake.jpg");
-    case "Turtle":
-      return browser.extension.getURL("beasts/turtle.jpg");
-  }
-}
-
-/*
-Listen for clicks in the popup.
-
-If the click is on one of the beasts:
-  Inject the "beastify.js" content script in the active tab.
-
-  Then get the active tab and send "beastify.js" a message
-  containing the URL to the chosen beast's image.
-
-If it's on a button which contains class "clear":
-  Reload the page.
-  Close the popup. This is needed, as the content script malfunctions after page reloads.
-*/
-
-document.addEventListener("click", (e) => {
-  if (e.target.classList.contains("beast")) {
-    var chosenBeast = e.target.textContent;
-    var chosenBeastURL = beastNameToURL(chosenBeast);
-
-    browser.tabs.executeScript(null, {
-      file: "/content_scripts/beastify.js"
-    });
-
-    var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
-    gettingActiveTab.then((tabs) => {
-      browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
-    });
-  }
-  else if (e.target.classList.contains("clear")) {
-    browser.tabs.reload();
-    window.close();
-  }
-});
-
- -

It uses three WebExtensions API functions:

- - - -

The content script

- -

Create a new directory, under the extension root, called "content_scripts" and create a new file in it called "beastify.js", with the following contents:

- -
/*
-beastify():
-* removes every node in the document.body,
-* then inserts the chosen beast
-* then removes itself as a listener
-*/
-function beastify(request, sender, sendResponse) {
-  removeEverything();
-  insertBeast(request.beastURL);
-  browser.runtime.onMessage.removeListener(beastify);
-}
-
-/*
-Remove every node under document.body
-*/
-function removeEverything() {
-  while (document.body.firstChild) {
-    document.body.firstChild.remove();
-  }
-}
-
-/*
-Given a URL to a beast image, create and style an IMG node pointing to
-that image, then insert the node into the document.
-*/
-function insertBeast(beastURL) {
-  var beastImage = document.createElement("img");
-  beastImage.setAttribute("src", beastURL);
-  beastImage.setAttribute("style", "width: 100vw");
-  beastImage.setAttribute("style", "height: 100vh");
-  document.body.appendChild(beastImage);
-}
-
-/*
-Assign beastify() as a listener for messages from the extension.
-*/
-browser.runtime.onMessage.addListener(beastify);
-
- -

The content script adds a listener to messages from the extension (specifically, from "choose_beast.js" above). In the listener, it:

- -
    -
  • removes every element in the document.body
    • -
  • creates an <img> element pointing to the given URL, and inserts it into the DOM
    • -
  • removes the message listener.
    • -
- -

The beasts

- -

Finally, we need to include the images of the animals.

- -

Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from the GitHub repository, or from here:

- -

- -

Testing it out

- -

First, double check that you have the right files in the right places:

- -
beastify/
-
-    beasts/
-        frog.jpg
-        snake.jpg
-        turtle.jpg
-
-    content_scripts/
-        beastify.js
-
-    icons/
-        beasts-32.png
-        beasts-48.png
-
-    popup/
-        choose_beast.css
-        choose_beast.html
-        choose_beast.js
-
-    manifest.json
- -

Starting in Firefox 45, you can install extensions temporarily from disk.

- -

Open "about:debugging" in Firefox, click "Load Temporary Add-on", and select your manifest.json file. You should then see the extension's icon appear in the Firefox toolbar:

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

Open a web page, then click the icon, select a beast, and see the web page change:

- -

{{EmbedYouTube("YMQXyAQSiE8")}}

- -

Developing from the command line

- -

You can automate the temporary installation step by using the web-ext tool. Try this:

- -
cd beastify
-web-ext run
diff --git a/files/de/mozilla/firefox/index.html b/files/de/mozilla/firefox/index.html deleted file mode 100644 index 336367a2cd5b39..00000000000000 --- a/files/de/mozilla/firefox/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Firefox -slug: Mozilla/Firefox -tags: - - Firefox - - Mozilla -translation_of: Mozilla/Firefox ---- -
{{FirefoxSidebar}}
- -

Firefox ist Mozillas beliebter Webbrowser, der für viele Betriebssysteme verfügbar ist, insbesondere Windows, OS X, Linux auf dem Desktop und mobilen Endgeräten mit Android. Durch seine umfassende Kompatibilität, den aktuellsten Web-Technologien und mächtigen Entwicklerwerkzeugen ist Firefox eine großartige Wahl für Webentwickler wie Anwender.

- -

Firefox ist ein Open-Source-Projekt. Der größte Teil des Quellcodes wird von unserer riesigen Gemeinschaft aus Freiwilligen hinzugefügt. Hier lernen Sie wie Sie zum Firefox-Projekt beitragen können und dazu finden Sie Links zu Informationen über die Entwicklung von Firefix-Add-ons, wie man die Entwickler-Werkzeuge benutzt und andere Aufgaben.

- -
-

Lernen Sie, wie man Add-ons für Firefox erstellt, wie man Firefox selbst entwickelt und wie die Kernelemente von Firefox und seine Unterprojekte funktionieren.

-
- -
-
Details zu Veröffentlichungen für Entwickler
-

Informationen zu Veröffentlichungen für Entwickler; lernen Sie welche Fähigkeiten sowohl für Websites als auch für Add-Ons mit jeder weiteren Firefoxversion entstehen.

-
Projektdokumentation
-

Die neuesten informationen zu den internen Abläufen bei Firefox und zum Aufbau des Systems, sodass Sie einen Zugang zum Code bekommen.

-
Entwickleranleitung -

Unsere Anleitung für Entwickler liefert Antworten, wie man an den Code von Firefox kommt, wie man ihn kompiliert, wie man sich zurechtfindet und wie man zum Projekt beitragen kann.

- - -

Firefox Entwicklungskanäle

- -

Firefox ist verfügbar in vier Kanälen.

- -

Firefox Nightly

- -

Jede Nacht arbeiten wir von der Mozilla Zentrale an Firefox mit dem neuesten Code. Diese Builds sind für alle Firefox Entwickler und für diejenigen die die neuesten innovativen Features ausprobieren wollen, während sie noch entwickelt werden.

- -

Firefox Nightly herunterladen

- -

Firefox Developer Edition

- -

Diese Version von Firefox ist speziell für Entwickler gedacht. Alle sechs Wochen werden die stabilsten Features von Firefox Nightly in der Firefox Developer Edition veröffentlicht. Wir veröffentlichen auch ein paar Features die nur für Entwickler in diesem Kanal verfügbar sein werden.

- -

Mehr zur Developer Edition von Firefox erfahren.

- -

Firefox für Entwickler herunterladen

- -

Firefox Beta

- -

Nach sechs Wochen in der Firefox Developer Edition, werden die stabilsten Features in die neue Firefox Beta-Version übertragen. Firefox Beta ist für Firefoxenthusiasten, die gerne die neusten Features von der nächsten Firefox-Version vorab testen möchten.

- -

Firefox Beta herunterladen

- -

Firefox

- -

Nachdem die Features der Firefox Beta-Version nocheinmal sechs Wochen lange stabilisiert wurden, wird eine neue Firefox-Version für die Hunderte von Millionen Nutzer in Form einer neuen Version veröffentlicht.

- -

Firefox herunterladen

diff --git a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html deleted file mode 100644 index 2140632f49d566..00000000000000 --- a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Die Priorität von HTTP-Anfragen ändern -slug: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests -tags: - - HTTP -translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests -original_slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests ---- -
{{FirefoxSidebar}}
- -

Einleitung

- -

In Firefox 1.5 (Gecko 1.8), wurde eine API hinzugefügt um die Priorität von HTTP-Anfragen zu ändern. Vor dieser Anpassung, gab es keine Möglichkeiten um die Priorität von Anfragen anzupassen. Die API wurde in nsISupportsPriority definiert, aber nur sehr generell, damit jedes Objekt dieses Interface implementieren kann um das Konzept der Änderung der Priorität einzuführen. Dieser Artikel beschreibt die Vorgehensweise wie dieses Interface zu benutzen ist.

- -

Zum Zeitpunkt des Enstehens dieses Artikels, beeinflusst das Ändern der Priorität von HTTP-Anfragen nur die Reihenfolge in der Verbindungsversuche durchgeführt werden. Damit ist gemeint dass die Priorität nur einen Effekt hat, wenn es mehrere Verbindungen (zu einem Server) gibt als erlaubt.

- -

Die Beispiele in dieser Dokumentation wurden in JavaScript in Verbindung mit XPCOM geschrieben.

- -

Verwenden der API

- -

Sie sollten wissen, dass der Wert des priority Attributes, UNIX Konventionen befolgt, mit niedrigen Zahlen (inklusive negative Zahlen) die die höhere Priorität darstellen.

- -

Auf die Priorität zugreifen ausgehend vom nsIChannel

- -

Um die Priorität einer HTTP Anfrage ändern zu können, müssen Sie Zugriff auf den nsIChannel haben, von dem die Anfrage ausgeht. Wenn Sie keinen bestehenden Channel haben, dann kann dieser erstellt werden durch:

- -
var ios = Components.classes["@mozilla.org/network/io-service;1"]
-                    .getService(Components.interfaces.nsIIOService);
-var ch = ios.newChannel("http://www.example.com/", null, null);
-
- -


- Sobald der nsIChannel besteht, ist der Zugriff auf die Priorität wie folgt:

- -
if (ch instanceof Components.interfaces.nsISupportsPriority) {
-  ch.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST;
-}
-
- -

Das Interface definiert verschiedene Standard Priorität Werte die benutzt werden können, und zwar zwischen PRIORITY_HIGHEST und PRIORITY_LOWEST.

- -

Einen nsIChannel erhalten ausgehend von einem XMLHttpRequest

- -

Wenn Sie in JavaScript programmieren, möchten Sie eine XMLHttpRequest benutzen, welche eine höhere Abstraktion einer HTTP Anfrage ist. Sie können auf den channel eines XMLHttpRequest zugreifen, nachdem die open Methode aufgerufen wurde:

- -
var req = new XMLHttpRequest();
-req.open("GET", "http://www.example.com", false);
-if (req.channel instanceof Components.interfaces.nsISupportsPriority) {
-  req.channel.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST;
-}
-req.send(null);
-
- -


- Dieses Beispiel beinhaltet einen synchronen XMLHttpRequest, welcher in der Praxis nicht angewendet werden sollte.

- -

Die Priorität anpassen

- -

nsISupportsPriority beinhaltet eine Methode adjustPriority. Diese Methode sollte benutzt werden, wenn die Priorität einer Anfrage um einen gewissen Betrag geändert werden soll. Zum Beispiel, wenn die Priorität etwas höher sein soll, muss folgendes gemacht werden:

- -
// assuming we already have a nsIChannel from above
-if (ch instanceof Components.interfaces.nsISupportsPriority) {
-  ch.adjustPriority(-1);
-}
-
- -

Hier ist zu bemerken, dass niedrigere Zahlen eine höhere Priorität bedeuten, also wenn um eine negative Zahl angepasst wird, so wird eine höhere Priorität eingestellt.

diff --git a/files/de/mozilla/firefox/releases/1.5/index.html b/files/de/mozilla/firefox/releases/1.5/index.html deleted file mode 100644 index c7bb6063f42b7a..00000000000000 --- a/files/de/mozilla/firefox/releases/1.5/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Firefox_1.5_für_Entwickler -slug: Mozilla/Firefox/Releases/1.5 -tags: - - CSS - - DOM - - Erweiterungen - - Firefox 1.5 - - HTML - - JavaScript - - RDF - - SVG - - Web Development - - Web Standards - - XML - - XML Web Services - - XSLT - - XUL -translation_of: Mozilla/Firefox/Releases/1.5 -original_slug: Firefox_1.5_für_Entwickler ---- -
{{FirefoxSidebar}}

Basierend auf der Gecko 1.8 Engine, verbessert Firefox 1.5 die Unterstützung von Webstandards und stellt neue Fähigkeiten zur Verfügung, um die nächste Generationen von Webapplikationen zu ermöglichen. Firefox 1.5 verbessert die Unterstützung von CSS2 und CSS3, führt neue APIs für skript- und programmierbare 2D Grafiken durch SVG 1.1 und durch <canvas> ein, lernt XForms und XML Events kennen und wird außerdem viele DHTML, JavaScript und DOM Erweiterungen mit sich bringen.

- -

Entwicklertools

- -

Es gibt verschiedene Tools und Browser-Erweiterungen als Hilfe für Entwickler in Firefox 1.5:

- -
    -
  • DOM Inspector ist ein Tool, das Entwicklern erlaubt, ihre Dokumente zu kontrollieren und zu modifizieren, ohne das Dokument selbst zu ändern. Der DOM Inspector kann während der Installation von Firefox 1.5 ausgewählt werden (Developer Tools) und steht dann in Firefox 1.5 zur Verfügung.
    • -
  • JavaScript-Konsole: Ein Tool, um Javascriptcode zu schreiben und zu testen und nebenbei JavaScript- und CSS-Fehler einer Seite zu sehen.
    • -
  • Quelltextansicht mit Hervorhebung und Suchhilfen.
    • -
  • Browser-Erweiterungen wie Firebug, Web Developer Toolbar, Live HTTP Headers, HTML Validator und viele mehr.
    • -
- -

Achtung: Einige Erweiterungen, wie z.B. JavaScript Debugger (Venkman) unterstützen Firefox 1.5 nicht vollständig und werden deshalb ausgeschaltet.

- -

Überblick

- -

Einige der neuen Features von Firefox 1.5:

- -

Für Entwickler von Webseiten und Webapplikationen

- -
-
Einführung: SVG in XHTML
-
Lernen Sie, wie sich SVG in XHTML Dokumente einbetten lässt und wie man mit JavaScript und CSS ein Bild manipulieren kann, so einfach als wenn man normales XHTML schreiben würde. Unter SVG in Firefox finden sich außerdem Informationen zum Status der aktuellen Implementation von SVG.
-
Grafiken mit Canvas zeichnen
-
Lernen Sie, wie man mit dem <canvas>-Element Grafiken und andere Objekte zeichnet.
-
CSS3 Columns
-
Lernen Sie etwas über die neue Unterstützung von mehrspaltigen Text-Layout, wie es für CSS3 vorgesehen ist.
-
Firefox 1.5 Caching benutzen
-
Sehen Sie wie schnell vorwärts- und rückwärts-Navigation mit dem bfcache ist.
-
- -

Entwickler von XUL und Erweiterungen

- -
-
Building an Extension
-
In diesem Tutorial wird Ihnen Schritt-für-Schritt erklärt, wie Sie eine einfache Erweiterung für Firefox entwickeln können. Siehe auch anhand des Tutorials auf MozillaZine(en), welches die neuen Möglichkeiten des Erweiterungsmanagers in Firefox 1.5 erklärt.
-
XPCNativeWrapper
-
XPCNativeWrapper ist eine Möglichkeit ein Objekt so zu verpacken, dass es sicher ist, es als privilegierten Code zu benutzen. Dies funktioniert in allen Firefox-Versionen, obwohl sich das Verhalten mit Firefox 1.5 verändert hat.
-
Preferences System
-
Erfahren Sie mehr über das Widgets-System mit dem Sie einfacher Optionsfenster erstellen können und dabei sogar Javascript sparen.
-
Internationale Zeichen in XUL JavaScript
-
XUL JavaScript Dateien können nun Buchstaben enthalten die kein ASCII sind.
-
Tree API Änderungen
-
Die Schnittstellen zum Zugriff auf XUL <tree>-Elemente haben sich geändert.
-
Änderungen an XUL für Firefox 1.5
-
Zusammenfassung von XUL Änderungen. Siehe auch XUL Anwendungen für Firefox 1.5 anpassen.
-
- -
Netzwerk-bezogene Änderungen
- -
    -
  • Eingabeaufforderungen zu Zertifikaten können von nun an über Channels überschrieben werden. Das funktioniert über eine Interface-Anforderung als ein nsIChannel notificationCallback und gibt ein Interface für nsIBadCertListener aus.
    • -
  • Listener von nsIWebBrowserPersist können nun nsIInterfaceRequestor::GetInterface implementieren und verfügen über die Möglichkeit allen Interfaces dies bereitzustellen, darunter nsIProgressEventSink (nicht sehr nützlich, überflüssig mit nsIWebProgressListener). Nützliche Interfaces enthalten hier nsIChannelEventSink und nsIBadCertListener.
    • -
  • Erweiterungen oder andere Necko Anwender, darunter XMLHttpRequest, können einen Cookie Header explizit festlegen, und Necko wird diesen nicht ersetzen. Gespeicherte Cookies werden mit dem gesetzten Header zusammengelegt, sodass der explizit festgelegte Header den gespeicherten Cookie überschreibt.
    • -
- -

Neue Möglichkeiten für den Endbenutzer

- -

User Experience

- -
    -
  • Schnelle Navigation mit verbesserter Vorwärts- und Rückwärts-Performance.
    • -
  • Anordnung von Tabs über „Drag und Drop“.
    • -
  • Answers.com ist in der Liste der Suchmaschinen aufgenommen worden, um schnelle Wörterbuchabfragen zu ermöglichen.
    • -
  • Verbesserungen an der Benutzbarkeit, darunter besser beschriebene Fehlermeldungen, neu angeordnete Optionsmenüs, verbesserte RSS-Unterstützung und „Safe Mode“ für sicheres Surfen.
    • -
  • Bessere Zugänglichkeit durch DHTML.
    • -
  • Tool um fehlerhafte Webseiten zu melden, die nicht mit Firefox kompatibel sind.
    • -
  • Bessere Unterstützung für Mac OS X (10.2 und höher) durch Profil-Imigration von Safari und Mac Internet Explorer.
    • -
- -

Sicherheit und Privatsphäre

- -
    -
  • Automatische Updates, um Softwareupdates zu vereinfachen. Benachrichtigung, wenn ein Update zur Verfügung steht. Ein Update wird kleiner als ein MB sein. Das Updaten von Erweiterungen wurde auch verbessert.
    • -
  • Verbesserter Popup-Blocker.
    • -
  • Die Funktion Private Daten löschen, stellt über ein Menü oder einen Tastaturkürzel eine einfache Möglichkeit zum Löschen aller privaten Daten dar.
    • -
- -

Unterstützung von offenen Webstandards

- -

Mit der Unterstützung von Webstandards bleibt Firefox weiter führend auf dem Markt mit einheitlichen, systemübergreifenden Implementierungen für:

- - - -

Firefox 1.5 unterstützt folgende Protokolle zum Datentransfer (HTTP, FTP, SSL, TSL, etc.), multi-linguale Buchstaben (Unicode), Grafiken (GIF, JPEG, PNG, SVG und weitere) und die letzte Version der weltweit beliebten Skriptsprache JavaScript 1.6.

- -

Änderungen seit Firefox 1.0

- -

Viele Neues wurde in Firefox eingeführt, seit dem letzten Release am 9. November 2004. Firefox wurde mit vielen Eigenschaften erweitert und Fehler wurden beseitigt. Eine detailreiche Liste findet sich auf: squarefree.com (Englisch).

diff --git a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html deleted file mode 100644 index 04ca2d9ff5c49e..00000000000000 --- a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Benutzen des Zwischenspeichers in Firefox 1.5 (caching) -slug: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching -tags: - - Caching - - Firefox 1.5 - - JavaScript -translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching -original_slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) ---- -
{{FirefoxSidebar}}

Einführung

- -

Firefox 1.5 verwendet einen internen Speicher-Cache, der sich den Inhalt der geladenen Webseiten, sowie den Status von JavaScripts für eine Sitzung merkt. Dadurch verbessert sich die Ladezeit bereits geladener Webseiten erheblich und es kann schnell zwischen bereits besuchten Webseiten vor und zurück gewechselt ohne, dass die Seiten neu geladen werden müssen oder der JavaScript-Status verloren geht. Diese Funktion wird als bfcache („Back-Forward Cache“) bezeichnet. Der zwischengespeicherte Status wird solange erhalten, bis der Browser geschlossen wird.

- -

Unter bestimmten Umständen, verwendet Firefox diesen Zwischenspeicher jedoch nicht:

- -
    -
  • Die Seite besitzt einen unload oder beforeunload Handler.
    • -
  • Die Seite besitzt den „cache-control: no-store“ Header.
    • -
  • Die Seite besitzt den „cache-control: no-cache“ Header und wird über das https Protokoll gesendet.
    • -
  • Die Seite ist nicht fertig geladen, wenn der Benutzer die Seite verlässt.
    • -
  • Die Top-Level Seite besitzt Frames, die nicht zwischenspeicherbar sind.
    • -
  • Die Seite ist in einem Frame, in dem eine neue Seite geladen wird (in diesem Fall, wird die letzte, geladene Seite des Frames zwischengespeichert).
    • -
- -

Die sogenannte bfcache Funktion verändert das Ladeverhalten von Webseiten ungemein. Webentwickler möchten daher unter Umständen:

- -
    -
  • Wissen, ob der Benutzer eine bestimmte Seite betreten hat und diese aus dem Cache geholt wird;
    • -
  • Das Seitenverhalten bestimmen, das sich aufgrund des Verlassens einer bestimmten Seite ändert.
    • -
- -

Zwei neue Browser-Events ermöglichen beides.

- -

Die neuen Browser-Events

- -

Falls man die neuen Events verwendet, werden die Webseiten in anderen und älteren Browsern trotzdem richtig angezeigt. Getestet wurden Firefox, Internet Explorer, Opera und Safari. Die neue bfcache-Funktion wird nur verwendet, wenn die Webseite in einen Firefox-Browser 1.5 oder höher geladen wird.

- -

Hinweis: Safari unterstützt die neuen Events in einer zukünftigen Version (10-2009, siehe WebKit bug).

- -

Standardverhalten bei Webseiten sehen wie folgend aus:

- -
    -
  1. Benutzer navigiert zu der Webseite.
    2. -
  2. Wenn sich die Seite aufbaut, werden die Inline-Scripts ausgeführt.
    3. -
  3. Nach vollständigem Aufbau, wird der unload-Handler ausgelöst.
    4. -
- -

Einige Seiten verfügen über einen vierten Schritt. Falls die Seite einen unload-Handler besitzt, wird dieser beim Verlassen der Webseite zusätzlich ausgelöst. Falls ein unload oder beforeunload Handler vorhanden ist, wird die Seite nicht zwischengespeichert.

- -

Wenn ein Benutzer zu einer bereits zwischengespeicherten Seite navigiert, werden die bereits ausgeführten Inline-Scripts und der onload-Handler ignoriert (siehe oben: Schritt 2 und 3), damit werden in fast allen Fällen die Effekte dieser Skripte erhalten.

- -

Wenn die Webseite Skripte enthält, oder anderes Verhalten, welches bei jedem neuen Besuch des Benutzers erneut ausgeführt werden soll, oder wenn man wissen möchte, ob ein Benutzer zu einer zwischengespeicherten Seite navigiert, muss man das über das pageshow-Event realisieren.

- -

Wenn man eine Aktion ausführen will, die beim Verlassen einer Webseite ausgeführt wird und man den Vorteil des neuen bfcache-Feature nutzen möchte, verwendet man nicht den unload-Handler, sondern benutzt das neue pagehide-Event.

- -

Das pageshow Ereignis

- -

Dieses Ereignis funktioniert genauso, wie das load-Event, jedoch wird dieses Ereignis bei jedem Aufruf der Webseite ausgelöst (wobei das onload-Ereignis nicht ausgelöst wird, wenn die Webseite aus dem Zwischenspeicher des Firefox 1.5 geladen wird). Wird die Webseite das erste Mal geladen, folgt nach dem Auslösen des onload-Ereignisses sofort das pageshow-Event. Das pageshow-Ereignis besitzt eine boolsche Eigenschaft, persisted, deren Inhalt auf beim ersten Laden auf false steht. Der Wert true bedeutet, dass der Browser diese Seite aus dem Zwischenspeicher holt.

- -

Folglich muss man jedes JavaScript, welches bei jedem Besuch der Webseite durchlaufen soll, mit dem pageshow-Ereignis verknüpfen.

- -

Werden JavaScript Funktionen als Teil des pageshow Events aufgerufen, kann durch den Aufruf des pageshow Events im load Event sichergestellt werden, dass die Funktionen von anderen Versionen und Browsern als Firefox 1.5, geladen werden. Siehe auch im späteren Beispiel weiter unten.

- -

Das pagehide Ereignis

- -

Falls ein bestimmtes Verhalten definiert werden soll, wenn der Benutzer von der Seite weg navigiert und man nicht das unload-Event verwenden will (welches verursachen würde, dass die Webseite nicht zwischengespeichert wird), kann man nun das neue pagehide-Event verwenden. Wie auch das pageshow Ereignis, besitzt das pagehide-Event die boolsche Eigenschaft persisted. Der Inhalt dieser Eigenschaft steht auf false, wenn der Seiteninhalt nicht aus dem Zwischenspeicher geholt wird, und steht auf true, wenn der Inhalt aus dem Cache geholt wird. Wenn die Eigenschaft auf false steht, wird der unload-Handler, falls vorhanden, sofort nach dem pagehide-Event ausgeführt.

- -

Firefox 1.5 versucht das Ladeverhalten der Webseiten so zu simulieren, als wenn die Seite das erste Mal geladen wird. Frames werden genauso behandelt, wie das Top-Level Fenster. Falls die Webseite Frames enthält und sie aus dem Zwischenspeicher geladen werden:

- -
    -
  • werden die pageshow-Events aller Frame-Seiten ausgelöst, bevor das pageshow-Event der Hauptseite ausgeführt wird.
    • -
  • Wenn der Benutzer von der zwischengespeicherten Frame-Seite weg navigiert, wird das pagehide-Event von allen Frame-Seiten augelöst, bevor das pagehide-Event der Hauptseite ausgeführt wird.
    • -
  • Bei einer Navigation innerhalb eines einzigen Frames, werden nur die Events ausgelöst, die diesen Frame betreffen.
    • -
- -

Seiten-Caching trotz unload und beforeunload Handler

- -

Wenn man unload oder beforeunload Events verwenden möchte und das Seiten-Caching aufrecht erhalten will, können diese Events einfach in der Event-Handler Funktion entfernt werden und wieder in der pageshow Handler-Fuktion eingesetzt werden, wenn man auf die Seite zurückkehrt:

- -
window.addEventListener('pageshow', PageShowHandler, false);
-window.addEventListener('unload', UnloadHandler, false);
-
-function PageShowHandler() {
-	window.addEventListener('unload', UnloadHandler, false);
-}
-
-function UnloadHandler() {
-	window.removeEventListener('beforeunload', UnloadHandler, false);
-}
-
- -

Beispiel-Code

- -

Das folgende Beispiel veranschaulicht eine Seite, die beide Events verwendet (load und pageshow). Die Beispiel-Webseite verhält sich wie folgt:

- -
    -
  • In anderen Browsern als dem Firefox 1.5 passiert folgendes zu jedem Zeitpunkt, bei dem die Seite geladen wird: Das onload-Ereigniss löst die onLoad-Funktion aus, welche wiederum die onPageShow-Funktion ausführt (sowie eine zusätzliche Funktion).
    • -
- -
    -
  • Im Firefox 1.5 verhält sich das onload-Event wie bei jedem anderen Browser, wenn die Webseite das erste Mal geladen wird (also nicht aus dem Zwischenspeicher). Zusätzlich wird das pageshow-Event ausgelöst und falls die persisted-Eigenschaft den Wert false besitzt, wird nichts Zusätzliches ausgeführt.
    • -
- -
    -
  • Wird die Webseite beim Firefox 1.5 aus dem Zwischenspeicher geladen, wird nur das pageshow-Event ausgelöst. Besitzt die persisted-Eigenschaft den Wert true, werden nur die JavaScript-Aktionen ausgeführt, die in der onPageShow-Funktion gelistet sind.
    • -
- -

In diesem Beispiel:

- -
    -
  • Die Webseite ermittelt und visualisiert das derzeitige Datum und die derzeitige Zeit bei jedem Anzeigen der Webseite. Die Berechnung enthält auch Sekunden sowie Millisekunden, sodass die Funktionen einfach getestet werden können.
    • -
  • Der Cursor wird im Eingabefeld des Formulars für den Namen platziert. Wenn der Benutzer nun beim Firefox 1.5, nach abschicken des Formulars, zurück zur Eingabe navigiert, verharrt der Cursor beim zuletzt ausgewählten Feld. Bei anderen Browsern, wird der Cursor erneut im Namensfeld platziert.
    • -
- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
-<HTML>
-<head>
-<title>Order query : Firefox 1.5 Example</title>
-<style type="text/css">
-body, p {
-	font-family: Verdana, sans-serif;
-	font-size: 12px;
-   	}
-</style>
-<script type="text/javascript">
-function onLoad() {
-	loadOnlyFirst();
-	onPageShow();
-}
-
-function onPageShow() {
-//Berechne die aktuelle Zeit
-        var currentTime= new Date();
-	var year=currentTime.getFullYear();
-	var month=currentTime.getMonth()+1;
-	var day=currentTime.getDate();
-	var hour=currentTime.getHours();
-	var min=currentTime.getMinutes();
-	var sec=currentTime.getSeconds();
-	var mil=currentTime.getMilliseconds();
-	var displayTime = (month + "/" + day + "/" + year + " " +
-		hour + ":" + min + ":" + sec + ":" + mil);
-	document.getElementById("timefield").value=displayTime;
-}
-
-function loadOnlyFirst() {
-	document.zipForm.name.focus();
-}
-</script>
-</head>
-<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
-<h2>Order query</h2>
-
-<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
-<label for="timefield">Date and time:</label>
-<input type="text" id="timefield"><br>
-<label for="name">Name:</label>
-<input type="text" id="name"><br>
-<label for="address">Email address:</label>
-<input type="text" id="address"><br>
-<label for="order">Order number:</label>
-<input type="text" id="order"><br>
-<input type="submit" name="submit" value="Submit Query">
-</form>
-</body>
-</html>
-
- -

Im Gegensatz dazu: Wenn die vorherige Seite nicht auf das pageshow-Event hört und alle Berechnungen als Teil des load-Events verarbeitet werden (und anstelle des oberen Codes, der untere verwendet wird), wird die Cursor-Position und der Datum/Zeit-Stempel vom Firefox 1.5 zwischengespeichert, falls der Benutzer von der Seite weg navigiert. Kommt der Benutzer nun auf die Webseite zurück, wird der zwischengespeicherte Datum/Zeit-Stempel angezeigt.

- -
<script>
-function onLoad() {
-	loadOnlyFirst();
-
-//Berechne die aktuelle Zeit
-        var currentTime= new Date();
-	var year = currentTime.getFullYear();
-	var month = currentTime.getMonth()+1;
-	var day = currentTime.getDate();
-	var hour=currentTime.getHours();
-	var min=currentTime.getMinutes();
-	var sec=currentTime.getSeconds();
-	var mil=currentTime.getMilliseconds();
-	var displayTime = (month + "/" + day + "/" + year + " " +
-		hour + ":" + min + ":" + sec + ":" + mil);
-	document.getElementById("timefield").value=displayTime;
-}
-
-function loadOnlyFirst() {
-	document.zipForm.name.focus();
-}
-</script>
-</head>
-
-<body onload="onLoad();">
-
- -

Entwicklung von Firefox Erweiterungen

- -

Firefox 1.5 Erweiterungen müssen diese Zwischenspeicher Funktionalität unterstützen. Falls Sie eine Erweiterung für den Firefox entwickeln, welche kompatibel zu 1.5 und früheren Versionen sein soll, achten Sie darauf, dass Funktionen des onload-Events nur bei Seiten verwendet werden, die zwischengespeichert werden können und Funktionen des pageshow-Events benutzen, bei denen kein Cache verwendet werden soll.

- -

Zum Beispiel sollte die Google-Toolbar für den Firefox bei der autolink-Funktion auf das onload-Event reagieren und für die PageRank-Funktion mit dem pageshow-Event arbeiten, um kompatibel zu allen Firefox-Versionen zu sein.

diff --git a/files/de/mozilla/firefox/releases/27/index.html b/files/de/mozilla/firefox/releases/27/index.html deleted file mode 100644 index c5fd288e6e1a7f..00000000000000 --- a/files/de/mozilla/firefox/releases/27/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Firefox 27 für Entwickler -slug: Mozilla/Firefox/Releases/27 -tags: - - Firefox -translation_of: Mozilla/Firefox/Releases/27 ---- -
{{FirefoxSidebar}}
- -

Möchten Sie helfen Firefox 27 zu dokumentieren? Schauen Sie auf die Liste von Bugs, über die geschrieben werden sollte und schreibe Sie dazu.

- -

Änderungen für Web-Entwickler

- -

HTML

- -

Keine Änderung.

- -

CSS

- -
    -
  • Die Element grab und grabbing der Eigenschaft {{cssxref("cursor")}} sind nunmehr ohne Präfix (-moz-grab und -moz-grabbing).
    • -
- -

JavaScript

- -

EcmaScript 6 (Harmony) Implementierung wird fortgeführt!

- -
    -
  • Der Harmony Spread Operator ist nun in der Funktion calls verfügbar. ({{bug("762363")}})
    • -
- -

Interfaces/APIs/DOM

- -

Keine Änderung.

- -

MathML

- -

Keine Änderung.

- -

SVG

- -

Keine Änderung.

- -

Veränderungen für AddOn- und Mozilla-Entwickler

- -
    -
  • Der downloads-indicator-Button wurde entfernt. Das Element downloads-button sollte nun verwendet werden. Wenn Sie prüfen möchten, dass es seine Overlay geladen hat, überprüfen Sie das indicator-Attribut auf diesen Button .
    • -
  • Das chrome://browser/skin/downloads/indicator.css-Stylesheet ist nicht länger in Firefox referenziert.
    • -
  • Seiten-Kompatibilität für Firefox 27
    • -
- -

Ältere Versionen

- -

{{Firefox_for_developers('26')}}

diff --git a/files/de/mozilla/firefox/releases/3.5/index.html b/files/de/mozilla/firefox/releases/3.5/index.html deleted file mode 100644 index fd9b193a954fae..00000000000000 --- a/files/de/mozilla/firefox/releases/3.5/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Firefox_3.5_für_Entwickler -slug: Mozilla/Firefox/Releases/3.5 -tags: - - Firefox 3.5 - - Gecko 1.9.1 -translation_of: Mozilla/Firefox/Releases/3.5 -original_slug: Firefox_3.5_für_Entwickler ---- -
{{FirefoxSidebar}}

In Firefox 3.5 wurde eine nicht geringe Zahl an neuen Bestandteilen eingeführt, darunter zusätzliche und verbesserte Unterstützung für eine Vielzahl von Webstandards. Dieser Artikel stellt eine umfangreiche Liste mit Links zu anderen Artikeln über die Hauptverbesserungen zur Verfügung.

- -

Neue Bestandteile in Firefox 3.5 für Entwickler

- -

Für Webseiten und Webanwendungsentwickler

- -

HTML5-Unterstützung

- -
-
Audio- und Video-Elemente
-
Firefox 3.5 fügt Unterstützung für die HTML 5 audio und video-Elemente hinzu.
-
Offline-Resourcen
-
Firefox 3.5 unterstützt nun vollständig die HTML5 „Offline-Resources“ Spezifikation.
-
Drag und Drop
-
Die HTML5 Drag und Drop API bietet Unterstützung für Drag und Drop von Elementen innerhalb einer Webseite und zwischen verschiedenen Webseiten. Dies beinhaltet auch eine einfachere API für die Benutzung von Erweiterungen und Mozilla-basierten Anwendungen.
-
- -

Neu unterstütze CSS Funktionen

- -
-
Unterstützung für ladbare Schriftarten
-
Die neue {{ cssxref("@font-face") }} @-Regel ermöglicht es Webseiten, ladbare Schriftarten zu enthalten, sodass die Seiten genauso gerendert werden können, wie es der Autor der Seite es erwartet.
-
CSS Media Queries
-
Firefox 3.5 unterstützt nun CSS Medienanfragen, die die Unterstützung für medienabhängige Seiten verbessern.
-
{{ cssxref(":before") }} und {{ cssxref(":after") }} auf CSS 2.1 aktualisiert
-
Die :before und :after Pseudo-Elemente wurden auf volle CSS-2.1-Unterstützung aktualisiert; hinzugefügte Unterstützung für position, float, list-style-*, und einige display-Eigenschaften.
-
ch Einheit für Längenangaben
-
Die ch Einheit könn jetzt überall dort, wo eine Länge angegeben werden kann, verwendet werden. 1ch entspricht der Länge des »0« (Null) Zeichens.
-
opacity
-
Die -moz-opacity Mozilla CSS Erweiterung wurde zu Gunsten der standardisierten opacity-Eigenschaft entfernt.
-
text-shadow
-
Die text-shadow-Eigenschaft, die es Webinhalten erlaubt Schatteneffekte auf Text und Text-Dekorationen festzulegen, wird nun unterstützt.
-
word-wrap
-
Diese neu unterstützte Eigenschaft erlaubt es, festzulegen, ob Zeilen innerhalb von Worten umgebrochen werden dürfen. Das kann nützlich sein, wenn die Wörter aufgrund ihrer Länge sonst zum Überlauf führen.
-
Die white-space Eingeschaft unterstützt den pre-line Wert
-
Die {{ cssxref("white-space") }} Eigenschaft akzeptiert nun den pre-linie Wert.
-
Firefox 3.5 fügt die folgenden Mozilla CSS Eingenschaften ein:
-
-moz-box-shadow
- -moz-border-image
- -moz-column-rule
- -moz-column-rule-width
- -moz-column-rule-style
- -moz-column-rule-color -
-
Pseudo-Klasse -moz-window-shadow und Eigenschaft -moz-system-metric(mac-graphite-theme)
-
Diese neuen CSS-Eigenschaften wurden hinzugefügt, um das die Arbeit mit Themes zu erleichtern.
-
Neue Werte für -moz-appearance
-
-moz-win-glass und -moz-mac-unified-toolbar wurden als Werte zu -moz-appearance hinzugefügt.
-
Verwendung von CSS-Transformationen
-
Firefox 3.5 unterstützt CSS-Transformationen. Siehe -moz-transform und -moz-transform-origin für Details.
-
Diese Selektoren werden in Firefox 3.5 neu unterstützt:
-
:nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-of-type
- :last-of-type
- :only-of-type
-
- -

Neue DOM Funktionen

- -
-
localStorage
-
Firefox 3.5 fügt Unterstützung für die Web Storage localStorage Eigenschaft hinzu, welche einen Weg für Webanwendungen bereitstellt, Daten lokal auf dem Computer des Benutzers zu speichern.
-
Verwendung von Web Workers
-
Firefox 3.5 unterstützt Web Workers, um einfaches Multi-Threading in Webanwendungen zu ermöglichen.
-
Verwendung von Geolocation
-
Firefox 3.5 unterstützt die Geolocation API, die es Webanwendungen erlaubt, Informationen über die aktuelle Position des Benutzers zu erhalten, wenn ein Provider für diese Informationen installiert und aktiviert ist.
-
Mit Selektoren DOM Elemente auswählen
-
Die Selektoren-API erlaubt es, ein Dokument nach Elementen, die einer bestimmten Auswahlregel gerecht werden, abzufragen.
-
Mausgesten Events
-
Firefox 3.5 unterstützt Mausgesten Events wie z.B. »Trackpad-Swipes«.
-
Das NodeIterator Objekt
-
Das NodeIterator Objekt bietet Unterstützung für das iterieren über eine Liste von Knoten in einem DOM-Unterbaum.
-
Das MozAfterPaint Event
-
Dieses neue DOM-Event wird nach Painting-Aktualisierungen in Fenstern ausgelöst.
-
Das MozMousePixelScroll Event
-
Dieses neue DOM-Event erlaubt die Erkennung von pixel-basierten Mausrad-Events anstatt von zeilenbasierten Scroll-Events.
-
- -

Neue JavaScript Funktionen

- -
-
Neues in JavaScript
-
Ein Überblick über die Veränderungen in JavaScript 1.8.1
-
Object.getPrototypeOf()
-
Diese Methode gibt einen Prototyp eines bestimmten Objektes zurück.
-
Verwendung von nativen JSON
-
Firefox 3.5 besitzt nun nativen JSON-Support.
-
Neue Trim-Methoden für das String-Objekt
-
Das String-Objekt besitzt nun die Methoden trim(), trimLeft(), und trimRight().
-
- -

Netzwerk

- -
-
Cross-Site-Zugriff für HTTP
-
In Firefox 3.5 ist es nun möglich, über Domaingrenzen hinweg zu arbeiten, auch wenn der HTTP-Request über das XMLHttpRequest gestartet wurde, vorrausgesetzt, der Server unterstützt dieses.
-
Progress-Events für XMLHttpRequest
-
Progress-Events werden dazu bereitgestellt, um Erweiterungen zu befähigen, den Fortschritt der Requests zu überwachen.
-
Verbesserte Unterstützung für synchrones XMLHttpRequest
-
DOM Timeout und Input Events werden nun während eines synchronen XMLHttpRequest unterdrückt.
-
DNS-Prefetching_überwachen
-
Firefox 3.5 stellt DNS-Prefetching zur Verfügung, wobei es die Namensauflösung für Domains vor der Zeit für die Links durchführt, was Zeit spart, wenn die Links aufgerufen werden. Dieser Artikel beschreibt wie Sie Ihre Webseite mit Prefetching-Operationen aufpeppeln können.
-
- -

Neue Canvas Funktionen

- -
-
HTML5 Text-API für canvas-Elemente
-
Canvas-Elemente unterstützten nun die HTML5 Text-API.
-
Schatteneffekte innerhalb eines canvas
-
Schatteneffekte für canvas-Elemente werden nun unterstützt.
-
createImageData()
-
Die Canvas-Methode createImageData() wird nun unterstützt. Sie erlaubt es ein ImageData-Objekt zu erzeugen anstatt es automatisch erzeugen zu lassen. Dies kann die Geschwindigkeit anderer ImageData-Methoden steigern, da sie ja kein Objekt mehr erzeugen müssen.
-
moz-opaque-Attribut
-
Dieses Attribut lässt das Canvas wissen, ob Transparenz ein Faktor sein wird oder nicht. Mit diesem Wissen wird die Geschwindigkeit gesteigert.
-
- -

Neue SVG-Bestandteile

- -
-
SVG Effekte auf HTML/XHTML anwenden
-
SVG Effekte können nun auf HTML bzw. XHTML angewandt werden.
-
- -

Sonstige neue Funktionen

- -
-
ICC Farbkorrektur
-
Firefox 3.5 unterstützt nun ICC-Farbkorrektur für "getaggte" Bilder.
-
defer-Attribut Unterstützung für script-Elemente
-
Dieses Attribut weist den Browser an, dass die Verarbeitung der Seite fortgesetzt werden soll, obwohl das Skript noch nicht fertig ausgeführt wurde.
-
- -

Anderweitige Verbesserungen

- -
    -
  • Die Textknoten-Eigenschaften wholeText und replaceWholeText() wurden implementiert.
    • -
  • Die Eigenschaft element.children wurde hinzugefügt. Es gibt eine Sammlung mit den Kindelementen des gegebenen Elementes zurück.
    • -
  • Die Eigenschaft element.contentEditable wird von nun an unterstützt, um editierbare Elemente zu ermöglichen.
    • -
  • Die Element Traversal API wird nun vom DOM Element-Objekt unterstützt.
    • -
  • HTML-Knoten können nun per cloneNode() geklont werden.
    • -
  • Die nichtstandardkonforme Methode getBoxObjectFor() aus dem DOM wurde zu Gunsten von getBoundingClientRect() ersetzt.
    • -
  • Versandte DOM-Events können nun re-versandt werden. Dadurch kann der Acid 3 Test 30 bestanden werden.
    • -
  • Am DOM 2 Range Handling wurden Verbesserungen vorgenommen.
    • -
  • Im nicht-chrome Anwendungsbereich, sind abgefangene Objekte in Exceptions die tätsächlichen Objekte, anstatt eines XPConnect Wrappers außerhalb des abgefangenen Objekts.
    • -
  • SVG ID Referenzen sind jetzt live.
    • -
  • SVG-Filter arbeiten nun auch mit foreignObject.
    • -
  • Die GetSVGDocument()-Methode wurde aus Gründen der Kompatibilität zu object und iframe-Elementen hinzugefügt.
    • -
  • Implizite Einstellungen von Eigenschaften in Objekt- und Array-Initialisierern führen nicht mehr Setter in JavaScript aus. Siehe dazu:Object and array initializers should not invoke setters when evaluated for details.
    • -
  • Die gDownloadLastDir.path-Variable wurde umbenannt zu: gDownloadLastDir.file, da es sich nun auf eine nsIFile bezieht.
    • -
  • Die gDownloadLastDirPath-Variable wurde umbenannt zu: gDownloadLastDirFile, da es sich nun auf eine nsIFile bezieht.
    • -
  • Ab Firefox 3.5 können keine data: Bindings in chrome Paketen, die XPCNativeWrapper Automation abrufen, mehr verwendet werden.
    • -
- -

Für XUL und Addon-Entwickler

- -

Wenn Sie ein Addon-Entwickler sind, sollten sie das Dokument Erweiterungen für Firefox 3.5 aktualisieren unbedingt lesen. Diese beinhaltet einen extrem hilfreichen Überblick über das, was geändert wurde und Ihre Erweiterung betrifft oder betreffen könnte.

- -

Neue Komponenten und Funktionalitäten

- -
-
Erweiterungen im „Private-Browsing“-Modus
-
Firefox 3.5 bietet nun den „Private-Browsing“-Modus an, sodass keine Aufzeichnungen über die Aktivität des Benutzer gemacht werden. Erweiterungen können Private-Browsing anhand der in diesem Artikeln beschriebenen Methoden unterstützen.
-
Sicherheitsverbesserungen in Firefox 3.5
-
Dieser Artikel beschreibt sicherheitsrelevante Verbesserungen in Firefox 3.5
-
Theme Verbesserungen in Firefox 3.5
-
Dieser Artikel beschreibt Themes betreffende Verbesserungen in Firefox 3.5
-
Überwachen von WiFi-Zugriffspunkte
-
Code mit UniversalXPConnect-Priviligien kann nun die Liste der verfügbaren Access Points überwachen, Informationen über deren SSIDs, Mac-Adressen und Signalstärke erhaltend. Dies kann zusammen mit der Geolocation für die Bereitstellung von WiFi-basierten Location Services genutzt werden.
-
- -

Bemerkenswerte Veränderungen und Verbesserungen

- -
    -
  • Das XUL textbox-Widget bietet nun ein search-Typ für die Benutzung als Suchfeld an.
    • -
  • Um Drag and Drop zwischen Fenster zu unterstützen, bietet das browser-Widget nun eine swapDocShells()-Methode an.
    • -
  • Das level Attribut wurde zum panel Element hinzugefügt. Dieses Attribut legt fest, ob das Panel überhalb anderer Anwendungen steht oder einfach überhalb des Fensters indem sich das Panel befindet.
    • -
  • XUL-Elemente unterstützen nun die clientHeight, clientWidth, scrollHeightund scrollWidthEigenschaften.
    • -
  • keysets beinhalteten nun ein disabled-Attribut.
    • -
  • Außerdem können keysets nun dank der removeChild() Methode des Knotens entfernt werden.
    • -
  • Die initialize()-Methode aus mozIStorageStatement wurde entfernt. An ihrer Stelle sollte nun createStatement() benutzt werde.
    • -
  • Die Storage API unterstützt nun asynchrone Requests.
    • -
  • Die nsICookie2-Schnittstelle besitzt nun das neue creationTime Attribut. Damit lässt sich der Erstellungszeitpunkt eines Cookies feststellen.
    • -
  • Zu nsIProtocolHandler wurde ein Flag (URI_IS_LOCAL_RESOURCE) hinzugefügt, das während der Chrome-Registrierung für die Überprüfung, ob einem Protokoll erlaubt ist, registriert zu werden, verwendet wird.
    • -
  • Unter Linux sieht Firefox auch in /usr/lib/mozilla/plugins nach Plugins nach.
    • -
  • Die Plugin-API wurde für die Unterstützung des „Private-Browsing“-Modus aktualisiert. Es kann nun NPN_GetValue() verwendet wurden, um den Status des „Private-Browsing“-Modus mit der Variable NPNVprivateModeBool abzufragen.
    • -
- -

Neue Funktionen für Endbenutzer

- -

User Experience

- -
-
„Dem Ort gerechtes Surfen“
-
Wenn erwünscht, können Webseiten Informationen über die aktuelle Geoposition des Benutzers erhalten. Um den Datenschutz nicht zu verletzen werden sie selbstverständlich gefragt bevor soetwas getan wird.
-
Offene Audio- und Video-Unterstützung
-
Firefox 3.5 unterstützt eingebettetes Audio und Video dank des offenen Ogg-Formates und WAV-Formates für Audio. Keine Plugins, keine verwirrende Fehlermeldungen, dass irgendetwas installiert werden müsse oder, das dass dieses oder jenes für Ihre Plattform nicht verfügbar sei.
-
Lokaler Datenspeicher
-
Webanwendungen können nun die Fähigkeit des lokalen Speichers ausnutzen, um Daten auf Ihrem Computer zu speichern. Dies ist hervorragend und kann von einfachen Seiteneinstellungen bis zu komplexeren Daten eingesetzt werden.
-
- -

Sicherheit und Datenschutz

- -
-
Privates Browsing
-
Sie müssen eines anderen Browser benutzen? Wechseln sie auf „Privater Modus“ und nichts wird über sie erhalten bleiben, keine Sitzungsdaten, keine Cookies, keine Chronik oder irgendwelche anderen potentiell privaten Informationen.
-
Bessere Kontrolle über den Datenschutz
-
Die Systemeinstellungen für den Datenschutz wurden komplett neu entworfen, sodass sie nun mehr Kontrolle über den Datenschutz haben. Die Benutzer können auswählen, ob sie irgendetwas behalten oder wegewerfen wollen, miteinbezogen die Chronik, Chronikinformationen, Cookies, Downloads und Formfeld-Informationen. Außerdem kann der Benutzer auswählen, ob die Chronik und/oder Lesezeichen in den Vorschlägen der Locationbar auftauchen sollen oder nicht.
-
- -

Performance

- -
-
Schnelleres JavaScript
-
Die Geschwindigkeit von JavaScript, das "J" aus dem "AJAX," wurde in Firefox 3.5 dank des neuen TraceMonkey JavaScript-Engines extrem erhöht. Dadurch werden Webanwendung um ein Vielfaches schneller ausgeführt als noch in Firefox 3.
-
Schnelleres Seiten-Rendering
-
Webinhalte werden in Firefox 3.5 dank Technologien wie z.B. »speculative parsing« deutlich schneller gezeichnet. Man muss nicht wissen, was das heißen soll. Es ist einfach viel schneller.
-
- -

Siehe auch

- - -
-
diff --git a/files/de/mozilla/firefox/releases/3/index.html b/files/de/mozilla/firefox/releases/3/index.html deleted file mode 100644 index cfc9183ae3f2ad..00000000000000 --- a/files/de/mozilla/firefox/releases/3/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Firefox 3 für Entwickler -slug: Mozilla/Firefox/Releases/3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3 -original_slug: Firefox_3_für_Entwickler ---- -
{{FirefoxSidebar}}

Wenn Sie als Entwickler versuchen mit den neuen Funktionen in Firefox 3 umzugehen, ist dies der perfekte Ort, um zu beginnen. Dieser Seite liefert eine Liste der neuen Artikel, die die in Firefox 3 neu hinzugekommenen Funktionen erläutern. Es wird sicher nicht jede kleine Änderung erfasst werden können, allerdings hilft werden die hauptsächlichen Verbesserungen in Firefox 3 vorgestellt.

- -

Neue Bestandteile in Firefox 3 für Entwickler

- -

Für Webseiten und Anwendungsentwickler

- -
-
Aktualisierung von Webanwendungen für Firefox 3
-
Dieser Artikel beinhaltet Informationen über Veränderungen, die Sie kennen sollten, wenn Sie die neuen Funktionen in Firefox 3 für Ihre Webseite und Webanwendung ausnutzen wollen.
-
Online- und Offline-Events
-
Firefox 3 unterstützt WHATWG Online- und Offline-Events, die Anwendungen und Erweiterungen erkennen lassen, ob eine aktive Internetverbindung besteht oder nicht und genauso erkennen lassen, wenn die Verbindung hoch oder runter geht.
-
Web-basierende Protokollroutinen
-
Sie können nun Webanwendungen als Protokollroutinen mit der navigator.registerProtocolHandler() Methode verwenden.
-
Zeichnen von Text mit Canvas
-
Es ist nun möglich, Text in einem Canvas mit einer nicht-standardisierten API zu schreiben.
-
Transform-Unterstützung für Canvas
-
Firefox unterstützt die transform() und setTransform()-Methoden für Canvas.
-
Benutzung von Mikroformaten
-
Firefox besitzt nun eine API für das Arbeiten mit Mikroformaten.
-
Drag und Drop-Ereignisse
-
Firefox 3 unterstützt neue Ereignisse, die zu dem Ursprungsknoten einer Drag-Operation gesendet werden, sobald die Drag-Operation beginnt und aufhört.
-
Fokus-Management in HTML
-
Das neue HTML 5 activeElement und hasFocus-Attribut wird unterstützt.
-
Offline-Ressourcen
-
Firefox ermöglicht Anwendungen nun das Zwischenspeichern von Ressourcen, damit die Anwendung offline verwendet werden kann.
-
CSS-Verbesserungen in Firefox 3
-
Firefox 3 beinhaltet eine nicht geringe Zahl an Verbesserungen, was die CSS-Unterstützung angeht.
-
DOM-Verbesserungen in Firefox 3
-
Firefox 3 bietet eine nicht geringe Anzahl an neuen Bestandteilen in der DOM-Implementierung an, darunter Unterstützung für mehrere Erweiterungen für den für Internet Explorer für das DOM.
-
JavaScript 1.8 Unterstützung
-
Firefox 3 stellt Unterstützung für JavaScript zur Verfügung.
-
EXSLT Unterstützung
-
Firefox 3 beinhaltet Unterstützung für einen wesentlichen Teil der EXSLT-Erweiterungen zu XSLT.
-
SVG-Verbesserungen in Firefox 3
-
Die SVG-Unterstützung wurde signifikant verbessert, darunter Unterstützung für über zwei Dutzend neue Filter, mehrere neue Elemente und Attribute und andere Verbesserungen.
-
Animierte PNG-Grafiken
-
Firefox 3 bietet Unterstützung für das Format für animiertes PNG (APNG) an.
-
- -

Für XUL- und Erweiterungsentwickler.

- -
Wesentliche Änderungen und Verbesserungen
- -
-
Erweiterungen für Firefox 3 aktualisieren
-
Bietet einen Leitfaden für das, was Sie tun müssen, um Ihre Erweiterung für die Arbeit mit Firefox 3 fähig zu machen.
-
XUL-Verbesserungen
-
Firefox 3 bietet eine Vielzahl von neuen XUL Elementen, darunter neue Schieberegler, Datum- und Zeitwähler und Dreh-Buttons
-
Templates in Firefox 3
-
Templates wurden mit Firefox 3 stark verbessert. Die Schlüsselverbesserung ist die Verwendung von benutzerdefinierten Query-Processors als Datenquelle neben RDF.
-
Sichheitsupdates
-
Um sichere Add-ons bereitzustellen, wird nun eine Sicherheitsmethode gebraucht, bevor diese installiert werden können. Add-ons, die auf AMO bereitgestellt werden, verfügen automatisch darüber. Jedes installierte Add-on, das nicht darüber verfügt, wird bei der Aktualisierung auf Firefox 3 automatisch deaktiviert. Firefox wird jedoch weiterhin auf Updates der Erweiterung über den unsicheren Pfad überprüfen und versuchen die neue Version zu installieren (Die Installation schlägt fehl, wenn auch in der neuen Version keine sichere Aktualisierungsmethode angeboten wird).
-
Places Entwicklerbuch
-
Ein Artikel über die Aktualisierung einer Anwendung zur Verwendung der Places API.
-
Download-Manager Verbesserungen in Firefox 3
-
Der Firefox 3 Download-Manager verfügt nun über eine neue und verbesserte API mit Unterstützung von mehreren Fortschritts-Listener.
-
Verwendung von nsILoginManager
-
Der Password-Manager wurde vom neuen Login-Manager ersetzt.
-
XBL bindings
-
Es können jetzt data: URL Schemata verwendet werden, um XBL bindings direkt einzubinden.
-
Lokalisierung von Erweiterungsbeschreibungen
-
Firefox 3 bietet eine neue Methode zur Lokalisierung von Add-on Metadaten. Damit werden lokalisierte Details verfügbar, sobald das Add-on heruntergeladen wird und wenn es deaktiviert wird
-
Lokalisierung und Mehrzahlen
-
Firefox 3 fügt ein neues PluralForm Modul hinzu, welches das richtige Werkzeug für korrekte Mehrzahlen in Lokalisierungen bereitstellt.
-
Theme Änderungen in Firefox 3
-
Hinweise und Informationen zur Verwendung und Erstellung von Themes für Firefox 3.
-
- -
Neue Komponenten und Funktionalitäten
- -
-
FUEL Library
-
FUEL wird es Erweiterungsentwicklern leichter machen produktiv zu arbeiten, indem die XPCOM Formalitäten verkleinert werden und einige "moderne" JavaScript Ideen hinzugefügt werden.
-
Places
-
Die Verlaufs- und Lesezeichen-Schnitstelle wurde komplett durch die Places API ersetzt.
-
Idle Service
-
Firefox 3 bietet das neue nsIIdleService Interface, welches Erweiterungen bestimmen lässt wie lange es her ist, dass ein Benutzer zu letzt eine Taste gedrükt oder die Maus bewegt hat.
-
ZIP Writer
-
Das neue nsIZipWriter Interface ermöglicht die Erstellung von ZIP Archiven.
-
Vollbild-Zoom
-
Firefox 3 bietet einen Vollbild-Zoom neben dem Text-only Zoom an.
-
Interfacing mit dem XPCOM Cycle-Collector
-
XPCOM Code kann nun Vorteile des Cycle-Collectors nutzen, welcher dabei hilft, das nicht verwendeter Speicher freigegeben wird.
-
Der Thread-Manager
-
Firefox 3 stellt das neue nsIThreadManager Interface bereit, mit neuen Schnittstellen für Threads und Thread-Ereignisse, welche zur Erstellung und Verwaltung von Threads im Code dienen.
-
JavaScript Module
-
Firefox 3 bietet nun die Möglichkeit zur Erstellung von Modulen in JavaScript, die von Erweiterungen und Anwendungen zur Verwendung geladen werden können, ähnliche wie gemeinsam genutzte Bibliotheken.
-
Das nsIJSON Interface
-
Firefox 3 stellt das neue nsIJSON Interface bereit, welches high-performance Encoding und Decoding von JSON Strings ermöglicht.
-
Das nsIParentalControlsService Interface
-
Firefox 3 unterstützt nun die Microsoft Windows Vista "Parental Control" Funktion, und ermöglicht dem Code damit zu interagieren.
-
Verwendung von Inhaltseinstellungen
-
Firefox 3 enthält einen neuen Dienst zum Setzen und Abrufen von willkürlichen Seiten-spezifischen Einstellungen, die Erweiterungen genau wie Kerncode verwenden können, um auf die Benutzereinstellungen für individuelle Seiten Rücksicht zu nehmen.
-
Plug-ins überwachen
-
Eine neue Komponente des Plugin-System ist nun verfügbar, um festzustellen wie lange Plug-ins (z.B. Macromedia Flash) brauchen, um ihre Anfragen auszuführen.
-
- -
Behobene Fehler
- -
-
Behobene Fehler in Firefox 3
-
Dieser Artikel bietet Informationen über Bugs, die in Firefox 3 behoben wurden und nennenswert sind.
-
- -

Neue Bestandteile für den Endbenutzer

- -

User Experience.

- -
    -
  • Einfacheres Passwort-Management. Eine Informationsleiste oben im Browser-Fenster ermöglicht Ihnen Passwörter nach einem erfolgreichen Login zu speichern.
    • -
  • Vereinfachte Add-on installation. Sie können nun Erweiterungen von Drittanbieter-Seiten schnell downloaden, dank der Entfernung der Add-on Downloadseiten Whiteliste.
    • -
  • Neuer Download-Manager. Der Download-Manager macht es einfacher Ihre heruntergeladenen Dateien aufzufinden.
    • -
  • Downloads fortführen. Sie können nun Downloads nach dem Browser-Neustart oder dem Reset der Netzwerkverbindung wieder aufnehmen.
    • -
  • Voller Seitenzoom. Aus dem Ansichtmenü und über Tastatur-Shortcuts können Sie nun rein und raus zoomen und dabei die gesamte Seite skalieren, mit Bildern und dem Layout der Seite.
    • -
  • Tab-Scrolling und Schnellmenü. Tabs sind einfacher zu bedienen mit den neuen Funktionen zum Scrollen un dem Tab-Schnellmenü.
    • -
  • Speichern Sie, was Sie gemacht haben. Firefox 3 fragt Sie beim Beenden, ob Sie Ihre Tabs speichern wollen, bevor Sie die Sitzung schließen.
    • -
  • Optimiertes Öffnen in Tabs Verhalten. Wird ein Lesezeichenverzeichnis geöffnet, wird der aktuelle Tab beibehalten und neue Tabs mit den entprechenden Seiten werden geöffnet.
    • -
  • Einfache Größenänderung an URL- und Suchleiste. Die beiden Leisten können nun einfach mit einem Klick dazwischen geändert werden.
    • -
  • Textauswahl Verbesserungen. Sie können nun mehrere Textbereiche mit der Strg-Taste (bzw. Command auf Macintosh) auswählen. Doppelklick wählt den "wort-für-wort" Modus. Dreifach-Klick wählt den gesamten Absatz aus.
    • -
  • Find Toolbar. Die Find Toolbar öffnet sich mit der aktuellen Auswahl.
    • -
  • Plugin Management. Benutzer können nun einzelne Plugins im Add-on Manager deaktivieren.
    • -
  • Integration mit Windows Vista. Menüs unter Firefox zeigen nun das native Vista Theme an.
    • -
  • Integration mit Mac OS X. Firefox unterstützt nun Growl für Hinweise zu fertiggestellten Downloads und verfügbaren Updates.
    • -
  • Stern Button. Mit dem neuen Stern in der URL-Leiste können schnell neue Lesezeichen mit einem einzigen Klick hinzugefügt werden. Ein zweiter Klick lässt Sie Ihr Lesezeichen bearbeiten.
    • -
  • Schlagwörter. Sie können jetzt Schlagwörter zu Ihren Lesezeichen zuordnen, um Sie einfach zu sortieren.
    • -
  • URL-Leiste und Auto-Vervollständigung. Tippen Sie den Titel oder ein Schlagwort einer Seiten in die URL-Leiste, um schnell zur gesuchten Seite zu wechseln, die Sie im Verlauf oder in den Lesezeichen gespeichert haben. Favicons, Lesezeichen und Tags helfen zu sehen, woher die Seite kommt.
    • -
  • Ordner für Lesezeichen. Lesezeichen können nun in Ordnern organisiert werden, um Ihre gespeicherten Lesezeichen schnell zu finden.
    • -
  • Lesezeichen- und Verlaufsmanager. Der neue, vereinte Lesezeichen- und Verlaufsmanager ermöglicht einfache Suchen durch die Lesezeichen sowie dem Verlauf. Durch Ordner können sogar Suchdurchgänge gespeichert werden.
    • -
  • Web-basierende Protokollroutinen. Webanwendungen, wie Ihr Webmail Anbieter, können nun verwendet werden, anstatt wie bisher ein Desktop-Programm, dass ausschließlich mailto: Links von anderen Seiten aufrufen konnte. Gleiches gilt für andere Protokolle ebenso (Webanwendungen müssen erst registriert sein, bevor sie mit Firefox zusammenarbeiten können).
    • -
  • Einfache Download-Aktionen. Ein neues Einstellungsfeld bietet eine verbesserte Benutzeroberfläche zur Konfiguration von unterschiedlichen Dateitypen und Protokoll-Schemata.
    • -
  • Verbessertes Aussehen und Verwendung. Grafiken und Schrift wurden verbessert, um Webseiten besser anzeigen zu können. Darunter schärferer Text und bessere Unterstützung für Schriften mit Ligaturen und komplexen Skripten. Außerdem werden Mac und Linux (Gnome) Benutzer merken, dass sich Firefox mehr als eine native Anwendung in das Betriebssystem einfügt.
    • -
  • Farbmanagement Unterstützung. In dem die Einstellung gfx.color_management.enabled in about:config aktiviert wird, kann Firefox das Farbprofil verwenden, das von Bildern verwendet wird, um die Farben auf den Bildschirm korrekt einzustellen.
    • -
  • Offline Unterstützung. Webanwendungen können die Vorteile der neuen Funktionen nutzen, wenn keine Internetverbindung aktiv ist.
    • -
- -

Sicherheit und Privatsphäre

- -
    -
  • Ein-Klick Seiteinformationen. Wollen Sie mehr über die Seiten erfahren, die Sie besucht haben? Klicken Sie auf das Seitenicon in der Location-Leiste, um zu sehen zu wem diese gehört. Informationen werden einfach zu verstehen angezeigt.
    • -
  • Malware Schutz. Firefox 3 warnt Sie, wenn Sie auf einer Webseite landen, die bekannt für Viren, Spyware, Trojaner oder anderer schädlicher Software ist. Sie können sehen wie diese Warnung aussieht, wenn Sie hier klicken.
    • -
  • Verbesserte Schutz vor Webfälschungen. Falls Sie eine Seite besuchen, die mutmaßlich eine Fälschung ist, wird eine spezielle Seite angezeigt, anstatt die Inhalte der Seite. Klicken Sie hier, um zu sehen wie eine solche Seite aussieht.
    • -
  • Einfachere SSL Fehlermeldungen. Die Fehler, die bei einem ungültigem SSL Zertifikat auftauchen wurden vereinfacht, sodass es einfacher ist das Problem zu verstehen.
    • -
  • Schutz vor veralteten Add-ons. Firefox 3 überprüft nun automatisch Add-on und Plugin Versionen und deaktiviert alte, unsichere Versionen.
    • -
  • Sichere Add-on Aktualisierung. Die Add-on Update-Sicherheit wurde verbessert, in dem Add-ons, die unsichere Update-Mechanismen verwenden deaktivieren werden.
    • -
  • Anti-Virus integration. Firefox 3 informiert nun Anti-Viren Software, wenn ausführbare Dateien heruntergeladen werden.
    • -
  • Windows Vista parental Control. Firefox 3 unterstützt unter Vista System-weite "parental control" Einstellungen zur Deaktivierung von Dateidownloads.
    • -
- -

Performance

- -
    -
  • Verlässiichkeit. Firefox 3 speichert Lesezeichen, Verlauf, Cookies und Einstellungen in einem sicheren Datenbankformat. Das bedeutet, dass Ihre Daten sicher vor Datenverlust ist, auch wenn Ihr System abstürzt.
    • -
  • Geschwindigkeit. Firefox 3 hat einen Performance Boost erhalten indem der Teil, der für das Zeichnen der Oberfläche verantwortlich ist, komplett ausgetauscht wurde.
    • -
  • Reduzierter Speicherverbrauch. Firefox 3 nutzt den Speicher effizienter aus als jemals zuvor, mit mehr als 300 behobenen Speicher "leak" Fehlern und neuen Funktionen, die automatisch Speicherlecks ausfindig machen und diese beseitigen.
    • -
- -

Siehe auch

- - diff --git a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html deleted file mode 100644 index 06469bc1b05e84..00000000000000 --- a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Erweiterungen für Firefox 3 aktualisieren -slug: Mozilla/Firefox/Releases/3/Updating_extensions -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_extensions -original_slug: Erweiterungen_für_Firefox_3_aktualisieren ---- -

Dieser Artikel liefert nützliche Informationen für Entwickler, die ihre Erweiterungen aktualisieren möchten, um eine einwandfreie Funktion unter Firefox 3 zu gewährleisten.

- -

Vorweg eine hilfreiche Anmerkung: Wenn die einzig notwendige Änderung an der Erweiterung der Eintrag maxVersion im Installationsmanifest ist und die Erweiterung auf addons.mozilla.org bereitgestellt wird, ist es nicht nötig eine neue Version der Erweiterung zu veröffentlichen. Im »Developer Control Panel« auf AMO kann die maxVersion, ohne einen neuen Upload, eingestellt werden. Dadurch kann auch vermieden werden, dass die Erweiterung nochmal überprüft werden muss.

- -

Schritt 1: Installationsmanifest aktualisieren

- -

Der erste Schritt - und für die meisten Erweiterungen der einzig Nötige - ist eine Aktualisierung der Installationsmanifestdatei, install.rdf, um die Erweiterung als Firefox 3 kompatibel zu kennzeichnen.

- -

Als erstes muss die Zeile zur Kennzeichnung der maximal kompatiblen Firefox-Version gefunden werden (welche für Firefox 2 so aussehen sollte):

- -
 <em:maxVersion>2.0.0.*</em:maxVersion>
-
- -

Um als Firefox 3 kompatibel zu gelten, reicht die folgende Änderung:

- -
 <em:maxVersion>3.0.*</em:maxVersion>
-
- -

Danach muss die Erweiterung neu installiert werden.

- -

Dabei sollte darauf geachtet werden, dass Firefox 3 keine extra ".0" in der Versionsnummer hat, anstatt "3.0.0.*, sollte nur "3.0.*" verwendet werden.

- -

Es gab (und es wird weiterhin welche geben) eine Reihe von API Veränderungen, die dazu führen, dass einige Erweiterungen nicht weiter funktionieren. Es wird an einer kompletten Liste gearbeitet, die diese Veränderungen aufzählt.

- -
Hinweis: Wenn die Erweiterung noch immer ein Install.js Skript, anstatt eines Installationsmanifests benutzt, sollte ein Wechsel jetzt getätigt werden. Firefox 3 unterstützt keine install.js Skripte in XPI Dateien mehr.
- -

Das Installationsmanifest lokalisieren

- -

Firefox 3 führt neue Eigenschaften ein, um lokalisierte Beschreibungen zu ermöglichen. Die alte Methode funktioniert nach wie vor, auch wenn die neue Firefox-Version erlaubt, sogar dann die lokalisierten Sprachdaten zu nutzen, wenn die Erweiterung deaktiviert oder noch zur Installation vorgesehen ist.

- -

Schritt 2: Sichere Updates zur Verfügung stellen

- -

Falls die Erweiterungen selbst bereitgestellt wird und nicht bei addons.mozilla.org angeboten wird, müssen sichere Updates selbst verwaltet werden. Dazu können die Updates entweder über eine SSL Webseite angeboten werden oder die Updates werden mit einem Kryptographieschlüssel signiert. Weitere Informationen dazu unter: Sichere Updates.

- -

Schritt 3: Mit geänderten APIs umgehen

- -

Mehrere APIs haben sich erheblich geändert. Die wichtigsten davon, die sich auf viele Erweiterungen auswirken, sind:

- -

DOM

- - -

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.

- -

Lesezeichen & Chronik

- -

Falls die Erweiterung in irgendeiner Art auf Lesezeichen oder die Chronik zugreift, sind umfangreichere Änderungen nötig, um die Kompatibilität mit Firefox 3 zu gewährleisten. Die alte API zum Zugriff auf diese Informationen wurde durch die neue Places Architektur ersetzt. Im Leitfaden zur Places Migration finden sich dazu weitere Details, auch wie die bestehende Erweiterung auf die »Places« API aktualisiert werden kann.

- -

Download-Manager

- -

Die Download-Manager API hat sich durch den Wechsel vom RDF Datenspeicher zur Storage API ein wenig geändert. Der Wechsel sollte relativ einfach durchzuführen sein. Außerdem hat sich die API zum Überwachen des Downloadfortschritts geändert, um mehrere Download-Manager Listeners zu unterstützen. Unter nsIDownloadManager, nsIDownloadProgressListener und Downloads überwachen sind weitere Informationen verfügbar.

- -

Passwort-Manager

- -

Wenn die Erweiterung den Passwort-Manager benutzt, um auf Anmeldeinformationen zuzugreifen muss die Erweiterung auf die neue Login Manager API umgestellt werden.

- -
    -
  • Der Artikel Verwendung von nsILoginManager enthält Beispiele. Darunter findet sich auch eine Demo wie die Erweiterung sowohl den Passwort-Manager als auch den Login-Manager benutzen kann. Dadurch kann die Erweiterung von Firefox 3 und von früheren Versionen genutzt werden.
    • -
  • nsILoginInfo
    • -
  • nsILoginManager
    • -
- -

Es kann aber auch der integrierte Speicher des Passwort-Managers überschrieben werden, falls eine eigene Implementierung in der Erweiterung angeboten werden soll. Weitere Details unter Ein Login-Manager Speichermodul erstellen.

- -

Popups (Menü, Kontextmenü, Tooltips und Eingabefelder)

- -

Das XUL Popup-System wurde im Firefox 3 stark verändert. Das Popup-System umfasst Hauptmenüs, Kontextmenüs und Popup Eingabefelder. Der Artikel zu Popups beschreibt detailliert wie das System funktioniert. Zu beachten ist außerdem, dass popup.showPopup zugunsten von popup.openPopup und popup.openPopupAtScreen als veraltet gekennzeichnet wurde.

- -

Autovervollständigung

- -

Die handleEnter() Methode im nsIAutoCompleteController Interface wurde um ein Argument erweitert. Dieses kennzeichnet, ob der abgesendete Text im Autovervollständigungspopup ausgewählt wurde oder, ob der Benutzer nach seiner Eingabe »Enter« gedrückt hat.

- -

DOMParser

- -
    -
  • Wenn ein DOMParser instanziiert wird, erbt er das vom aufrufenden Code repräsentierte Dokument sowie documentURI und baseURI des aufrufenden Fensters.
    • -
  • Hat der Aufrufende Code UniversalXPConnect Privilegien, kann er Parameter an new DOMParser() übergeben. Werden weniger als drei Parameter übergeben werden die übrig gebliebenen standardmäßig mit null belegt. -
      -
    • Der erste Parameter ist das zu parsende Dokument und überschreibt den für gewöhnlich geerbten Standardwert.
      • -
    • Der zweite Parameter enthält documentURI.
      • -
    • Der dritte Parameter enthält baseURI.
      • -
    -
    • -
  • Falls ein DOMParser durch einen Auftrag aufgerufen wird, wie z.B. durch createInstance(), nicht die init() Methode des DOM-Parsers aufgerufen wird und versucht wird eine Parseroperation zu starten, wird der DOMParser automatisch mit einem null Dokument und null Verweisen auf documentURI und baseURI erstellt und instanziiert.
    • -
- -

Keine weitere Verwendung der internen String API

- -

Die interne String API wird nicht weiter ausgeführt, stattdessen muss die externe String API benutzt werden. Einige nützliche Informationen dazu:

- - - -

Entfernte Interfaces

- -

Folgende Interfaces wurden aus, der im Firefox 3 enthaltenen, Gecko-Engine 1.9 entfernt. Wenn die Erweiterung eines davon nutzt, muss der Code aktualisiert werden:

- -
    -
  • nsIDOMPaintListener
    • -
  • nsIDOMScrollListener
    • -
  • nsIDOMMutationListener
    • -
  • nsIDOMPageTransitionListener
    • -
  • nsICloseAllWindows (Siehe Bug 386200)
    • -
- -

Schritt 4: Auf Chrome Änderungen überprüfen

- -

Es gab einige Veränderungen im Chrome-Layout, die eventuell auch Erweiterungen betreffen.

- -

Neue Boxen

- -

Es wurden kleinere Änderungen an der Oberfläche vorgenommen, die Änderungen an der Erweiterung nötig machen könnten. Eine neue vbox mit dem Namen »browser-bottombox« wurde hinzugefügt, welche die »Find Bar« und die »Status Bar« am unteren Rand des Browsers umschließt. Auch wenn dies nicht die Anzeige selbst beeinflusst, kann dies deine Erweiterung betreffen falls diese »Overlays« verwendet, die Elemente ändern, die relativ zu besagten Elementen positioniert sind.

- -

Zum Beispiel, wenn vorher etwas überlagert wurde, wie im folgendem Codeschnipsel:

- -
<window id="main-window">
-  <something insertbefore="status-bar" />
-</window>
-
- -

Sollte es nun so überlagert werden:

- -
<vbox id="browser-bottombox">
-  <something insertbefore="status-bar" />
-</vbox>
-
- -

Oder, um Firefox 2 und Firefox 3 gleichermaßen zu behandeln, kann der folgende Code zum Einsatz kommen:

- -
<window id="main-window">
-  <vbox id="browser-bottombox" insertbefore="status-bar">
-    <something insertbefore="status-bar" />
-  </vbox>
-</window>
-
- -

Veränderte Boxen

- -

Erweiterungen, die auf die »appcontent« Box überlagern wollten, versuchten dies über das Floaten von Chrome-Inhalten über Dokumenteninhalten. Jetzt wird dann nicht mehr angezeigt. Die Erweiterung sollte auf das neue XUL panel Element aktualisiert werden. Falls es erwünscht ist, dass das Panel nach einer Verzögerung weiter angezeigt wird, sollte noautohide auf true gesetzt werden.

- -

Weitere Änderungen

- -

Einfache Änderungen, die Sie bei der Aktualisierung Ihrer Erweiterung auf Firefox 3 machen mussten, können Sie hier gerne eintragen!

- -
    -
  • chrome://browser/base/utilityOverlay.js wird aus Sicherheitsgründen nicht länger unterstützt. Falls dies vorher verwendet wurde, sollte auf chrome://browser/content/utilityOverlay.js. gewechselt werden.
    • -
  • Bei nsIAboutModule Implementierungen wird nun getURIFlags Methode benötigt. Siehe nsIAboutModule.idl für weitere Dokumentation. Das betrifft Erweiterungen, die neue about: URIs verwenden. (Bug 337746)
    • -
  • Das tabbrowser Element ist kein Teil mehr von »toolkit« (Bug 339964). Das bedeutet, dass dieses Element nicht länger für XUL Anwendungen und Erweiterungen verfügbar ist. Es wird weiterhin in Firefox' Hauptfenster (browser.xul) benutzt.
    • -
  • Veränderungen an nsISupports proxies und möglicherweise ab Thread-bezogenen Interfaces muss noch dokumentiert werden.
    • -
  • Wenn XML Prozessanweisungen wie <?xml-stylesheet ?> in XUL Dateien verwendet werden, sollten Änderungen durch Bug 319654 beachtet werden: -
      -
    1. XML Prozessanweisungen werden nun in das XUL DOM hinzugefügt. Das bedeutet, dass document.firstChild nicht unbedingt mehr das Root-Element sein muss. Wenn das Wurzelelement angesprochen werden muss sollte document.documentElement verwendet werden.
      2. -
    2. <?xml-stylesheet ?> und <?xul-overlay ?> Prozessanweisungen haben jetzt außerhalb des Dokumentprologs keinen Effekt mehr.
      3. -
    -
    • -
  • window.addEventListener("load", myFunc, true) wird nicht ausgeführt, wenn Webinhalte geladen werden (Browser eine Seite lädt). Durch Bug 296639 wurde die Art und Weise in der innere und äußere Fenster kommunizieren verändert. Ein einfacher Fix, der auch in Firefox 2 funktioniert: gBrowser.addEventListener("load", myFunc, true) wie hier beschrieben.
    • -
  • content.window.getSelection() gibt ein Objekt zurück (welches durch toString() zu einem String umgewandelt werden kann), im Gegensatz zu dem jetzt veraltetem content.document.getSelection(), welches einen String zurück gibt.
    • -
  • event.preventBubble() war Firefox 2 in deprecated und wurde in Firefox 3 entfernt. Es sollte event.stopPropagation() verwendet werden, was in Firefox 2 ebenso funktioniert.
    • -
  • Timers, die durch setTimeout() initialisiert wurden, werden nun von modalen Fenstern, durch den Fix von Bug 52209, geblockt. Es könnte nsITimer stattdessen verwendet werden.
    • -
  • Wenn die Erweiterung einer nicht vertrauten Quelle (z.B. eine Webseite) Zugang zu Chrome zulassen muss, sollte die neue contentaccessible Flag benutzt werden.
    • -
- - diff --git a/files/de/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/de/mozilla/firefox/releases/3/updating_web_applications/index.html deleted file mode 100644 index 4776cc17c93849..00000000000000 --- a/files/de/mozilla/firefox/releases/3/updating_web_applications/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Webanwendungen für Firefox 3 aktualisieren -slug: Mozilla/Firefox/Releases/3/Updating_web_applications -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications -original_slug: Updating_web_applications_for_Firefox_3 ---- -
{{FirefoxSidebar}}
- -

In der kommenden Version von Firefox (Firefox 3) gibt es eine nicht geringe Anzahl an Veränderungen, die möglicherweise Ihre Webseite oder Webanwendungen betreffen könnten. Möglicherweise wollen Sie auch von den neuen Funktionen Gebrauch machen. Dieser Artikel kann dazu als Einstiegspunkt dienen.

- -

DOM Änderungen

- - -

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.

- -

HTML Änderungen

- -

Veränderung an der Zeichensatz-Vererbung.

- -

Firefox 3 schließt eine Sicherheitsschwachstelle in Frames und iFrames, die einem erlaubten, den Zeichensatz des Elternelementes zu vererben. In bestimmten Fällen war dies eine Problemursache. Nun ist die Zeichensatzvererbung in Frames und iFrames lediglich erlaubt, wenn jenes Element und das Elternelement von dem selben Server stammen. Wenn Sie in ihrer Seite Frames haben, die den selben Zeichensatz von einem fremden Server vererben sollen, sollten Sie den HTML-Code der Frames an die Neuerung anpassen und ihren Zeichensatz explizit angeben.

- -

Veränderungen am <script>-Element

- -

Das <script>-Element in text/html-Dokumenten benötigt nun ein schließendes </script>-Tag in HTML 4 Dokumenten, auch wenn zwischen ihnen nichts steht.

- -

Früher war es möglich, folgendes zu schreiben:

- -
<script ... />
-
- -

Nun wird Konformität zur HTML Spezifikation sichergestellt und es wird folgendes notiert:

- -
<script ...></script>
-
- -

Damit wird die Stabilität, Kompatibilität und Sicherheit verbessert.

- -

CSS Änderungen

- -

Veränderungen bei font-size basierend auf em und ex Einheiten

- -

font-size Werte in em und ex Einheiten waren auf die kleinste Schriftgröße des Benutzers bezogen: Wenn die kleinste Schriftgröße größer dargestellt wurde, basierten die em und ex Einheiten für font-size auf die vergrößerte Schriftgröße. Das war widersprüchlich zum Verhalten mit prozentualen Angaben für die Schriftgröße.

- -

font-size Werte in em und ex Einheiten sind nun auf einer »intended font size« basiert, die nicht auf die kleinste Schriftgröße des Benutzers basiert. Mit anderen Worten, werden Schriftgrößen immer mit der Absicht des Designers berechnet und hinterher an die kleinste Schriftgröße angepasst.

- -

Siehe {{ Bug(434718) }}, und speziell im Anhang von Bug 322943 für eine Demonstration (muss mit einer minimalen Schriftgröße von >= 6 angesehen werden, um einen Unterschied erkennen zu können).

- -

Sicherheitsänderungen

- -

Chrome Zugang

- -

In vorherigen Versionen von Firefox konnte jede Webseite Scripts über das chrome:// Protokoll laden. Neben anderen Dingen, waren Webseiten in der Lage herauszufinden, welche Add-ons installiert sind und konnten diese Informationen dann benutzen, um gezielt Sicherheitsmechanismen des Browser zu umgehen.

- -

Firefox 3 erlaubt nur noch Zugang zu chrome://browser/ und chrome://toolkit/ Pfaden. Diese Dateien sind dafür bestimmt von Webseiten zugänglich zu sein. Alle weiteren Chrome Inhalten werden nun für den Zugriff von außerhalb blockiert.

- -

Es gibt jedoch einen Weg für Erweiterungen ihre Inhalte zugänglich für das Web zu machen. Sie können ein Kennzeichen in der chrome.manifest Datei angeben, das wie folgt lautet:

- -
content mypackage location/ contentaccessible=yes
-
- -

Das Setzen dieses Kennzeichens sollte die Ausnahme bleiben, steht aber für die seltenen Fälle zur Verfügung. Beachten Sie, dass Firefox den Benutzer gegebenenfalls benachrichtigt, wenn Ihre Erweiterung contentaccessible benutzt und es als potentielles Sicherheitsrisiko angesehen wird.

- -
Hinweis: Weil Firefox 2 die contentaccessible Flag nicht versteht (es wird die komplette Zeile ignoriert), sollten zur Kompatibilität zu Firefox 2 und Firefox 3 die folgenden zwei Zeilen notiert werden. - -
content mypackage location/
-content mypackage location/ contentaccessible=yes
-
-
- -

Datei-upload Felder

- -

In vorherigen Firefox Versionen gab es Fälle in denen der Benutzer ein Formular ausgefüllt hat, um eine Datei hochzuladen, wobei der gesamte Dateipfad der Datei für die Webanwendung verfügbar war. Dieser Eingriff in die Privatsphäre wurde in Firefox 3 behoben und jetzt ist nur noch der Dateiname selbst verfügbar.

- -

Änderungen an der »Same-origin policy« für file: URIs

- -

Die »same-origin policy« für Dateien file: URIs wurde in Firefox 3 verändert. Das konnte Ihre Inhalte betreffen. Siehe dazu: Same-origin policy für file: URIs für weitere Details.

- -

JavaScript Änderungen

- -

Firefox 3 unterstützt JavaScript 1.8. Eine wichtige Änderung die eventuell Änderungen nötig machen könnte, ist das das veraltete und nicht-standardisierte Script Objekt nicht länger unterstützt wird. Das ist nicht das <script> Tag, aber ein JavaScript Objekt, das niemals standardisiert wurde. Wahrscheinlich haben Sie es niemals verwendet.

- -

Siehe auch

- - diff --git a/files/de/mozilla/firefox/releases/34/index.html b/files/de/mozilla/firefox/releases/34/index.html deleted file mode 100644 index 92e5d6af6cdf6a..00000000000000 --- a/files/de/mozilla/firefox/releases/34/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Firefox 34 für Entwickler -slug: Mozilla/Firefox/Releases/34 -tags: - - Firefox - - Releases -translation_of: Mozilla/Firefox/Releases/34 ---- -
{{FirefoxSidebar}}

Möchtest du helfen Firefox 34 zu dokumentieren? Schaue dir die Liste der Bugs an, über die noch geschrieben werden muss.

- -

Änderungen für Webentwickler

- -

Entwickler Werkzeuge

- -

Höhepunkte:

- - - -

All devtools bugs fixed between Firefox 33 and Firefox 34.

- -

CSS

- -
    -
  • Unsere experimentelle Implementierung der CSS Schriftarten Level 3 schreitet voran. Neu implementierte Funktionen sind: -
      -
    • Der Fallback Algorithmus von {{cssxref("font-variant-position")}}, erstellt synthetische Alternativen für fehlende Glyphen, basierend auf den subscript and superscript metrics supplied by the font ({{bug(1024804)}}).
      • -
    • Das layout.css.font-features.enabled wurde entfernt, was beudeutet, dass die folgenden Eigenschaften standartmäßig aktiviert sind : -
        -
      • The CSS Font Level 3 version of {{cssxref("font-variant")}} which is now a shorthand property.
        • -
      • The longhand properties {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, and {{cssxref("font-variant-alternates")}}.
        • -
      • The properties {{cssxref("font-kerning")}} and {{cssxref("font-synthesis")}}
        • -
      • The properties {{cssxref("font-feature-settings")}} and {{cssxref("font-language-override")}} are unprefixed. The prefixed version are still available for some time to ease transition.
        • -
      -
      • -
    -
    • -
  • To reflect the latest specification changes, the value auto has been renamed in main-size on the {{cssxref("flex-basis")}} property. The shorthand {{cssxref("flex")}} keep an auto value, but it is a synonym of 1 1 main-size ({{bug(1032922)}}). The value used for the longhand {{cssxref("flex-basis")}} when omitted in the shorthand is now 0%, and the one for {{cssxref("flex-growth")}} is now 1, both different than their initial value.
    • -
  • The value auto has been added to {{cssxref("min-width")}} and {{cssxref("min-height")}} with a different behavior than the last time ({{bug(984711)}} and {{bug(1015474)}}).
    • -
  • An experimental implementation, disabled by default, of the filter functional values of the {{cssxref("filter")}} property have been implemented. It is controlled by the layout.css.filters.enabled pref. ({{bug(948265)}})
    • -
- -

HTML

- -

Keine Veränderungen.

- -

JavaScript

- -
    -
  • The ES6 syntax for computed property names on object literals has been implemented ({{bug(924688)}}). - - -
    • -
  • The ES6 shorthand syntax for defining methods on objects has been implemented ({{bug(924672)}}).
    • -
  • The ES6 Object method {{jsxref("Object.assign", "Object.assign()")}} has been implemented ({{bug(937855)}}).
    • -
  • ES6 template strings and the {{jsxref("String.raw()")}} method are now supported ({{bug(1038259)}}, {{bug(1039774)}}).
    • -
  • A new ES6 object {{jsxref("WeakSet")}} has been added ({{bug(792439)}}).
    • -
  • ES6 Symbols (only available in the Nightly channel) have been updated to conform with recent specification changes ({{bug(1042602)}}): -
      -
    • When trying to convert a symbol to a number, a TypeError will be thrown now.
      • -
    • When using loose equality, Object(sym) == sym returns true now.
      • -
    -
    • -
  • The experimental {{jsxref("TypedArray.prototype.move()")}} method (only available in former Nightly and Aurora channels) has been replaced with the now implemented standard ES6 {{jsxref("TypedArray.prototype.copyWithin()")}} method ({{bug(1021379)}}).
    • -
  • In strict mode, setting a duplicate property name in object literals will no longer throw a SyntaxError as per ES6 specification ({{bug(1041128)}}).
    • -
- -

Interfaces/APIs/DOM

- -
    -
  • The {{domxref("Element.matches()")}} method has been added; it does what the non-standard mozMatchesSelector() was doing ({{bug(886308)}}).
    • -
  • The {{domxref("URLUtils.searchParams", "searchParams")}} property has been added to the {{domxref("Location")}} interface, available via the {{domxref("document.location")}} and {{domxref("window.location")}} properties ({{bug(1037715)}}).
    • -
  • The {{domxref("Performance.now()")}} method is now available to Web workers ({{bug(908390)}}).
    • -
  • The non-standard interface MozNamedAttrMap has been renamed to the standard {{domxref("NamedNodeMap")}} and {{domxref("Element.attributes")}} has been adapted to use it ({{bug(1055467)}}).
    • -
  • The non-standard methods and properties of {{domxref("Window.crypto")}} have been removed ({{bug(1030963)}}). Only methods and properties defined in the standard WebCrypto API are left.
    • -
- -

MathML

- -

Keine Veränderungen.

- -

SVG

- -

Keine Veränderungen.

- -

Audio/Video

- -

Keine Veränderungen.

- -

Sicherheit

- -

Keine Veränderungen.

- -

Änderungen für Add-on und Mozilla Entwickler

- -

Keine Veränderungen.

- -

Ältere Versionen

- -

{{Firefox_for_developers('33')}}

diff --git a/files/de/mozilla/firefox/releases/5/index.html b/files/de/mozilla/firefox/releases/5/index.html deleted file mode 100644 index 0d995a66733a87..00000000000000 --- a/files/de/mozilla/firefox/releases/5/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Firefox 5 for developers -slug: Mozilla/Firefox/Releases/5 -tags: - - Firefox - - Firefox 5 - - Gecko 5.0 - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Firefox/Releases/5 ---- -
{{FirefoxSidebar}}

Firefox 5, based on Gecko 5.0, was released on June 21, 2011. This article provides links to information about the changes that affect developers in this release.

- -

Changes for web developers

- -

HTML

- -
    -
  • All HTML elements now have the {{ domxref("element.accessKey", "accessKey") }} attribute, as well as the {{ domxref("element.blur()", "blur()") }}, {{ domxref("element.click()", "click()") }}, and {{ domxref("element.focus()", "focus()") }} methods. These are specified in the {{ domxref("HTMLElement") }} interface.
    • -
  • In order to comply with the HTML5 specification, support for the UTF-7 and UTF-32 character sets has been removed.
    • -
  • When in quirks mode, empty {{ HTMLElement("map") }}s are no longer skipped over in favor of non-empty ones when matching. See the Gecko notes on the {{ HTMLElement("map") }} element for details.
    • -
  • Firefox mobile on Android now supports WOFF fonts for {{ cssxref("@font-face") }}.
    • -
  • WebGL no longer loads textures from domains other than the originating domain, as a security measure. HTTP access control support should be coming sometime in the future to make this possible more securely.
    • -
- -

Canvas improvements

- -
    -
  • The {{ HTMLElement("canvas") }} 2D drawing context now supports specifying an ImageData object as the input to the createImageData() method; this creates a new ImageData object initialized with the same dimensions as the specified object, but still with all pixels preset to transparent black. This was documented as implemented already but was not.
    • -
  • Specifying non-finite values when adding color stops through a call to the {{ domxref("CanvasGradient") }} method addColorStop() now correctly throws INDEX_SIZE_ERR instead of SYNTAX_ERR.
    • -
  • The {{ domxref("HTMLCanvasElement") }} method toDataURL() now correctly lower-cases the specified MIME type before matching.
    • -
  • getImageData() now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black.
    • -
  • drawImage() and createImageData() now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis. We need an article about CSS sizing and how this works.
    • -
  • Specifying non-finite values when calling createImageData() now properly throws a NOT_SUPPORTED_ERR exception.
    • -
  • createImageData() and getImageData() now correctly return at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
    • -
  • Specifying a negative radius when calling createRadialGradient() now correctly throws INDEX_SIZE_ERR.
    • -
  • Specifying a null or undefined image when calling createPattern() or drawImage() now correctly throws a TYPE_MISMATCH_ERR exception.
    • -
  • Specifying invalid values for globalAlpha no longer throws a SYNTAX_ERR exception; these are now correctly silently ignored.
    • -
  • Specifying invalid values when calling translate(), transform(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), or arc() no longer throws an exception; these calls are now correctly silently ignored.
    • -
  • Setting the value of shadowOffsetX, shadowOffsetY, or shadowBlur to an invalid value is now silently ignored.
    • -
  • Setting the value of rotate or scale to an invalid value is now silently ignored.
    • -
- -

CSS

- -
-
CSS animations
-
Support for CSS animations has been added, using the -moz- prefix for now.
-
- -

DOM

- -
    -
  • The {{ domxref("selection") }} object's modify() method has been changed so that the "word" selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit's implementation.
    • -
  • The {{ domxref("window.setTimeout()") }} method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).
    • -
  • Similarly, the {{ domxref("window.setInterval()") }} method now clamps to no more than one interval per second in inactive tabs.
    • -
  • XMLHttpRequest now supports the loadend event for progress listeners. This is sent after any transfer is finished (that is, after the abort, error, or load event). You can use this to handle any tasks that need to be performed regardless of success or failure of a transfer.
    • -
  • The {{ domxref("Blob") }} and, by extension, the {{ domxref("File") }} objects' slice() method has been removed and replaced with a new, proposed syntax that makes it more consistent with Array.slice() and String.slice() methods in JavaScript. This method is named mozSlice() for now.
    • -
  • The value of {{ domxref("window.navigator.language") }} is now determined by looking at the value of the Accept-Language HTTP header.
    • -
  • The {{ domxref("Node.prefix") }} property is now read only, as required by the DOM specification.
    • -
  • The {{ domxref("HTMLVideoElement") }} now supports experimental properties to get information about video paint statistics like frame rates.
    • -
- -

JavaScript

- -
    -
  • Regular expressions are no longer callable as if they were functions; this change has been made in concert with the WebKit team to ensure compatibility (see {{ WebkitBug(28285) }}. This feature had existed for a long time but was never documented (at least, not here on MDC).
    • -
  • The Function.prototype.isGenerator() method is now supported; this lets you determine if a function is a generator.
    • -
  • The following reserved words were previously only treated as reserved when in strict mode; now they're always treated as reserved: class, enum, export, extends, import, and super.
    • -
  • DOM documents created in chrome code may no longer be exposed to sandboxed scripts.
    • -
  • The JSON parser has been re-written for improved speed and compliance. This includes a fix for {{ bug("572279") }}.
    • -
- -

SVG

- -
    -
  • The {{ SVGAttr("class") }} SVG attribute can now be animated.
    • -
  • The following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{ domxref("SVGLengthList") }}, {{ domxref("SVGNumberList") }}, {{ domxref("SVGPathSegList") }}, and {{ domxref("SVGPointList") }}.
    • -
- -

HTTP

- -
    -
  • Firefox no longer sends the Keep-Alive HTTP header; we weren't formatting it correctly, and it was redundant since we were also sending the {{ httpheader("Connection") }} or {{ httpheader("Proxy-Connection") }} header with the value "keep-alive" anyway.
    • -
  • The HTTP transaction model has been updated to be more intelligent about reusing connections in the persistent connection pool; instead of treating the pool as a {{ interwiki("wikipedia", "FIFO") }} queue, Necko now attempts to sort the pool with connections with the largest {{ interwiki("wikipedia", "congestion window") }} (CWND) first. This can reduce the round-trip time (RTT) of HTTP transactions by avoiding the need to grow connections' windows in many cases.
    • -
  • Firefox now handles the Content-Disposition HTTP response header more effectively if both the filename and filename* parameters are provided; it looks through all provided names, using the filename* parameter if one is available, even if a filename parameter is included first. Previously, the first matching parameter would be used, thereby preventing a more appropriate name from being used. See {{ bug(588781) }}.
    • -
- -

MathML

- - - -

Developer tools

- -
    -
  • The Web Console's Console object now has a debug() method, which is an alias for its log() method; this improves compatibility with certain existing sites.
    • -
- -

Changes for Mozilla and add-on developers

- -

For a guide to updating your add-on for Firefox 5, please see Updating add-ons for Firefox 5.

- -
Note: Firefox 5 requires that binary components be recompiled, as do all major releases of Firefox. See Binary Interfaces for details.
- -

Changes to JavaScript code modules

- -

New JavaScript code modules

- -
    -
  • The Dict.jsm code module was added; it provides an API for dictionaries of key/value pairs.
    • -
- -

NetUtil.jsm

- -
    -
  • The asyncFetch() method now supports specifying the input source as an nsIInputStream.
    • -
- -

Interface changes

- -
    -
  • The nsIHttpChannelInternal interface has new attributes providing access to information about the channels' endpoints' addresses and ports. This information is provided primarily for debugging purposes.
    • -
  • The {{ HTMLElement("canvas") }} element's {{ htmlattrxref("width", "canvas") }} and {{ htmlattrxref("height", "canvas") }} attributes are now reflected in IDL as unsigned integers instead of signed (see HTMLCanvasElement).
    • -
  • The nsIAppStartup2 and nsIAppStartup_MOZILLA_2_0 interfaces have been merged into the nsIAppStartup interface.
    • -
  • The nsIDocShell_MOZILLA_2_0_BRANCH interface has been merged into the nsIDocShell interface.
    • -
  • The nsIFocusManager_MOZILLA_2_0_BRANCH interface has been merged into the nsIFocusManager interface.
    • -
  • The nsIHTMLEditor_MOZILLA_2_0_BRANCH interface has been merged into the nsIHTMLEditor interface.
    • -
- -

New interfaces

- -
    -
  • nsIDOMAnimationEvent added. {{domxref("AnimationEvent")}}
    • -
- -

Removed interfaces

- -

The following interfaces were implementation details that are no longer needed:

- -
    -
  • nsICiter (see {{ bug("633066") }})
    • -
  • nsIDOM3Document (see {{ bug("639849") }})
    • -
  • nsIFIXptrEvaluator
    • -
  • nsISelectElement (see {{ bug("619996") }})
    • -
- -

Debugging aids

- -
    -
  • The new DebugOnly<T> helper makes it possible to declare variables only for DEBUG builds.
    • -
- -

JavaScript API (SpiderMonkey)

- - - -

Build system changes

- -
    -
  • You can now build Firefox without a mozconfig file; the --enable-application setting now defaults to "browser". After pulling or downloading the code, you can simply configure && make (or make -f client.mk) to build Firefox.
    • -
- -

See also

- -
{{Firefox_for_developers('4')}}
diff --git a/files/de/mozilla/firefox/releases/56/index.html b/files/de/mozilla/firefox/releases/56/index.html deleted file mode 100644 index e8fec061e51c7d..00000000000000 --- a/files/de/mozilla/firefox/releases/56/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Firefox 56 for developers -slug: Mozilla/Firefox/Releases/56 -translation_of: Mozilla/Firefox/Releases/56 ---- -
{{FirefoxSidebar}}
-

Dieser Artikel enthält Informationen über die Änderungen in Firefox 56, die Entwickler betreffen. Firefox 56 ist die aktuelle Beta-Version von Firefox und wird am 26. September 2017 veröffentlicht werden

- -

Änderungen für Web-Entwickler

- -

Entwicklerwerkzeuge

- -

Keine Änderungen.

- -

HTML

- -
    -
  • Implementiert die Label-Eigenschaft für beschreibbare Formular-Steuerelemente, zum Beispiel {{domxref("HTMLInputElement.labels")}} ({{bug(556743)}}).
    • -
  • Implementiert <link rel="preload">; siehe Preloading content with rel="preload" für mehr Details ({{bug(1222633)}}).
    • -
- -

CSS

- -
    -
  • Implementiert die propietären Mozilla-spezifischen Werte {{cssxref("<color>")}} -moz-win-accentcolor und -moz-win-accentcolortext (see {{bug(1344910)}}), und die propietäre Medienabfrage -moz-windows-accent-color-in-titlebar (see {{bug(1379938)}}).
    • -
- -

SVG

- -

Keine Änderungen.

- -

JavaScript

- -
    -
  • The Intl API has been enabled on Firefox for Android ({{bug(1344625)}}).
    • -
- -

APIs

- -

New APIs

- -

Keine Änderungen.

- -

DOM

- -
    -
  • Auf Macist jetzt {{domxref("Document.hidden")}} wahr, wenn das Fenster hinter einer anderen nicht-lichtdurchlässigen Anwendung steht {{bug(1236512)}}.
    • -
  • Die Eigenschaft {{domxref("Gamepad.displayId")}} wurde implementiert ({{bug(1375816)}}).
    • -
  • Die Methode {{domxref("CanvasRenderingContext2D.drawImage()")}} wurde aktualisiert, so dass so dass die Glättung beim Downscaling erfolgt, auch wenn imageSmoothingEnabled ist false. Dies ist nicht obligatorisch wie pro Spezifikation, sondern folgt Chromes Verhalten. Siehe {{bug(1360415)}}.
    • -
  • Die Eigenschaft {{domxref("PerformanceTiming.secureConnectionStart")}} wurde implementiert ({{bug(772589)}}).
    • -
  • Firefox verwendet iso-2022-jp-2, um Sequenzen zu nehmen, wenn ein iso-2022-jp {{domxref ("TextDecoder.TextDecoder", "TextDecoder ()")}} instanziiert wurde. Dies wurde nun entfernt, um die API zu vereinfachen, da keine anderen Browser oder Webseiten es unterstützen. ({{bug(715833)}}).
    • -
  • Das 4ms- Klemmeverhalten von {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} und {{domxref("WindowOrWorkerGlobalScope.setInterval","setInterval()")}} wurde aktualisiert, um besser in Einklang mit anderen Browsern, wie in Timeouts throttled to >=4ms zu sein. ({{bug(1378586)}}).
    • -
  • Der Page Visibility API's {{domxref("Document.onvisibilitychange")}} handler wurde hinzugefügt ({{bug("1333912")}}).
    • -
- -

DOM events

- -
    -
  • {{domxref("GlobalEventHandlers.onwheel")}} ist ab sofort verfügbar {{domxref("HTMLElement")}} — es war nicht vorher ({{bug(1370550)}}).
    • -
- -

WebRTC

- -
    -
  • Firefox unterstützt nun die {{domxref("RTCPeerConnection")}} Eigenschaften, die Sie die aktuellen und ausstehenden Konfigurationen der lokalen und entfernten Enden der Verbindung untersuchen lassen, um zu helfen, Änderungen in der Konfiguration zu verwalten:{{domxref("RTCPeerConnection.currentLocalDescription", "currentLocalDescription")}}, {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription", "currentRemoteDescription")}}, and {{domxref("RTCPeerConnection.pendingRemoteDescription", "pendingRemoteDescription")}}.
    • -
- -

Sicherheit

- -

Keine Änderungen.

- -

Plugins

- -

Keine Änderungen.

- -

Weiteres

- -
    -
  • Gecko kodiert nun URLs intern als punycode, um URL-Codierungsprobleme zu vermeiden (siehe {{Bug ("945240")}}, siehe auch Diskussion in {{Bug ("942074")}}).
    • -
  • Firefox unter Windows und Mac OS X kann nun im headless Modus mit der -headless-Flagge ausgeführt werden (siehe {{bug (1355150)}} und {{bug (1355147)}}).
    • -
- -

Von der Web-Plattform entfernt

- -

HTML

- -
    -
  • Das {{htmlelement("isindex")}} Element wurde vom HTML parser und aus der Formularvorlage entfernt. ({{bug(1266495)}}).
    • -
  • Das {{htmlelement("applet")}} Element wurde entfernt ({{bug(1279218)}}).
    • -
- -

APIs

- -
    -
  • Die {{domxref("KeyframeEffectReadOnly.spacing")}} Eigenschaft wurde von dem {{SpecName('Web Animations')}} spec entfernt, und deswegen wurde es auch von Gecko entfernt ({{bug(1339690)}}).
    • -
- -

SVG

- -

Keine Änderungen.

- -

Änderungen für add-on und Mozilla-Entwickler

- -

WebExtensions

- -

Keine Änderungen.

- -

Ältere Versionen

- -

{{Firefox_for_developers(55)}},

diff --git a/files/de/mozilla/firefox/releases/57/index.html b/files/de/mozilla/firefox/releases/57/index.html deleted file mode 100644 index 4753c900228575..00000000000000 --- a/files/de/mozilla/firefox/releases/57/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Firefox 57 für Entwickler -slug: Mozilla/Firefox/Releases/57 -translation_of: Mozilla/Firefox/Releases/57 ---- -
{{FirefoxSidebar}}
- -

Dieser Artikel enthält Informationen über die Änderungen in Firefox 57, die Entwicklern nützlich sind. Firefox 57 ist die aktuelle Nightly-Version von Firefox und wird am 14. November 2017 veröffentlicht werden.

- -

Firefox 57 = Firefox Quantum

- -

Firefox 57 wurde Quantum genannt, weil dies der passendste Name für "Stabilität, Performance, etc." ist.

- -

Änderungen für Web-Entwickler

- -

Entwickler-Tools

- -

Keine Änderungen.

- -

HTML

- -

Keine Änderungen.

- -

CSS

- -

Keine Änderungen.

- -

SVG

- -

Keine Änderungen.

- -

JavaScript

- -

Keine Änderungen.

- -

APIs

- -

Neue APIs

- -

Keine Änderungen.

- -

DOM

- -

Keine Änderungen.

- -

DOM events

- -

Keine Änderungen.

- -

WebRTC

- -

Keine Änderungen.

- -

Sicherheit

- -

Keine Änderungen.

- -

Plugins

- -

Keine Änderungen.

- -

Anderes

- -

Keine Änderungen.

- -

Von der Web-Plattform entfernt

- -

HTML

- -

Keine Änderungen.

- -

APIs

- -

Keine Änderungen.

- -

SVG

- -

Keine Änderungen.

- -

Änderungen für add-on und Mozilla-Entwickler

- -

WebExtensions

- -

Keine Änderungen.

- - -

Ältere Versionen

- -

{{Firefox_for_developers(56)}}

diff --git a/files/de/mozilla/firefox/releases/58/index.html b/files/de/mozilla/firefox/releases/58/index.html deleted file mode 100644 index 144c2d67035b74..00000000000000 --- a/files/de/mozilla/firefox/releases/58/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Firefox 58 for developers -slug: Mozilla/Firefox/Releases/58 -translation_of: Mozilla/Firefox/Releases/58 ---- -
{{FirefoxSidebar}}
-

Dieser Artikel enthält Informationen zu den Änderungen in Firefox 58, die sich auf Entwickler auswirken. Firefox 58 ist die aktuelle Beta-Version von Firefox und wird am 16. Januar 2018 ausgeliefert.

- -

Änderungen für Web Entwickler

- -

Developer Tools

- -
    -
  • Der Code für den alten Responsive-Design-Modus (standardmäßig aktiviert vor Firefox 52) wurde jetzt aus den Devtools entfernt ({{bug (1305777)}}). Informationen zu den neuen Tools finden Sie im Responsive Design-Modus.
    • -
  • Die Option zum Anzeigen von MDN-Dokumenten aus dem CSS-Bereich des Seiteninspektors wurde entfernt ({{bug (1382171)}}).
    • -
  • Der CSS-Formen-Textmarker wurde standardmäßig für Formen aktiviert, die über {{cssxref ("clip-path")}} ({{bug (1405339)}}) erstellt wurden.
    • -
  • Der Netzwerkmonitor verfügt jetzt über eine Schaltfläche zum Anhalten / Wiedergeben der Aufzeichnung des Netzwerkverkehrs ({{bug (1005755)}}).
    • -
  • Im Netzwerkmonitor ist die Filterschaltfläche "Flash" nicht mehr verfügbar und Flash-Anforderungen sind im Filter "Others" enthalten ({{bug (1413540)}}).
    • -
- -

HTML

- -

Keine Änderungen.

- -

CSS

- -
    -
  • Der Deskriptor {{cssxref ("@ font-face / font-display", "font-display")}} ist jetzt standardmäßig auf allen Plattformen verfügbar ({{bug (1317445)}}).
    • -
- -

SVG

- -

Keine Änderungen .

- -

JavaScript

- -
    -
  • Das Objekt {{jsxref ("Global_Objects / DateTimeFormat", "Intl.DateTimeFormat")}} unterstützt jetzt die Option hourCycle und das hc Sprachen Tag ({{bug (1386146)}}).
    • -
- -

APIs

- -

Neue APIs

- -
    -
  • Die API {{domxref ("PerformanceNavigationTiming")}} wurde implementiert ({{bug (1263722)}}). -
      -
    • Gecko besitzt nun eine Pref Einstellung, die verwendet werden kann, um die Schnittstelle bei Bedarf zu deaktivieren — dom.enable_performance_navigation_timing, Standardwert ist true ({{bug(1403926)}}).
      • -
    -
    • -
- -

DOM

- -
    -
  • Fehler, die über Fehlerobjekte in bestimmten APIs gemeldet werden - z. B. in der error Eigenschaft von {{domxref ("FileReader")}}, {{domxref ("IDBRequest")}} und {{domxref ("IDBTransaction")}}, sowie wenn Anfragen über bestimmte Methoden von {{domxref ("RTCPeerConnection")}} nicht erfolgreich sind - werden jetzt durch {{domxref ("DOMException")}} Instanzen repräsentiert. {{domxref ("DOMError")}} ist veraltet und wurde aus der DOM4-Spezifikation ({{bug (1120178)}}) ​​entfernt.
    • -
  • Die WebVR-API wurde standardmäßig unter macOS aktiviert ({{bug (1374399)}}).
    • -
  • Die Eigenschaft {{domxref ("PerformanceResourceTiming.workerStart")}} wird jetzt unterstützt ({{bug (1191943)}}).
    • -
  • Budget-basierte Timeout-Throttling-Regeln wurden implementiert - siehe Richtlinien zur Unterstützung der Performance von Hintergrundseiten für weitere Details ({{bug (1377766)}}).
    • -
- -

DOM Events

- -

Keine Änderungen.

- -

Media and WebRTC

- -
    -
  • Die vorangestellte Version von {{domxref ("HTMLMediaElement.srcObject")}} wurde entfernt. Es ist sicherzustellen, daß der Code aktualisiert wird, um das Standard-srcObject anstelle von mozSrcObject ({{bug (1183495)}}) zu verwenden.
    • -
- -

Canvas und WebGL

- -

Keine Änderungen.

- -

HTTP

- -
    -
  • frame-ancestors wird nicht mehr ignoriert in {{httpheader ("Content-Security-Policy-Report-Only")}} ({{bug (1380755)}}).
    • -
  • Firefox implementiert jetzt ein TLS-Handshake-Timeout mit einem Standardwert von 30 Sekunden. Der Timeout-Wert kann durch Bearbeiten des Parameters network.http.tls-handshake-timeout in about:config ({{bug(1393691)}}).
    • -
  • Die worker-src CSP Richtlinie wurde implementiert ({{bug(1302667)}}).
    • -
- -

Security

- -

Keine Änderungen.

- -

Plugins

- -

Keine Änderungen.

- -

Andere

- -

Keine Änderungen.

- -

Webplattform Berichtigungen

- -

HTML

- -
    -
  • {{htmlelement ("a")}} -Elemente können nicht mehr in ein {{htmlelement ("map")}} -Element eingebettet werden, um einen Hotspot-Bereich zu erstellen - ein {{htmlelement ("area")}} -Element muss stattdessen verwendet werden ({{bug (1317937)}}).
    • -
- -

CSS

- - - -

JavaScript

- - - -

APIs

- -
    -
  • Die proprietären moz-blob und moz-chunked-text Werte der {{Domxref ("XMLHttpRequest.responseType")}} - Eigenschaft wurden in Firefox 58 vollständig entfernt ({{bug (1397145)}}, {{bug (1397151)}}, {{bug (1120171)}}).
    • -
  • Die Voreinstellungen dom.abortController.enabled und dom.abortController.fetch.enabled, die die Belichtung der Abort-API-Funktionalität kontrollierten, wurden nun entfernt, da diese Funktionen jetzt standardmäßig aktiviert sind ({{bug (1402317)}}).
    • -
  • Die proprietäre Eigenschaft mozSrcObject wurde in Firefox 58 entfernt ({{bug (1183495)}}). Verwenden Sie stattdessen die standardmäßige {{domxref ("HTMLMediaElement.srcObject")}} -Eigenschaft.
    • -
- -

SVG

- -

Keine Änderungen.

- -

Änderungen für Add-On und Mozilla Entwickler

- -

WebExtensions

- -

Keine Änderungen.

- -

Ältere Versionen

- -

{{Firefox_for_developers(57)}}

diff --git a/files/de/mozilla/firefox/releases/index.html b/files/de/mozilla/firefox/releases/index.html deleted file mode 100644 index 521e2c1edd2317..00000000000000 --- a/files/de/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Firefox developer release notes -slug: Mozilla/Firefox/Releases -tags: - - Firefox - - NeedsTranslation - - TopicStub -translation_of: Mozilla/Firefox/Releases ---- -
{{FirefoxSidebar}}

This page provides links to the "Firefox X for developers" articles for each Firefox release. These notes let you see what features were added and bugs eliminated in each version of Firefox.

- -{{ListSubpages("",1,1,1)}} diff --git a/files/de/mozilla/index.html b/files/de/mozilla/index.html deleted file mode 100644 index 3a838f369342d6..00000000000000 --- a/files/de/mozilla/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Mozilla -slug: Mozilla -tags: - - TopicStub -translation_of: Mozilla ---- -
-
-

Das hier wird bald eine geniale Zielseite für internes von Mozilla sein. Aber momentan ist es das nicht.

-
- {{ListSubpages}}
diff --git a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html deleted file mode 100644 index f6d09e8c0f9021..00000000000000 --- a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Übersicht zu barrierefreien Web-Applikationen und Komponenten -slug: Web/Accessibility/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 -original_slug: Web/Barrierefreiheit/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):

- -
    -
  • aria-checked: Zeigt den Zustand einer Checkbox (Auswahlkästchen) oder eines Radiobuttons (Optionsfeld) an.
    • -
  • aria-disabled: Zeigt an, dass ein Element zwar sichtbar, jedoch nicht editierbar ist oder anderweitig betätigt werden kann.
    • -
  • aria-grabbed: Zeigt an, ob sich ein Objekt bei einer Drag & Drop-Interaktion im "grabbed"-Zustand befindet.
    • -
- -

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

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

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

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

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

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

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

- -
    -
  • Die Tab-Taste fokussiert eine Komponente als ganzes. Beispielsweise sollte das navigieren zu einer Menüleiste dessen erstes Element fokussieren
    • -
  • Die Pfeiltasten sollten die Navigation innerhalb der Komponente ermöglichen. Zum Beispiel indem man mit dem linken und rechten Pfeil den Fokus auf den vorherigen und nächsten Menüpunkt verschiebt
    • -
  • Wenn die Komponente nicht innerhalb eines Formulars liegt, sollten die Enter- und Leertaste das Kontrollelement auswählen oder aktivieren
    • -
  • Innerhalb eines Formulars sollte die Leertaste das Element auswählen oder aktivieren, während die Enter-Taste die Standardfunktion des Formulars aufruft
    • -
  • Ahme im Zweifelsfall die Desktop Standardfunktionalität dieses Elements nach
    • -
- -

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/accessibility/aria/aria_live_regions/index.html b/files/de/web/accessibility/aria/aria_live_regions/index.html deleted file mode 100644 index 2ae6efe3c3c43a..00000000000000 --- a/files/de/web/accessibility/aria/aria_live_regions/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: ARIA Live-Regionen -slug: Web/Accessibility/ARIA/ARIA_Live_Regions -translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions -original_slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen ---- -

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:

-
    -
  • aria-live="polite" legt fest, dass der Screenreader warten soll, bis der Benutzer nicht mehr beschäftigt ist, bevor die Aktualisierungen ausgegeben werden. Dieser Wert wird am häufigsten verwendet, da das Setzen des Werts "assertive" dafür sorgt, dass der Benutzer während er noch aktiv ist unterbrochen wird, was für den Benutzer störend sein kann.
    • -
  • Die Eigeschaft aria-atomic wurde nicht gesetzt (Default-Wert: "false"), sodass nur hinzugekommene und den Chat verlassende Benutzer genannt werden und nicht die gesamte Liste vorgelesen wird.
    • -
  • Mit aria-relevant="additions removals" wird sichergestellt, dass sowohl die hinzugekommenen als auch die den Chat verlassenden Benutzer genannt werden.
    • -
-

TBD: Realistic use case for aria-atomic="true"

diff --git a/files/de/web/accessibility/aria/aria_techniques/index.html b/files/de/web/accessibility/aria/aria_techniques/index.html deleted file mode 100644 index 40675c7141ab99..00000000000000 --- a/files/de/web/accessibility/aria/aria_techniques/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: ARIA Techniken -slug: Web/Accessibility/ARIA/ARIA_Techniques -tags: - - ARIA - - Accessibility -translation_of: Web/Accessibility/ARIA/ARIA_Techniques -original_slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken ---- -

- -

Rollen

- -

- -

Widget Rollen

- -
- -
- -

Zusammengesetzte Rollen

- -

Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.

- - -
-
    -
  • Combobox
    • -
  • Grid (einschließlich row, gridcell, rowheader, und columnheader Rollen)
    • -
  • Listbox (einschließlich option Rolle)
    • -
  • Menu
    • -
  • Menubar
    • -
  • Radiogroup (siehe auch radio Rolle)
    • -
  • Tablist (einschließlich tab und tabpanel Rollen)
    • -
  • Tree
    • -
  • Treegrid
    • -
-
- -

Dokumentstruktur Rollen

- -
- -
- -

Grenzrollen

- -
-
    -
  • Application
    • -
  • Banner
    • -
  • Complementary
    • -
  • Contentinfo
    • -
  • Form
    • -
  • Main
    • -
  • Navigation
    • -
  • Search
    • -
-
- -

Zustände und Eigenschaften

- -

- -

Widget Eigenschaften

- -
- -
- -

Live Region Attribute

- -
- -
- -

Drag & drop Attribute

- -
-
    -
  • aria-dropeffect
    • -
  • aria-dragged
    • -
-
- -

Beziehungs Attribute

- -
- -
diff --git a/files/de/web/accessibility/aria/index.html b/files/de/web/accessibility/aria/index.html deleted file mode 100644 index 513cae4fcce76a..00000000000000 --- a/files/de/web/accessibility/aria/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: ARIA -slug: Web/Accessibility/ARIA -translation_of: Web/Accessibility/ARIA -original_slug: Web/Barrierefreiheit/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/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html deleted file mode 100644 index 72fb208ea1adc9..00000000000000 --- a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Tastaturgesteuerte JavaScript-Komponenten -slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten ---- -

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

-

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

-
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/api/aescbcparams/index.html b/files/de/web/api/aescbcparams/index.html deleted file mode 100644 index 1deddde207d4cd..00000000000000 --- a/files/de/web/api/aescbcparams/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

- -
    -
  • CBC Modus wird in Sektion 6.2 des NIST SP800-38A standard spezifiziert.
    • -
  • {{domxref("SubtleCrypto.encrypt()")}}.
    • -
  • {{domxref("SubtleCrypto.decrypt()")}}.
    • -
  • {{domxref("SubtleCrypto.wrapKey()")}}.
    • -
  • {{domxref("SubtleCrypto.unwrapKey()")}}.
    • -
diff --git a/files/de/web/api/audiodestinationnode/index.html b/files/de/web/api/audiodestinationnode/index.html deleted file mode 100644 index c467e6406b75ca..00000000000000 --- a/files/de/web/api/audiodestinationnode/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- - diff --git a/files/de/web/api/audionode/index.html b/files/de/web/api/audionode/index.html deleted file mode 100644 index db4d810a5372a6..00000000000000 --- a/files/de/web/api/audionode/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- - diff --git a/files/de/web/api/audiotrack/index.html b/files/de/web/api/audiotrack/index.html deleted file mode 100644 index 7c54826e619482..00000000000000 --- a/files/de/web/api/audiotrack/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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/baseaudiocontext/decodeaudiodata/index.html b/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html deleted file mode 100644 index baf9f02c604d24..00000000000000 --- a/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: AudioContext.decodeAudioData() -slug: Web/API/BaseAudioContext/decodeAudioData -translation_of: Web/API/BaseAudioContext/decodeAudioData -original_slug: Web/API/AudioContext/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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/battery_status_api/index.html b/files/de/web/api/battery_status_api/index.html deleted file mode 100644 index 1058103a35fcd1..00000000000000 --- a/files/de/web/api/battery_status_api/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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 deleted file mode 100644 index d86746f06ec689..00000000000000 --- a/files/de/web/api/blob/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -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 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/blob/size/index.html b/files/de/web/api/blob/size/index.html deleted file mode 100644 index f4d832f944fa25..00000000000000 --- a/files/de/web/api/blob/size/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: File.fileSize -slug: Web/API/Blob/size -tags: - - DOM - - Files - - Property -translation_of: Web/API/File/fileSize -original_slug: 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

- -
    -
  • {{domxref("Blob.size")}}
    • -
diff --git a/files/de/web/api/btoa/index.html b/files/de/web/api/btoa/index.html deleted file mode 100644 index 43addc49e4745b..00000000000000 --- a/files/de/web/api/btoa/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: WindowBase64.btoa() -slug: Web/API/btoa -tags: - - API - - Méthode - - Referenz -translation_of: Web/API/WindowOrWorkerGlobalScope/btoa -original_slug: 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

- -{{Compat}} - -

[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/cache/add/index.html b/files/de/web/api/cache/add/index.html deleted file mode 100644 index 0179b2ba5dacbb..00000000000000 --- a/files/de/web/api/cache/add/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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 deleted file mode 100644 index 12fd715a8f7ebf..00000000000000 --- a/files/de/web/api/cache/addall/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index a6e77d8e2f55d8..00000000000000 --- a/files/de/web/api/cache/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -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

- -{{Compat}} - -

[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/canvas_api/index.html b/files/de/web/api/canvas_api/index.html deleted file mode 100644 index 3d2e6008b08118..00000000000000 --- a/files/de/web/api/canvas_api/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Canvas -slug: Web/API/Canvas_API -tags: - - API - - Canvas - - HTML5 -translation_of: Web/API/Canvas_API -original_slug: Web/HTML/Canvas ---- -
{{CanvasSidebar}}
- -

Mit der Einführung von HTML5 wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels JavaScript-API vorgestellt: {{HTMLElement("canvas")}}. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

- -

Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

- -

Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

- -

Beispiel

- -

Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.

- -

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);
-
- -

Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )

- -

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

- -

Referenzen

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("Path2D")}} {{experimental_inline}}
    • -
-
- -

Die Schnittstellen, die sich auf WebGLRenderingContext beziehen, werden unter WebGL zusammengefasst.

- -

Leitfäden und Anleitungen

- -
-
Canvas Tutorial
-
Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst
-
Code-Ausschnitte: Canvas
-
Einige Entwickler-orientierte Code-Ausschnitte, die <canvas> enthalten.
-
Demo: A basic ray-caster
-
A demo of ray-tracing animation using canvas.
-
DOM-Objekte in ein canvas zeichnen
-
Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.
-
Videos mit canvas manipulieren
-
{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.
-
- -

Quellen

- -

Allgemeines

- - - -

Libraries

- -
    -
  • Fabric.js is an open-source canvas library with SVG parsing capabilities.
    • -
  • Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
    • -
  • Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
    • -
  • libCanvas is powerful and lightweight canvas framework.
    • -
  • Processing.js is a port of the Processing visualization language.
    • -
  • PlayCanvas is an open source game engine.
    • -
  • Pixi.js is an open source game engine.
    • -
  • PlotKit is a charting and graphing library.
    • -
  • Rekapi is an animation key-framing API for Canvas.
    • -
  • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
    • -
  • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
    • -
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}}
- -

Siehe auch

- - diff --git a/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html deleted file mode 100644 index 937bec0b1da1ba..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Fortgeschrittene Animationen -slug: Web/API/Canvas_API/Tutorial/Advanced_animations -tags: - - Canvas - - Graphics - - Tutoria -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations -original_slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

In dem vorherigem Kapitel machten wir einige Basisanimationen und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.

-
- -

Einen Ball zeichnen

- -

Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein ball - Objekt erstellen, welches Eigenschaften und eine draw() - Methode enthält, um es in die Canvas zu zeichnen.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.

- -

Geschwindigkeit hinzufügen

- -

Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im vorherigen Kapitel von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Gebundenheit

- -

Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die x - und yposition von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Erste Demo

- -

Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.

- - - -

{{EmbedLiveSample("Erste_Demo", "610", "310")}}

- -

Acceleration

- -

Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.

- - - -

{{EmbedLiveSample("Acceleration", "610", "310")}}

- -

Spureneffekt

- -

Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.

- -
ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);
- - - -

{{EmbedLiveSample("Spureneffekt", "610", "310")}}

- -

Mauskontrolle hinzufügen

- -

Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das mousemove - Ereignis benutzen. Das click - Ereignis lässt den Ball wieder hüpfen.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255,255,255,0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e){
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener("click",function(e){
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.

- -

{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}

- -

Breakout

- -

Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein Breakout - Spiel zu verwandeln? Schauen Sie sich unseren Spieleentwickelungsbereich an für mehr auf Spiele bezogene Artikel.

- -

Siehe auch

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index 62087870f2ff22..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,754 +0,0 @@ ---- -title: Stile und Farben verwenden -slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -original_slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

Im Kapitel über das Zeichnen von Formen haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.

-
- -

Farben

- -

Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: fillStyle und strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
-

Bestimmt den Stil in dem die Form gefüllt wird.

-
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
-

Bestimmt den Stil der Umrandungslinien.

-
-
- -

color steht entweder für einen CSS {{cssxref("<color>")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).

- -
-

Anmerkung: Nach dem Setzen von strokeStyle und/oder fillStyle wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen fillStyle bzw. strokeStyle neu definiert werden.

-
- -

Der String color sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("<color>")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = "orange";
-ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255,165,0)";
-ctx.fillStyle = "rgba(255,165,0,1)";
-
- -

Beispiel für fillStyle

- -

In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i=0;i<6;i++){
-    for (var j=0;j<6;j++){
-      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
-                       Math.floor(255-42.5*j) + ',0)';
-      ctx.fillRect(j*25,i*25,25,25);
-    }
-  }
-}
- - - -

Das Ergebnis:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

Beispiel für strokeStyle

- -

Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die strokeStyle Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode arc() zeichnen wir Kreise an Stelle der Quadrate.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i=0;i<6;i++){
-      for (var j=0;j<6;j++){
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
-                         Math.floor(255-42.5*j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - - - -

The result looks like this:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

Transparenz

- -

Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft globalAlpha oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
-

Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.

-
-
- -

Die Eigenschaft globalTransparency ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.

- -

Die Eigenschaften strokeStyle und fillStyle akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:

- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = "rgba(255,0,0,0.5)";
-ctx.fillStyle = "rgba(255,0,0,0.5)";
-
- -

Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).

- -

Beispiel für globalAlpha

- -

In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft globalAlpha wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der for-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0,0,75,75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75,0,75,75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0,75,75,75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75,75,75,75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i=0;i<7;i++){
-    ctx.beginPath();
-    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
- - - - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

Beispiel für die Verwendung von rgba()

- -

Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von globalAlpha erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255,221,0)';
-  ctx.fillRect(0,0,150,37.5);
-  ctx.fillStyle = 'rgb(102,204,0)';
-  ctx.fillRect(0,37.5,150,37.5);
-  ctx.fillStyle = 'rgb(0,153,255)';
-  ctx.fillRect(0,75,150,37.5);
-  ctx.fillStyle = 'rgb(255,51,0)';
-  ctx.fillRect(0,112.5,150,37.5);
-
-  // Draw semi transparent rectangles
-  for (var i=0;i<10;i++){
-    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
-    for (var j=0;j<4;j++){
-      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
-    }
-  }
-}
- - - - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Linienstile

- -

Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Setzt die Breite später gezeichneter Linien.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Definiert die Form der Linienenden.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Definiert die Form der „Ecken“, an denen sich Linien treffen.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.
-
- -
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
-

Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).

-
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
-

Definiert das aktuelle Strichlierungsmuster.

-
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
-

Beschreibt wo das Strichlierunsmuster startet.

-
-
- -

Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.

- -

Beispiel für lineWidth

- -

Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.

- -

Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.

- -

Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++){
-    ctx.lineWidth = 1+i;
-    ctx.beginPath();
-    ctx.moveTo(5+i*14,5);
-    ctx.lineTo(5+i*14,140);
-    ctx.stroke();
-  }
-}
-
- - - - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.

- -

- -

Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.

- -

Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.

- -
-

Anmerkung: Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom lineCap-Stil abhängt, der standardmäßig auf butt eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den lineCap-Sti auf square setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)

- -

Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit closePath() geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen lineJoin-Stil verbunden; dessen Standardwert ist miter, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.

-
- -

Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.

- -

Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.

- -

Beispiel für lineCap

- -

Die Eigenschaft lineCap bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: butt (Standardwert), round und square.

- -

- -
-
butt
-
-

Glatte Enden an den Endpunkten.

-
-
round
-
-

Abgerundete Enden.

-
-
square
-
-

Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.

-
-
- -

In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für lineCap. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.

- -

Die linke Linie verwendet die Option butt. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option round, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option square. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt','round','square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10,10);
-  ctx.lineTo(140,10);
-  ctx.moveTo(10,140);
-  ctx.lineTo(140,140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i=0;i<lineCap.length;i++){
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25+i*50,10);
-    ctx.lineTo(25+i*50,140);
-    ctx.stroke();
-  }
-}
-
- - - - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

Beispiel für lineJoin

- -

Die Eigenschaft lineJoin bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).

- -

Diese Eigenschaft kann drei mögliche Werte annehmen: round, bevel und miter (Standardeinstellung). Beachten Sie, dass die lineJoin-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.

- -

- -
-
round
-
-

Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.

-
-
bevel
-
-

Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.

-
-
miter
-
-

Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft miterLimit beeinflusst, welche später erklärt wird.

-
-
- -

Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von lineJoin anhand von drei Linienzügen; das Ergebnis sehen Sie oben.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round','bevel','miter'];
-  ctx.lineWidth = 10;
-  for (var i=0;i<lineJoin.length;i++){
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5,5+i*40);
-    ctx.lineTo(35,45+i*40);
-    ctx.lineTo(75,5+i*40);
-    ctx.lineTo(115,45+i*40);
-    ctx.lineTo(155,5+i*40);
-    ctx.stroke();
-  }
-}
-
- - - - - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

Beispiel für die Eigenschaft miterLimit

- -

Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option miter die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. miter) aber exponentiell.

- -

Die Eigenschaft miterLimit bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung bevel. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von miterLimit (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann miterLimit unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.

- -

Präziser gesagt ist beschreibt miterLimit das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • Der Standardwert von miterLimit = 10.0 schneidet alle Überhänge von Winkeln kleiner als 11° ab.
    • -
  • Ein Wert von √2 ≈ 1.4142136 (aufgerundet) stutzt Überhänge bei spitzen Winkeln, und belässt nur bei stumpfen und rechten Winkeln zusätzlich Raum für die Gehrung.
    • -
  • Ein Wert von 1.0 ist erlaubt, schneidet aber alle Überhänge ab.
    • -
  • Werte kleiner als 1.0 sind nicht erlaubt.
    • -
- -

In dieser einfachen Demonstration können Sie den Wert für miterLimit dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.

- -

Stellen Sie in diesem Programm ein miterLimit kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist miterLimit größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0,0,150,150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5,50,160,50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0,100);
-  for (i=0;i<24;i++){
-    var dy = i%2==0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Strichlierte Linien verwenden

- -

Die Methode setLineDash und die Eigenschaft lineDashOffset definieren die Strichlierung von Linien. setLineDash akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei lineDashOffset einen Versatz am Start des Musters definiert.

- -

In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche einfache Animationen zu erzeugen.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10,10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradienten

- -

Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer fillStyle- oder strokeStyle-Eigenschaft zu.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
-

Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (x1, y1) und Zielpunkt (x2, y2).

-
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
-

Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (x1, y1) und einem Radius von r1, der zweite mit Mittelpunkt (x2, y2) und demRadius r2.

-
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Sobald wir ein canvasGradient-Objekt erzeugt haben, können wir mit der Methode addColorStop() Farben zuordnen.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
-

Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("<color>")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.

-
-
- -

Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.

- -
var lineargradient = ctx.createLinearGradient(0,0,150,150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

Beispiel für createLinearGradient

- -

In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl strokeStyle als auch fillStyle ein canvasGradient-Objekt als Eingabe.

- -

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0,0,0,150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10,10,130,130);
-  ctx.strokeRect(50,50,50,50);
-
-}
-
- - - - - - -

Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.

- -

Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

Beispiel für createRadialGradient

- -

In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
-}
-
- - - - - -

Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.

- -

Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf #019F62 auch als rgba(1,159,98,1) geschrieben werden könnte.

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Muster

- -

In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: createPattern()

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
-

Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. image ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String image gibt an wie das Bild benutzt wird.

-
-
- -

type enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.

- -
-
repeat
-
-

Wiederhole („kachle“) das Bild horizontal und vertikal.

-
-
repeat-x
-
-

Wiederhole das Bild nur horizontal.

-
-
repeat-y
-
-

Nur vertikale Wiederholung.

-
-
no-repeat
-
-

Keine Wiederholung, das Bild wird nur einmal benutzt.

-
-
- -

- -

Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer fillStyle- oder strokeStyle-Eigenschaft zuordnen.

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img,'repeat');
-
- -

- -
-

Anmerkung: Wie bei drawImage() müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.

-
- -

Beispiel für createPattern

- -

Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem fillStyle zuzuordnen. Bemerkenswert ist hierbei die Verwendung des onload()-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function(){
-
-    // create pattern
-    var ptrn = ctx.createPattern(img,'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
-}
-
- - - - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Schatten

- -

An der Erzeugung von Schatten sind vier Eignschaften beteiligt:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
-

Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.

-
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
-

Wie shadowOffsetY, aber in vertikaler Richtung.

-
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
-

Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.

-
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
-

Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.

-
-
- -

Die Eigenschaften shadowOffsetX und shadowOffsetY bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.

- -

Die Eigenschaft shadowBlur definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.

- -

Die Eigenschaft shadowColor ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.

- -
-

Note: Schatten werden nur bei source-over compositing operations gezeichnet.

-
- -

Beispiel für Text mit Schatteneffekt

- -

Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-  ctx.font = "20px Times New Roman";
-  ctx.fillStyle = "Black";
-  ctx.fillText("Sample String", 5, 30);
-}
-
- - - - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

Wir werden uns die font-Eigenschaft und die fillText-Methode im nächsten Kapitel über das Zeichnen von Text genauer ansehen.

- -

Canvas Füllregeln

- -

Bei der Verwendung von fill ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.

- -

Zwei Werte sind möglich:

- - - -

In diesem Beispiel verwenden wir die evenodd-Regel.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
-  ctx.fill("evenodd");
-}
- - - - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/de/web/api/canvas_api/tutorial/basic_animations/index.html b/files/de/web/api/canvas_api/tutorial/basic_animations/index.html deleted file mode 100644 index 42e65d0cbb461e..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/basic_animations/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -title: Einfache Animationen -slug: Web/API/Canvas_API/Tutorial/Basic_animations -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations -original_slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.

-
- -

Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.

- -

Grundlagen der Animation

- -

Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:

- -
    -
  1. Bereinigen Sie die Zeichenfläche (canvas)
    - Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.
    2. -
  2. Sichern Sie den Canvas-Zustand
    - Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die save()-Methode.
    3. -
  3. Zeichnen Sie die animierte Form
    - Hier erzeugen Sie nun endlich die eigentliche Animation.
    4. -
  4. Setzen Sie den Canvas-Zustand zurück.
    - Mit der restore()-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.
    5. -
- -

Steuerung einer Animation

- -

Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine for-Schleife zu erzeugen.

- -

Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:

- -

Updates nach Zeitplan

- -

Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Ruft die unter function spezifierte Funktion wiederholend nach der in delay (Milisekunden) definierten Zeitspanne auf.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Ruft die spezifizierte Funktion nach der unter delay festgelegten Zeitspanne einmalig auf.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
-
- -

If you don't want any user interaction you can use the setInterval() function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout(). By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.

- -
-

In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The requestAnimationFrame method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article Anatomy of a video game in our Game development zone.

-
- -

An animated solar system

- -

This example animates a small model of our solar system.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init() {
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0, 0, 300, 300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
-  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
-  ctx.save();
-  ctx.translate(150, 150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
-  ctx.translate(105, 0);
-  ctx.fillRect(0, -12, 50, 24); // Shadow
-  ctx.drawImage(earth, -12, -12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
-  ctx.translate(0, 28.5);
-  ctx.drawImage(moon, -3.5, -3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun, 0, 0, 300, 300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

An animated clock

- -

This example draws an animated clock, showing your current time.

- -
function clock() {
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-  ctx.scale(0.4, 0.4);
-  ctx.rotate(-Math.PI / 2);
-  ctx.strokeStyle = 'black';
-  ctx.fillStyle = 'white';
-  ctx.lineWidth = 8;
-  ctx.lineCap = 'round';
-
-  // Hour marks
-  ctx.save();
-  for (var i = 0; i < 12; i++) {
-    ctx.beginPath();
-    ctx.rotate(Math.PI / 6);
-    ctx.moveTo(100, 0);
-    ctx.lineTo(120, 0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i = 0; i < 60; i++) {
-    if (i % 5!= 0) {
-      ctx.beginPath();
-      ctx.moveTo(117, 0);
-      ctx.lineTo(120, 0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI / 30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr >= 12 ? hr - 12 : hr;
-
-  ctx.fillStyle = 'black';
-
-  // write Hours
-  ctx.save();
-  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20, 0);
-  ctx.lineTo(80, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28, 0);
-  ctx.lineTo(112, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI / 30);
-  ctx.strokeStyle = '#D40000';
-  ctx.fillStyle = '#D40000';
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30, 0);
-  ctx.lineTo(83, 0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
-  ctx.stroke();
-  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

A looping panorama

- -

In this example, a panorama is scrolled left-to-right. We're using an image of Yosemite National Park we took from Wikipedia, but you could use any image that's larger than the canvas.

- -
var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // lower is faster
-var scale = 1.05;
-var y = -4.5; // vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW > CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas
-    if (imgW > CanvasXSize) { clearX = imgW; } // image width larger than canvas
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // image height larger than canvas
-    else { clearY = CanvasYSize; }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        // reset, start from beginning
-        if (x > CanvasXSize) { x = -imgW + x; }
-        // draw additional image1
-        if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); }
-        // draw additional image2
-        if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); }
-    }
-
-    // if image is > Canvas Size
-    else {
-        // reset, start from beginning
-        if (x > (CanvasXSize)) { x = CanvasXSize - imgW; }
-        // draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); }
-    }
-    // draw image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // amount to move
-    x += dx;
-}
-
- -

Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the CanvasXZSize and CanvasYSize variables in the JavaScript code.

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

- -

Other examples

- -
-
A basic ray-caster
-
A good example of how to do animations using keyboard controls.
-
Advanced animations
-
We will have a look at some advanced animation techniques and physics in the next chapter.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/de/web/api/canvas_api/tutorial/basic_usage/index.html b/files/de/web/api/canvas_api/tutorial/basic_usage/index.html deleted file mode 100644 index 4ceffb327ca5e8..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/basic_usage/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Grundlagen Canvas -slug: Web/API/Canvas_API/Tutorial/Basic_usage -tags: - - Canvas - - Graphics - - HTML - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage -original_slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.

-
- -

Das <canvas>-Element

- -

Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute src und alt nicht besitzt. Das <canvas>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-Eigenschaften gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von 300px und eine Höhe von 150px. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.

- -
-

Hinweis: Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute width und height explizit im <canvas> und nicht über CSS.

-
- -

Das id-Attribut ist eines der globalen Attribute in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine id zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.

- -

Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei SVG)

- -
-

Fallback

- -

Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.

- -

Beispiele:

- -
<canvas id="stockGraph" width="150" height="150">
-  aktueller Wechselkurs: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Benötigter </canvas>-Tag

- -

Im Unterschied zu dem {{HTMLElement("img")}}-Element, benötigt das {{HTMLElement("canvas")}}-Element den Endtag (</canvas>).

- -

Wenn kein Fallback definiert wird, reicht ein <canvas id="foo" ...></canvas> völlig aus.

- -

Der Kontext

- -

{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch WebGL (3D context) basierend auf OpenGL ES.

- -

Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine Methode getContext(), mit der der Kontext definiert wird. getContext() benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".

- -
var canvas = document.getElementById("tutorial");
-var ctx = canvas.getContext("2d");
-
- -

Die erste Zeile speichert in der Variablen canvas den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die getContext()-Methode aufgerufen, um den Kontext in der Variablen ctx zu speichern.

- -
-

Browserkompatibilität prüfen

- -

Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der getContext()-Methode überprüft wird. Beispiel:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext) {
-  var ctx = canvas.getContext('2d');
-  // weiterer Code
-} else {
-  alert("Dein Browser unterstützt das <canvas> Element nicht")
-}
-
-
-
- -

HTML-Struktur

- -

Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.

- -
-

Hinweis: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw() {
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext) {
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

Das Skript enthält eine Funktion draw(), die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.

- -

So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.

- -

{{EmbedLiveSample("HTML-Struktur", 160, 160)}}

- -

Einfaches Beispiel

- -

Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.

- -
<!DOCTYPE html>
-<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect(10, 10, 55, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect(30, 30, 55, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

Demo:

- -

{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html deleted file mode 100644 index 7839c63c4b4bb1..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,454 +0,0 @@ ---- -title: Formen zeichnen mit Canvas -slug: Web/API/Canvas_API/Tutorial/Drawing_shapes -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes -original_slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen ---- -

{{CanvasSidebar}}

- -

Koordinatensystem

- -

Bevor wir mit dem Zeichnen beginnen können, müssen wir über das canvas grid oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.

- -

Rechtecke zeichnen

- -

Nicht wie in SVG, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.

- -
-

Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:

- -
-
fillRect(x, y, breite, höhe)
-
Zeichnet ein gefülltes Rechteck
-
strokeRect(x, y, breite, höhe)
-
Zeichnet den Rahmen eines Rechteckes
-
clearRect(x, y, breite, höhe)
-
Der Bereich des Rechteckes wird transparent
-
- -

Alle drei Funktionen benötigen die selben drei Argumente. x und y beschreibt die Position (siehe Koordinatensystem). breite und höhe beschreiben die Größe des Rechteckes.

- -

Beispiel mit Rechtecken

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

Die fillRect()-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die clearRect()-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die strokeRect()-Methode einen 50px großen schwarzen Rahmen in der Mitte.

- -

Später werden wir zwei alternative Methoden für clearRect() behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.

- -

Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.

- -

Pfade zeichnen

- -

Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:

- -
-
beginPath()
-
Erstellt einen Pfad und beendet ggf. einen älteren.
-
closePath()
-
Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.
-
stroke()
-
Zeichnet die Kontur des Pfades.
-
fill()
-
Zeichnet die Füllung des Pfades.
-
- -

Zuerst wird also die beginPath()-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode beginPath() oder ein Aufruf der Methode closePath() löscht die Pfadanweisungen. Optional kann nun closePath() ausgeführt werden.

- -
Hinweis: Wenn fill() ausgeführt wird, wird automatisch der Pfad beendet, sodass closePath() nicht mehr ausgeführt werden muss. Da ist nicht der Fall wenn stroke() ausgeführt wird.
- -

Ein Dreieck zeichnen

- -

So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75, 50);
-    ctx.lineTo(100, 75);
-    ctx.lineTo(100, 25);
-    ctx.fill();
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}

- -

Stift bewegen

- -

Eine sehr sinnvolle Methode ist moveTo(). Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.

- -
-
moveTo(x, y)
-
Bewegt den Stift zu der Koordinate (x , y).
-
- -

Meist wird direkt nach dem Aufruf von beginPath() moveTo() ausgeführt. Außerdem kann man moveTo() für nichtverbundene Pfade benutzen. Beispiel (moveTo()-Aufrufe sind rote Linien):

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-     var ctx = canvas.getContext('2d');
-
-     ctx.beginPath();
-     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
-     ctx.moveTo(110, 75);
-     ctx.arc(75, 75, 35, 0, Math.PI, false);    // Mund
-     ctx.moveTo(65, 65);
-     ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Linkes Auge
-     ctx.moveTo(95, 65);
-     ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Rechtes Auge
-     ctx.stroke();
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -
-

Hinweis: arc() zeichnet einen Kreisbogen. Mehr dazu: Kreisbögen.

-
- -

Linien

- -

Für Linien verwendet man die lineTo()-Methode:

- -
-
lineTo(x, y)
-
Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).
-
- -

Diese Methode erwartet wie moveTo() zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.

- -

Beispiel mit zwei Dreiecken:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
- -

Es beginnt mit der Ausführung von beginPath() um eine neue Form zu beginnen. Danach wird mit moveTo() der Startpunkt festgelegt. Danach werden die Linien gezeichnet.

- -

{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Kreisbögen

- -

Um Kreise oder Kreisbögen zu zeichnen, benutzt man die arc()-Methode.

- -
-
arc(x, y, radius, startWinkel, endWinkel, uhrzeigersinn)
-
Zeichnet einen Kreisbogen.
-
- -

Diese Methode benötigt sechs Parameter: x und y sind die Koordinaten des Mittelpunktes des Kreisbogens. radius ist der Radius des Kreisbogens. startWinkel und endWinkel definieren die Punkte auf dem Kreis in rad. Der uhrzeigersinn-Parameter ist true, wenn der Kreisbogen gegen den Uhrzeigersinn und false wenn er im Uhrzeigersinn gezeichnet werden soll.

- -
-

Hinweis: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: rad = (Math.PI / 180) * deg.

-
-Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // x coordinate
-        var y = 25 + i * 50; // y coordinate
-        var radius = 20; // Arc radius
-        var startAngle = 0; // Starting point on circle
-        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
-        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i > 1) {
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} - -

Bezier und quadratische Kurven

- -

Bézierkurven sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.

- -
-
quadraticCurveTo(cp1x, cp1y, x, y)
-
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe des Kontrollpunktes mit den Koordinaten (cp1x, cp1y).
-
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe der Kontrollpunkte mit den Koordinaten (cp1x, cp1y) und (cp2x, cp2y).
-
- -

Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.

- -

Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.

- -

Quadratische Bézierkurven

- -

Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
- -

{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Kubische Bézierkurven

- -

Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Cubic curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
- -

{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Rechtecke

- -

Es gibt auch eine Rechtecksmethode für Pfade:

- -
-
rect(x, y, width, height)
-
Zeichnet ein Rechteck.
-
- -

Nachdem diese Methode ausgeführt wurde, wird automatisch moveTo(0, 0) ausgeführt.

- -

Kombinationen

- -

Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
-    roundedRect(ctx, 53, 53, 49, 33, 10);
-    roundedRect(ctx, 53, 119, 49, 16, 6);
-    roundedRect(ctx, 135, 53, 49, 33, 10);
-    roundedRect(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for (var i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for (i = 0; i < 6; i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for (i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = 'black';
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// A utility function to draw a rectangle with rounded corners.
-
-function roundedRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + radius);
-  ctx.lineTo(x, y + height - radius);
-  ctx.arcTo(x, y + height, x + radius, y + height, radius);
-  ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
-  ctx.lineTo(x + width, y + radius);
-  ctx.arcTo(x + width, y, x + width - radius, y, radius);
-  ctx.lineTo(x + radius, y);
-  ctx.arcTo(x, y, x, y + radius, radius);
-  ctx.stroke();
-}
- -
-

Demo:

- -

{{EmbedLiveSample("Kombinationen", 160, 160)}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

-
-
diff --git a/files/de/web/api/canvas_api/tutorial/drawing_text/index.html b/files/de/web/api/canvas_api/tutorial/drawing_text/index.html deleted file mode 100644 index 91b39e612e9b35..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/drawing_text/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Text zeichnen -slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Fortgeschritten - - Grafik - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text -original_slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

Nachdem wir im vorigen Kapitel gesehen haben, wie man Gestaltung und Farben anwendet , werden wir nun einen Blick darauf werfen, wie man Text auf ein canvas zeichnet.

-
- -

Text zeichnen

- -

Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
-
- -

ein fillText-Beispiel

- -

Der Text wird mit dem aktuellen fillStyle gefüllt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

ein strokeText-Beispiel

- -

Der Text wird mit dem aktuellen strokeStyle umrandet.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

Text gestalten

- -

In den obigen Beispielen nutzen wir bereits die font-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem canvas zu beeinflussen:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die CSS {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Einstellung der Text-Ausrichtung. Mögliche Werte: start, end, left, right oder center. Der Standard-Wert ist start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
-
- -

These properties might be familiar to you, if you have worked with CSS before.

- -

The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline property.The top of the em square is -roughly at the top of the glyphs in a font, the hanging baseline is -where some glyphs like आ are anchored, the middle is half-way -between the top of the em square and the bottom of the em square, -the alphabetic baseline is where characters like Á, ÿ, -f, and Ω are anchored, the ideographic baseline is -where glyphs like 私 and 達 are anchored, and the bottom -of the em square is roughly at the bottom of the glyphs in a -font. The top and bottom of the bounding box can be far from these -baselines, due to glyphs extending far outside the em square.

- -

A textBaseline example

- -

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

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

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

- -

Advanced text measurements

- -

In the case you need to obtain more details about the text, the following method allows you to measure it.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
-
- -

The following code snippet shows how you can measure a text and get its width.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Gecko-specific notes

- -

In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/de/web/api/canvas_api/tutorial/index.html b/files/de/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 338787ed3d41dd..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Canvas Tutorial -slug: Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -original_slug: Web/Guide/HTML/Canvas_Tutorial ---- -

- -

<canvas> ("Leinwand") ist ein HTML Element, auf das man mit Hilfe von Skripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <canvas>-Element erstellen lassen.

- -

Das <canvas>-Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. Gecko 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <canvas>-Element ist Teil der WhatWG Web applications 1.0 Spezifikation (HTML5).

- -

Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.

- -

Vorbereitung

- -

Das <canvas>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von HTML und JavaScript voraus. Einige ältere Browser unterstützen das <canvas>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute height und width oder mit Hilfe von CSS ändern. Um auf dem <canvas>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".

- -

In diesem Tutorial

- - - -

Siehe auch

- - - -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html deleted file mode 100644 index 3c433694ecb93b..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Canvas optimieren -slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas -tags: - - Canvas - - Fortgeschritten - - Grafik - - HTML - - HTML5 - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas -original_slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.

-
- -

Tipps zur Performance

- -

Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.

- -

Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas

- -

Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.

- -
myEntity.offscreenCanvas = document.createElement('canvas');
-myEntity.offscreenCanvas.width = myEntity.width;
-myEntity.offscreenCanvas.height = myEntity.height;
-myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
-
-myEntity.render(myEntity.offscreenContext);
-
- -

Vermeiden Sie Gleitkomma-Koordinaten

- -

Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} runden, zum Beispiel mit Hilfe von {{jsxref("Math.floor()")}}.

- -

Skalieren Sie keine Bilder in drawImage

- -

Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.

- -

Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen

- -

Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.

- -

Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black
-  }
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3 }
-  #game-layer { z-index: 2 }
-  #background-layer { z-index: 1 }
-</style>
-
- -

Nutzen Sie CSS für große Hintergrundbilder

- -

Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.

- -

Skalieren Sie das Canvas mit CSS-Transformationen

- -

CSS-Transformationen sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

Nutzen Sie das moz-opaque Attribut (nur Gecko)

- -

Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das moz-opaque Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.

- -
<canvas id="myCanvas" moz-opaque></canvas>
- -

Weitere Tipps

- -
    -
  • Bündeln Sie Canvas-Aufrufe (Zeichnen Sie zum Beispiel eine Linie mit mehreren Knotenpunkten, anstatt einzelne Linien).
    • -
  • Vermeiden Sie unnötige Zustandsänderungen des Canvas.
    • -
  • Rendern Sie nur die Unterschiede, nicht den ganzen neuen Zustand.
    • -
  • Vermeiden Sie die {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}-Eigenschaft, soweit möglich.
    • -
  • Vermeiden Sie das Zeichnen von Text, falls möglich.
    • -
  • Versuchen Sie verschiedene Wege, das Canvas zu leeren ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} oder Größenänderung des Canvas)
    • -
  • Bei Animationen, nutzen Sie {{domxref("window.requestAnimationFrame()")}} anstatt {{domxref("window.setInterval()")}} .
    • -
  • Seien Sie vorsichtig mit schwergewichtigen Physik-Bibliotheken.
    • -
- -

Siehe auch

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/de/web/api/canvas_api/tutorial/using_images/index.html b/files/de/web/api/canvas_api/tutorial/using_images/index.html deleted file mode 100644 index c9a8f7ec17ba46..00000000000000 --- a/files/de/web/api/canvas_api/tutorial/using_images/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Bilder -slug: Web/API/Canvas_API/Tutorial/Using_images -translation_of: Web/API/Canvas_API/Tutorial/Using_images -original_slug: Web/Guide/HTML/Canvas_Tutorial/Bilder ---- -

{{CanvasSidebar}}

- -

Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.

- -

Um Bilder zu importieren bedarf es bloß zwei Schritte:

- -
    -
  1. Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.
    2. -
  2. Das Bild mithilfe der drawImage() Funktion zeichnen.
    3. -
- -

Bilder importieren

- -

Die canvas API unterstützt folgende Typen als Bilder:

- -
-
{{domxref("HTMLImageElement")}}
-
Diese Bilder können mithilfe des Image() Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.
-
{{domxref("HTMLVideoElement")}}
-
Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.
-
{{domxref("HTMLCanvasElement")}}
-
Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.
-
{{domxref("ImageBitmap")}}
-
Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.
-
- -

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

- -

There are several ways to get images for use on a canvas.

- -

Bilder von derselben Seite

- -

Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:

- -
    -
  • Die {{domxref("document.images")}} Sammlung
    • -
  • Die {{domxref("document.getElementsByTagName()")}} Methode
    • -
  • Die {{domxref("document.getElementById()")}} Methode, wenn eine Id festgelegt worden ist
    • -
- -

Bilder von anderen Seiten nutzen

- -

Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein "getaintes Canvas".

- -

Andere Canvas Elemente benutzen

- -

Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.

- -

Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.

- -

Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.

- -

Ein Bild von Grund auf

- -

Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den Image()-Konstruktor verwenden:

- -
var img = new Image(); // Erstelle neues Image-Objekt
-img.src = 'myImage.png'; // Setze den Pfad zum Bild
- -

Wird dieses Skript ausgeführt, fängt das Bild an zu laden.

- -
-

Achtung: Wenn drawImage() vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.

-
- -
var img = new Image();   // Erstelle neues Image-Objekt
-img.addEventListener("load", function() {
-  // füge hier den drawImage()-Befehl ein
-}, false);
-img.src = 'myImage.png'; // Setze den Pfad zum Bild
-
- -

Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir JavaScript Image Preloader angucken (ist leder auf Englisch).

- -

Embedding an image via data: URL

- -

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

- -
var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

- -

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

- -

Using frames from a video

- -

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

- -

Drawing images

- -

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

- -
-
drawImage(image, x, y)
-
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
-
- -

Example: A simple line graph

- -

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    ctx.drawImage(img,0,0);
-    ctx.beginPath();
-    ctx.moveTo(30,96);
-    ctx.lineTo(70,66);
-    ctx.lineTo(103,76);
-    ctx.lineTo(170,15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

The resulting graph looks like this:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

Scaling

- -

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

- -
-
drawImage(image, x, y, width, height)
-
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
-
- -

Example: Tiling an image

- -

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

- -
-

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    for (var i=0;i<4;i++){
-      for (var j=0;j<3;j++){
-        ctx.drawImage(img,j*50,i*38,50,38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

The resulting canvas looks like this:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

Slicing

- -

The third and last variant of the drawImage() method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.

- -
-
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
-
- -

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

- -

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

- -

Example: Framing an image

- -

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'),0,0);
-}
- -

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

- - - -

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}} element is inserted for each image and a frame is drawn arround it.

- -

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

- -

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

And here's some CSS to make things look nice:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Tying it all together is the JavaScript to draw our framed images:

- -
function draw() {
-
-  // Loop through all images
-  for (var i=0;i<document.images.length;i++){
-
-    // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id')!='frame'){
-
-      // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width',132);
-      canvas.setAttribute('height',150);
-
-      // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Draw image to canvas
-      ctx.drawImage(document.images[i],15,20);
-
-      // Add frame
-      ctx.drawImage(document.getElementById('frame'),0,0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}

- -

Controlling image scaling behavior

- -

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

- -
ctx.mozImageSmoothingEnabled = false;
-
- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}

diff --git a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html deleted file mode 100644 index fa6f0d95c114ff..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -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

- -
    -
  • {{domxref("CanvasRenderingContext2D")}} interface
    • -
  • Canvas API
    • -
diff --git a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html deleted file mode 100644 index 17ea593c6e0357..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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:

- - - -

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

- -

Spezifikationen

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

Browserkompatibilität

- -{{Compat}} - -

Siehe auch

- -
    -
  • Das zugehörige Interface, {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasRenderingContext2D.fillStyle")}}
    • -
  • {{domxref("CanvasRenderingContext2D.clearRect()")}}
    • -
  • {{domxref("CanvasRenderingContext2D.strokeRect()")}}
    • -
diff --git a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html deleted file mode 100644 index 299efba4ce6b49..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index b3ca20f34fa5ad..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/index.html +++ /dev/null @@ -1,432 +0,0 @@ ---- -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")}}

-
- -
    -
  • Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: translate(), transform(), rotate(), scale(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), arc(), shadowOffsetX, shadowOffsetY, shadowBlur.
    • -
- -

See also

- -
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html deleted file mode 100644 index 7f53e507637fc9..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -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:

- - - -

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

- -

Specifications

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

Browser compatibility

- -{{Compat}} - -

Compatibility notes

- -
    -
  • Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.
    • -
- -

See also

- -
    -
  • The interface defining it, {{domxref("CanvasRenderingContext2D")}}.
    • -
diff --git a/files/de/web/api/canvasrenderingcontext2d/scale/index.html b/files/de/web/api/canvasrenderingcontext2d/scale/index.html deleted file mode 100644 index ed0247a7ded78c..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/scale/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -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:

- - - -

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

- - - -

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

- -

Spezifikationen

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

Browserkompabilität

- -{{Compat}} - -

Siehe auch

- -
    -
  • Das Interface, durch das es definiert wird, {{domxref("CanvasRenderingContext2D")}}
    • -
diff --git a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html deleted file mode 100644 index 2aab574146f8c2..00000000000000 --- a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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

- -
    -
  • Das Interface welches es definiert, {{domxref("CanvasRenderingContext2D")}}.
    • -
diff --git a/files/de/web/api/console/assert/index.html b/files/de/web/api/console/assert/index.html deleted file mode 100644 index a90567c1ce4f4e..00000000000000 --- a/files/de/web/api/console/assert/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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 deleted file mode 100644 index 3ff370c14bdfe3..00000000000000 --- a/files/de/web/api/console/clear/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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 deleted file mode 100644 index 4fdcf42299fc51..00000000000000 --- a/files/de/web/api/console/count/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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 deleted file mode 100644 index 15d8e258fce146..00000000000000 --- a/files/de/web/api/console/debug/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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 deleted file mode 100644 index bd54b88c467316..00000000000000 --- a/files/de/web/api/console/dir/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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 deleted file mode 100644 index b955f7e5902528..00000000000000 --- a/files/de/web/api/console/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -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 Methoden, die für das Console Objekt verfügbar sind und enthält einige 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.

-
- -

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

- -

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

- -
    -
  • Wenn in Firefox auf einer Seite ein console-Objekt definiert ist, wird das in Firefox integrierte Objekt überschrieben.
    • -
  • Vor {{Gecko("12.0")}} funktionieren die Methoden des console-Objekts nur, wenn die Webkonsole geöffnet ist. Beginnend mit {{Gecko("12.0")}} wird die Ausgabe zwischengespeichert, bis die Webkonsole geöffnet wird. Anschließend wird sie angezeigt.
    • -
  • Es ist erwähnenswert, dass das in Firefox integrierte Console-Objekt mit dem von Firebug bereitgestellten kompatibel ist.
    • -
- -

Siehe auch

- - - -

Andere Implementierungen

- - diff --git a/files/de/web/api/console/log/index.html b/files/de/web/api/console/log/index.html deleted file mode 100644 index acaaa75ff8c214..00000000000000 --- a/files/de/web/api/console/log/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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

- -{{Compat}} - -

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

- -
    -
  • console.log gibt das Element als HTML-artige Baumstruktur aus
    • -
  • console.dir gibt das Element als JSON-artige Baumstruktur aus
    • -
- -

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 deleted file mode 100644 index 204b2b0127ef34..00000000000000 --- a/files/de/web/api/console/table/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/api/console/time/index.html b/files/de/web/api/console/time/index.html deleted file mode 100644 index e12e77dfd216dd..00000000000000 --- a/files/de/web/api/console/time/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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 deleted file mode 100644 index 91c6b220db0383..00000000000000 --- a/files/de/web/api/console/timeend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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 deleted file mode 100644 index c9df168aecfd14..00000000000000 --- a/files/de/web/api/console/warn/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/crypto/index.html b/files/de/web/api/crypto/index.html deleted file mode 100644 index 27056c67171942..00000000000000 --- a/files/de/web/api/crypto/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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}} - -

Siehe auch

- - diff --git a/files/de/web/api/css/escape/index.html b/files/de/web/api/css/escape/index.html deleted file mode 100644 index 0ec3aafe3a63c4..00000000000000 --- a/files/de/web/api/css/escape/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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 deleted file mode 100644 index 16453f9c9efa1b..00000000000000 --- a/files/de/web/api/css/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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}} - -

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 deleted file mode 100644 index accc599902059a..00000000000000 --- a/files/de/web/api/css_painting_api/guide/index.html +++ /dev/null @@ -1,534 +0,0 @@ ---- -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/cssmediarule/index.html b/files/de/web/api/cssmediarule/index.html deleted file mode 100644 index f73408701526ac..00000000000000 --- a/files/de/web/api/cssmediarule/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 816dc5c85177a4..00000000000000 --- a/files/de/web/api/csspagerule/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/api/cssrule/csstext/index.html b/files/de/web/api/cssrule/csstext/index.html deleted file mode 100644 index 789cd7519a1064..00000000000000 --- a/files/de/web/api/cssrule/csstext/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -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 deleted file mode 100644 index 11867287dd1bcb..00000000000000 --- a/files/de/web/api/cssrule/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -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 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.

- -{{Compat}} - -

See also

- - diff --git a/files/de/web/api/customelementregistry/define/index.html b/files/de/web/api/customelementregistry/define/index.html deleted file mode 100644 index 698b84ea8ab734..00000000000000 --- a/files/de/web/api/customelementregistry/define/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -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:

- -
    -
  • Autonomes benutzerdefiniertes Element: Eigenständige Elemente; Sie erben nicht von eingebauten HTML-Elementen.
    • -
  • Angepasstes integriertes Element: Diese Elemente erben und erweitern eingebaute HTML-Elemente.
    • -
- -

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 deleted file mode 100644 index 83da12159bd543..00000000000000 --- a/files/de/web/api/customelementregistry/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -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 deleted file mode 100644 index 548461ea1d3c32..00000000000000 --- a/files/de/web/api/dedicatedworkerglobalscope/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -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 {{event("Event_handlers", "event handler")}} 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 {{event("Event_handlers", "event handler")}} 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 deleted file mode 100644 index 149ecbae48d86d..00000000000000 --- a/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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 deleted file mode 100644 index 139a83d8075bd9..00000000000000 --- a/files/de/web/api/document/adoptnode/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -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 deleted file mode 100644 index fe1fb31fc612f6..00000000000000 --- a/files/de/web/api/document/alinkcolor/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -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 deleted file mode 100644 index e474de0d2e8cda..00000000000000 --- a/files/de/web/api/document/body/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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

- -{{Specifications}} - -

Browser Kompatibilität

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("document.head")}}
    • -
diff --git a/files/de/web/api/document/createattribute/index.html b/files/de/web/api/document/createattribute/index.html deleted file mode 100644 index 9d1cb7e5ce62c4..00000000000000 --- a/files/de/web/api/document/createattribute/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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

- -
    -
  • attribute ist ein Attributsknoten.
    • -
  • name ist ein String, der den Namen des Attributs enthält.
    • -
- -

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

- -
    -
  • {{domxref("document.createElement")}}
    • -
diff --git a/files/de/web/api/document/createdocumentfragment/index.html b/files/de/web/api/document/createdocumentfragment/index.html deleted file mode 100644 index 73710add6d5413..00000000000000 --- a/files/de/web/api/document/createdocumentfragment/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- -
    -
  • {{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}
    • -
  • {{domxref("documentFragment")}}
    • -
diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html deleted file mode 100644 index ae53d2f448c3b0..00000000000000 --- a/files/de/web/api/document/createelement/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -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 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

- -
    -
  • Beim Aufruf auf ein als Dokument-Objekt gekennzeichnetes HTML-Dokument schreibt createElement() seine Argumente in Kleinbuchstaben, bevor es das diese erstellt.
    • -
  • Um ein Element mit qualifizierem Namen und namespace URl zu erstellen nutze {{ domxref("document.createElementNS()") }} stattessen .
    • -
  • Vor Gecko 2.0 {{ geckoRelease("2.0") }}, konntest du abgewinkelte Klammern (< und >) um tagName im Quirks-Modus setzen; seit Gecko 2.0 verhält sich die Funktion im Quirks-Modus und im Standard-Modus gleich.
    • -
  • Seit Gecko 19.0 {{geckoRelease("19.0")}} createElement(null) hat das gleiche bewirkt wie createElement("null"). Bemerke, dass Opera funktioniert mit null ebenfalls, während Chrome und Internet Explorer beide Fehler ausgeben würden.
    • -
  • Seit Gecko 22.0 {{geckoRelease("22.0")}} benutzt createElement() nicht mehr die {{domxref("HTMLSpanElement")}} Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wird HTMLUnknownElement für"bgsound" und "multicol" verwendet, und {{domxref("HTMLElement")}} HTMLElement wird für "image" verwendet.
    • -
  • Die Gecko Implementierung von createElement ist nicht konform mit der DOM Spezifikation für XUL und XHTML Dokumente: localName und namespaceURI werden beim erstellten Element nicht auf null gesetzt.. Siehe auch {{ Bug(280692) }} für weitere Details.
    • -
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
- - - -

Browser-Kompatibiltät

- -

{{Compat("api.Document.createElement")}}

- -

Siehe auch

- - - -
    -
  • {{domxref("Node.removeChild()")}}
    • -
  • {{domxref("Node.replaceChild()")}}
    • -
  • {{domxref("Node.appendChild()")}}
    • -
  • {{domxref("Node.insertBefore()")}}
    • -
  • {{domxref("Node.hasChildNodes()")}}
    • -
  • {{domxref("document.createElementNS()")}} — um die Namespace-URL explizit anzugeben.
    • -
diff --git a/files/de/web/api/document/createelementns/index.html b/files/de/web/api/document/createelementns/index.html deleted file mode 100644 index 94c07381746f82..00000000000000 --- a/files/de/web/api/document/createelementns/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -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.
-
options {{optional_inline}}
-
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

- -
    -
  • HTML - http://www.w3.org/1999/xhtml
    • -
  • SVG - http://www.w3.org/2000/svg
    • -
  • XBL - http://www.mozilla.org/xbl
    • -
  • XUL - http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
    • -
- -

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

- -{{Compat}} - -

[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 deleted file mode 100644 index ec41ecb2119313..00000000000000 --- a/files/de/web/api/document/createtextnode/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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);
-
- -
    -
  • text ist ein Textknoten
    • -
  • data ist eine Zeichenkette oder ein Ausdruck, der eine Zeichenkette erzeugt. Entity-Definitionen (&...;) werden nicht umgesetzt.
    • -
- -

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

- -{{Compat}} diff --git a/files/de/web/api/document/createtreewalker/index.html b/files/de/web/api/document/createtreewalker/index.html deleted file mode 100644 index 518e601eba2b0b..00000000000000 --- a/files/de/web/api/document/createtreewalker/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/document/dir/index.html b/files/de/web/api/document/dir/index.html deleted file mode 100644 index d578b8e309ab38..00000000000000 --- a/files/de/web/api/document/dir/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index b985f2eadcf6c9..00000000000000 --- a/files/de/web/api/document/document/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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 deleted file mode 100644 index a28ae720a5afec..00000000000000 --- a/files/de/web/api/document/documentelement/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -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 deleted file mode 100644 index 222ced785aa9ff..00000000000000 --- a/files/de/web/api/document/fullscreenchange_event/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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 deleted file mode 100644 index 7e2b44b2816d54..00000000000000 --- a/files/de/web/api/document/getelementbyid/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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

- -
    -
  • element ist eine Referenz zu einem Element-Objekt oder null wenn sich kein Element mit der angegebenen ID im Dokument befindet.
    • -
  • id ist ein String, der auf Groß- und Kleinschreibung achtet und die einmalige ID des gesuchten Elements darstellt.
    • -
- -

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

- -{{Compat}} - -

Spezifikation

- -

getElementById wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben.

- - - -

Siehe auch

- -
    -
  • document Referenz für andere Methoden und Eigenschaften, die man benutzen kann um Referenzen zu Elementen im Dokument zu bekommen.
    • -
  • document.querySelector() für Selektoren mit Abfragen wie 'div.myclass'
    • -
  • xml:id - hat eine Hilfsmethode, die es getElementById erlaubt, "xml:id" in XML-Dokumenten zu erhalten (wie es z.B. von Ajax-Aufrufen zurückgegeben wird)
    • -
diff --git a/files/de/web/api/document/getelementsbyclassname/index.html b/files/de/web/api/document/getelementsbyclassname/index.html deleted file mode 100644 index 51484780e62c10..00000000000000 --- a/files/de/web/api/document/getelementsbyclassname/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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);
- -
    -
  • elements ist eine live {{ domxref("HTMLCollection") }} von gefunden Elementen.
    • -
  • names ist ein String der eine Liste der gefundenen Klassennamen repräsentiert; Klassennamen sind durch Leerzeichen getrennt.
    • -
  • getElementsByClassName kann auf jedes Element aufgerufen werden und nicht nur auf document. Das Element, auf dass diese Funktion aufgerufen wird, wird als root-Element genutzt.
    • -
- -

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

- -{{Compat}} - -

Spezifikation

- - diff --git a/files/de/web/api/document/head/index.html b/files/de/web/api/document/head/index.html deleted file mode 100644 index 880ca4772f4f6b..00000000000000 --- a/files/de/web/api/document/head/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -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

- -{{Specifications}} - -

Browser Kompatibilität

- -

{{Compat("api.Document.head")}}

- -

Siehe auch

- -
    -
  • {{domxref("document.body")}}
    • -
diff --git a/files/de/web/api/document/importnode/index.html b/files/de/web/api/document/importnode/index.html deleted file mode 100644 index 3496c95a21fd4a..00000000000000 --- a/files/de/web/api/document/importnode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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

- -
    -
  • {{domxref("document.adoptNode()")}}
    • -
  • {{domxref("Node.appendChild()")}}
    • -
  • {{domxref("Node.insertBefore()")}}
    • -
diff --git a/files/de/web/api/document/index.html b/files/de/web/api/document/index.html deleted file mode 100644 index 1668e1f7818d54..00000000000000 --- a/files/de/web/api/document/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -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:

- -
    -
  • Meistens arbeiten Sie mit dem Dokument, in dem das Skript läuft, indem Sie document in den scripts des Dokuments verwenden. (Dasselbe Dokument kann auch als {{domxref("window.document")}} bezeichnet werden.)
    • -
  • Das Dokument eines Iframes über die contentDocument Eigenschaften des Iframes.
    • -
  • Die responseXML of an XMLHttpRequest object.
    • -
  • Das Dokument, zu dem ein bestimmter Knoten oder ein Element gehört, kann über die {{domxref("Node.ownerDocument","ownerDocument")}} -Eigenschaft des Knotens abgerufen werden.
    • -
- -

Depending on the kind of the document (e.g. HTML or XML), different APIs may be available on the document object.

- -
    -
  • All document objects implement the Document interface (and hence the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces). Thus, the "core" properties and methods documented on this page are available for all kinds of documents.
    • -
  • In contemporary browsers, some documents (e.g. those served with the text/html content type) also implement the {{domxref("HTMLDocument")}} interface.
    • -
  • In heutigen Browsern, SVG Dokumente implementieren das {{domxref("SVGDocument")}} Interface.
    • -
- -

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

- -{{Specifications}} - -

Browser Kompatibilität

- -{{Comapt}} diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html deleted file mode 100644 index 840fa32336e1dc..00000000000000 --- a/files/de/web/api/document/queryselector/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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 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 deleted file mode 100644 index 8cb12ec2e6d6b5..00000000000000 --- a/files/de/web/api/document/queryselectorall/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -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 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 deleted file mode 100644 index 68e156f2d81fc5..00000000000000 --- a/files/de/web/api/document/readystate/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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

- -{{Specifications}} - -

Siehe auch

- -
    -
  • {{event("readystatechange")}}
    • -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("load")}}
    • -
diff --git a/files/de/web/api/document/readystatechange_event/index.html b/files/de/web/api/document/readystatechange_event/index.html deleted file mode 100644 index 727815adb043fe..00000000000000 --- a/files/de/web/api/document/readystatechange_event/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: readystatechange -slug: Web/API/Document/readystatechange_event -tags: - - Referenz - - XMLHttpRequest -translation_of: Web/API/Document/readystatechange_event -original_slug: Web/Events/readystatechange ---- -

{{ApiRef}}

- -

Das Ereignis readystatechange wird ausgelöst, wenn sich die Eigenschaft readyState eines Dokumentes verändert hat.

- -

Allgemeine Information

- -
-
Spezifikation
-
HTML5
-
Schnittstelle
-
Event
-
Aufsteigend
-
Nein
-
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

- -
// als Alternative zu DOMContentLoaded
-document.onreadystatechange = function () {
-    if (document.readyState == "interactive") {
-        initApplication();
-    }
-}
-
- -

Browser-Kompatibilität

- -

Dieses Ereignis wird vom Internet Explorer schon sehr lange unterstützt und kann daher als Alternative zum DOMContentLoaded-Ereignis genutzt werden (vgl. Anmerkung [2] im Abschnitt Browserkompatibilität).

- -

Verwandte Ereignisse

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/de/web/api/document/referrer/index.html b/files/de/web/api/document/referrer/index.html deleted file mode 100644 index 1874629c2e3342..00000000000000 --- a/files/de/web/api/document/referrer/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -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 deleted file mode 100644 index 0f2174f50fde6b..00000000000000 --- a/files/de/web/api/document/registerelement/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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.

-
- -

- -

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

- -{{Compat}} - -

[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 deleted file mode 100644 index cb6fcf331c78c5..00000000000000 --- a/files/de/web/api/document/title/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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 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 deleted file mode 100644 index 29770925ee1ccf..00000000000000 --- a/files/de/web/api/document/url/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -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 deleted file mode 100644 index 5fc3e1c80a9698..00000000000000 --- a/files/de/web/api/document/width/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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

- -
    -
  • {{domxref("document.height")}}
    • -
  • {{domxref("Element.clientWidth")}}
    • -
  • {{domxref("Element.scrollWidth")}}
    • -
diff --git a/files/de/web/api/document/write/index.html b/files/de/web/api/document/write/index.html deleted file mode 100644 index 75e91a83389201..00000000000000 --- a/files/de/web/api/document/write/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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

- -
    -
  • {{ domxref("element.innerHTML") }}
    • -
  • {{ domxref("document.createElement()") }}
    • -
diff --git a/files/de/web/api/document/writeln/index.html b/files/de/web/api/document/writeln/index.html deleted file mode 100644 index 96e3dce5c6084d..00000000000000 --- a/files/de/web/api/document/writeln/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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

- -
    -
  • line ist eine Zeichenfolge welche eine Textzeile enthält.
    • -
- -

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/document_object_model/index.html b/files/de/web/api/document_object_model/index.html deleted file mode 100644 index d18955f764c6a3..00000000000000 --- a/files/de/web/api/document_object_model/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: DOM -slug: Web/API/Document_Object_Model -tags: - - DOM -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM -original_slug: DOM ---- -

Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Sie bildet die strukturelle Abbildung des Dokuments und ermöglicht Skripten die Veränderung des Inhalts und dessen Präsentation.

- -

Dokumentation

- -
-
Gecko DOM Referenz
-
Die Gecko Document Object Model Referenz.
-
Über das Document Object Model
-
Eine kleine Einführung ins DOM.
-
Das DOM und JavaScript
-
Was ist das DOM? Was ist JavaScript? Wie kann ich diese Techniken zusammen benutzen? Dieses Dokument beantwortet diese und weitere Fragen.
-
Verwendung von dynamischen Styles
-
Wie man Style-Informationen mittels DOM erhalten und verändern kann.
-
Das XUL-Interface dynamisch verändern
-
Die Grundlagen zum Manipulieren des XUL-UI mit DOM Methoden.
-
Größe von Elementen bestimmen
-
Dieser Artikel beschreibt, wie man den richtigen Größen von Elementen finden kann.
-
Das Document Object Model in Mozilla (engl.)
-
Eine ältere Dokumentation über das DOM, auf mozilla.org.
-
- -

Community

- -
    -
  • Mozillas DOM Foren:{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • -
- -

Tools

- - - -

Verwandte Themen

- - - -

diff --git a/files/de/web/api/documentfragment/index.html b/files/de/web/api/documentfragment/index.html deleted file mode 100644 index c1447b7d05ded1..00000000000000 --- a/files/de/web/api/documentfragment/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- - diff --git a/files/de/web/api/domerror/index.html b/files/de/web/api/domerror/index.html deleted file mode 100644 index 478dc9f3f77ba6..00000000000000 --- a/files/de/web/api/domerror/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{ domxref("DOMException") }}
    • -
diff --git a/files/de/web/api/domparser/index.html b/files/de/web/api/domparser/index.html deleted file mode 100644 index cb77f28f971295..00000000000000 --- a/files/de/web/api/domparser/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/domtokenlist/add/index.html b/files/de/web/api/domtokenlist/add/index.html deleted file mode 100644 index ca9e550eb75aab..00000000000000 --- a/files/de/web/api/domtokenlist/add/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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 deleted file mode 100644 index 41d78ae8f5aff4..00000000000000 --- a/files/de/web/api/domtokenlist/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("DOMSettableTokenList")}} (object that extends DOMTokenList with settable .value property)
    • -
diff --git a/files/de/web/api/dragevent/index.html b/files/de/web/api/dragevent/index.html deleted file mode 100644 index 3111b00bb9cfae..00000000000000 --- a/files/de/web/api/dragevent/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -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

- -

- -
    -
  • {{event("drag")}}
    • -
  • {{event("dragstart")}}
    • -
  • {{event("dragend")}}
    • -
  • {{event("dragover")}}
    • -
  • {{event("dragenter")}}
    • -
  • {{event("dragleave")}}
    • -
  • {{event("dragexit")}}
    • -
  • {{event("drop")}}
    • -
- -

diff --git a/files/de/web/api/element/classlist/index.html b/files/de/web/api/element/classlist/index.html deleted file mode 100644 index c2afb3c5ec9629..00000000000000 --- a/files/de/web/api/element/classlist/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -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

- -{{Compat}} - -

[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

- -
    -
  • {{domxref("element.className")}}
    • -
  • {{domxref("DOMTokenList")}}
    • -
diff --git a/files/de/web/api/element/classname/index.html b/files/de/web/api/element/classname/index.html deleted file mode 100644 index d7f5c9fa202cc3..00000000000000 --- a/files/de/web/api/element/classname/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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;
- -
    -
  • cName ist eine Variable vom Typen string, die eine Klasse oder die, durch Leerzeichen getrennte, Klassen des aktuellen Elements darstellt.
    • -
- -

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

- -{{Compat}} - -

See also

- -
    -
  • {{domxref("element.classList")}}
    • -
diff --git a/files/de/web/api/element/click_event/index.html b/files/de/web/api/element/click_event/index.html deleted file mode 100644 index dc39383df16a5a..00000000000000 --- a/files/de/web/api/element/click_event/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Globaler Eventhandler onclick -slug: Web/API/Element/click_event -tags: - - API - - HTML DOM - - Méthode - - Referencen -translation_of: Web/API/GlobalEventHandlers/onclick -original_slug: 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

- -{{Specifications}} diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html deleted file mode 100644 index 97415ed8de8b1a..00000000000000 --- a/files/de/web/api/element/getboundingclientrect/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -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 deleted file mode 100644 index 5bebeee611f347..00000000000000 --- a/files/de/web/api/element/hasattribute/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/api/element/index.html b/files/de/web/api/element/index.html deleted file mode 100644 index 5232df810a26d8..00000000000000 --- a/files/de/web/api/element/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index e506204ce965a9..00000000000000 --- a/files/de/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -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

- -
    -
  • {{domxref("Node.textContent")}} und {{domxref("Node.innerText")}}
    • -
  • {{domxref("Element.insertAdjacentHTML()")}}
    • -
  • HTML in einen DOM-Baum parsen: {{domxref("DOMParser")}}
    • -
  • Serialisieren von XML oder HTML in einen DOM-Baum: {{domxref("XMLSerializer")}}
    • -
diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html deleted file mode 100644 index b155320d10265e..00000000000000 --- a/files/de/web/api/element/insertadjacenthtml/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("Element.insertAdjacentElement()")}}
    • -
  • {{domxref("Element.insertAdjacentText()")}}
    • -
  • hacks.mozilla.org Gastbeitrag von Henri Sivonen mit Testergebnissen, die Geschwindigkeitsvorteile von insertAdjacentHTML in bestimmten Fällen aufzeigen.
    • -
diff --git a/files/de/web/api/element/queryselector/index.html b/files/de/web/api/element/queryselector/index.html deleted file mode 100644 index f5e0917bc6586d..00000000000000 --- a/files/de/web/api/element/queryselector/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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);
-
- -
    -
  • element und baseElement sind {{domxref("element")}}-Objekte.
    • -
  • selectors ist eine Gruppe von 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

- -
    -
  • {{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}
    • -
  • {{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}
    • -
  • {{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}
    • -
- -

Siehe auch

- - diff --git a/files/de/web/api/element/queryselectorall/index.html b/files/de/web/api/element/queryselectorall/index.html deleted file mode 100644 index c751c6c6fd57ce..00000000000000 --- a/files/de/web/api/element/queryselectorall/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 0cd913b238846e..00000000000000 --- a/files/de/web/api/element/removeattribute/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -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);
-
- -
    -
  • attrName ist der Name des zu entfernenden Attributs (ein String).
    • -
- -

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 deleted file mode 100644 index 4c6e4ccaf3c239..00000000000000 --- a/files/de/web/api/element/requestfullscreen/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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

- -{{Compat}} - -

[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

- -
    -
  • Full-screen API
    • -
  • {{ domxref("Element.requestFullscreen()") }}
    • -
  • {{ domxref("Document.exitFullscreen()") }}
    • -
  • {{ domxref("Document.fullscreen") }}
    • -
  • {{ domxref("Document.fullscreenElement") }}
    • -
  • {{ cssxref(":fullscreen") }}
    • -
  • {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
    • -
diff --git a/files/de/web/api/element/scrollintoview/index.html b/files/de/web/api/element/scrollintoview/index.html deleted file mode 100644 index 179bbe9a558a89..00000000000000 --- a/files/de/web/api/element/scrollintoview/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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 deleted file mode 100644 index 7669455a7ea801..00000000000000 --- a/files/de/web/api/element/scrollleft/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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:

- -
    -
  • Wenn das erste Element nicht gescrollt werden kann (wenn es z.B. keinen overflow hat), erhält scrollLeft den Wert 0.
    • -
  • Wenn ein Wert kleiner als 0 gesetzt wird (größer als 0 für right-to-left Elemente), erhält scrollLeft den Wert 0.
    • -
  • Wenn der Maximalwert, den der Inhalt des gescrollten Elements annehmen kann, überschritten wrid, erhält scrollLeft (nur) den Maximalwert.
    • -
- -

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 deleted file mode 100644 index 1ee136ed3fb742..00000000000000 --- a/files/de/web/api/element/scrollwidth/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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 deleted file mode 100644 index cb01bb2facadd4..00000000000000 --- a/files/de/web/api/element/setattribute/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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);
-
- -
    -
  • name ist der Name des Attributs als String.
    • -
  • value ist der gewünschte neue Wert des Attributs.
    • -
- -

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 deleted file mode 100644 index 88d33777835069..00000000000000 --- a/files/de/web/api/event/bubbles/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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 deleted file mode 100644 index cbd4baed8fe962..00000000000000 --- a/files/de/web/api/event/event/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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

- -
    -
  • {{domxref("Event")}}
    • -
diff --git a/files/de/web/api/event/index.html b/files/de/web/api/event/index.html deleted file mode 100644 index 286eb132aaf915..00000000000000 --- a/files/de/web/api/event/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -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".

- -
-
    -
  • {{domxref("AnimationEvent")}}
    • -
  • {{domxref("AudioProcessingEvent")}}
    • -
  • {{domxref("BeforeInputEvent")}}
    • -
  • {{domxref("BeforeUnloadEvent")}}
    • -
  • {{domxref("BlobEvent")}}
    • -
  • {{domxref("ClipboardEvent")}}
    • -
  • {{domxref("CloseEvent")}}
    • -
  • {{domxref("CompositionEvent")}}
    • -
  • {{domxref("CSSFontFaceLoadEvent")}}
    • -
  • {{domxref("CustomEvent")}}
    • -
  • {{domxref("DeviceLightEvent")}}
    • -
  • {{domxref("DeviceMotionEvent")}}
    • -
  • {{domxref("DeviceOrientationEvent")}}
    • -
  • {{domxref("DeviceProximityEvent")}}
    • -
  • {{domxref("DOMTransactionEvent")}}
    • -
  • {{domxref("DragEvent")}}
    • -
  • {{domxref("EditingBeforeInputEvent")}}
    • -
  • {{domxref("ErrorEvent")}}
    • -
  • {{domxref("FetchEvent")}}
    • -
  • {{domxref("FocusEvent")}}
    • -
  • {{domxref("GamepadEvent")}}
    • -
  • {{domxref("HashChangeEvent")}}
    • -
  • {{domxref("IDBVersionChangeEvent")}}
    • -
  • {{domxref("InputEvent")}}
    • -
  • {{domxref("KeyboardEvent")}}
    • -
  • {{domxref("MediaStreamEvent")}}
    • -
  • {{domxref("MessageEvent")}}
    • -
  • {{domxref("MouseEvent")}}
    • -
  • {{domxref("MutationEvent")}}
    • -
  • {{domxref("OfflineAudioCompletionEvent")}}
    • -
  • {{domxref("PageTransitionEvent")}}
    • -
  • {{domxref("PointerEvent")}}
    • -
  • {{domxref("PopStateEvent")}}
    • -
  • {{domxref("ProgressEvent")}}
    • -
  • {{domxref("RelatedEvent")}}
    • -
  • {{domxref("RTCDataChannelEvent")}}
    • -
  • {{domxref("RTCIdentityErrorEvent")}}
    • -
  • {{domxref("RTCIdentityEvent")}}
    • -
  • {{domxref("RTCPeerConnectionIceEvent")}}
    • -
  • {{domxref("SensorEvent")}}
    • -
  • {{domxref("StorageEvent")}}
    • -
  • {{domxref("SVGEvent")}}
    • -
  • {{domxref("SVGZoomEvent")}}
    • -
  • {{domxref("TimeEvent")}}
    • -
  • {{domxref("TouchEvent")}}
    • -
  • {{domxref("TrackEvent")}}
    • -
  • {{domxref("TransitionEvent")}}
    • -
  • {{domxref("UIEvent")}}
    • -
  • {{domxref("UserProximityEvent")}}
    • -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WheelEvent")}}
    • -
-
- -

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

- -{{Compat}} - -

[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/eventsource/index.html b/files/de/web/api/eventsource/index.html deleted file mode 100644 index 3d4275f935949a..00000000000000 --- a/files/de/web/api/eventsource/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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 {{event("Event_handlers", "event handler")}}-Instanz. Diese wird aufgerufen, wenn ein Fehler auftritt und das {{event("error")}}-Event auf diesem Object ausgelöst wird.
-
{{domxref("EventSource.onmessage")}}
-
Ist eine {{event("Event_handlers", "event handler")}}-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 {{event("Event_handlers", "event handler")}}-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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/eventtarget/addeventlistener/index.html b/files/de/web/api/eventtarget/addeventlistener/index.html deleted file mode 100644 index 36e68620b85679..00000000000000 --- a/files/de/web/api/eventtarget/addeventlistener/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: EventListener -slug: Web/API/EventTarget/addEventListener -tags: - - API - - DOM - - DOM Events -translation_of: Web/API/EventListener -original_slug: 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 handleEvent einer solchen Implementierung ruft automatisch diese Funktion auf.

- -

Siehe auch

- -
    -
  • {{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}
    • -
diff --git a/files/de/web/api/federatedcredential/index.html b/files/de/web/api/federatedcredential/index.html deleted file mode 100644 index caf296e9c696f2..00000000000000 --- a/files/de/web/api/federatedcredential/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/api/fetch_api/index.html b/files/de/web/api/fetch_api/index.html deleted file mode 100644 index 045005001f4264..00000000000000 --- a/files/de/web/api/fetch_api/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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/index.html b/files/de/web/api/file/index.html deleted file mode 100644 index 4f24350391441b..00000000000000 --- a/files/de/web/api/file/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 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

- -{{Compat}} - -

Implementation notes

- -

Gecko notes

- -
    -
  • In Gecko, you can use this API from chrome code. See Using the DOM File API in chrome code for details.
    • -
  • Starting in Gecko 6.0 {{geckoRelease("6.0")}}, privileged code (such as extensions) can pass an nsIFile object to the DOM File constructor to specify the file to reference.
    • -
  • Starting in Gecko 8.0 {{geckoRelease("8.0")}}, you can use new File to create File objects from XPCOM component code instead of having to instantiate the nsIDOMFile object directly. The constructor takes, in contrast to Blob, as second argument the filename. The filename can be any String. - 
    File File(
-  Array parts,
-  String filename,
-  BlobPropertyBag properties
-);
    -
    • -
- -

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 deleted file mode 100644 index 202112dfd60e21..00000000000000 --- a/files/de/web/api/file/name/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("File")}}
    • -
diff --git a/files/de/web/api/file/type/index.html b/files/de/web/api/file/type/index.html deleted file mode 100644 index edd55e8d49acc2..00000000000000 --- a/files/de/web/api/file/type/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: File.type -slug: Web/API/File/type -translation_of: Web/API/File/type -original_slug: Web/API/File/Typ ---- -
{{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_api/using_files_from_web_applications/index.html b/files/de/web/api/file_api/using_files_from_web_applications/index.html deleted file mode 100644 index 600d005f52c4ac..00000000000000 --- a/files/de/web/api/file_api/using_files_from_web_applications/index.html +++ /dev/null @@ -1,509 +0,0 @@ ---- -title: Zugriff auf Dateien von Webapplikationen -slug: Web/API/File_API/Using_files_from_web_applications -translation_of: Web/API/File/Using_files_from_web_applications -original_slug: 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 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

- - diff --git a/files/de/web/api/filereader/index.html b/files/de/web/api/filereader/index.html deleted file mode 100644 index 9ff1f8d336601e..00000000000000 --- a/files/de/web/api/filereader/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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 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

- -
    -
  • EMPTY : 0 : Noch keine Daten geladen.
    • -
  • LOADING : 1 : Daten werden geladen.
    • -
  • DONE : 2 : Der Lesevorgang ist abgeschlossen.
    • -
- -

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

- -{{Compat}} - -

[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/load_event/index.html b/files/de/web/api/filereader/load_event/index.html deleted file mode 100644 index c4b3162d8d942f..00000000000000 --- a/files/de/web/api/filereader/load_event/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: onload -slug: Web/API/FileReader/load_event -tags: - - Dateien - - Lesen -translation_of: Web/API/FileReader/onload -original_slug: 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 deleted file mode 100644 index 5276cc47af5d77..00000000000000 --- a/files/de/web/api/formdata/formdata/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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

- -{{Compat}} - -
-

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 deleted file mode 100644 index 0caa013aa68eef..00000000000000 --- a/files/de/web/api/formdata/get/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/formdata/getall/index.html b/files/de/web/api/formdata/getall/index.html deleted file mode 100644 index c595961ef66c69..00000000000000 --- a/files/de/web/api/formdata/getall/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 deleted file mode 100644 index 33a1a06c917688..00000000000000 --- a/files/de/web/api/formdata/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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/fullscreen_api/index.html b/files/de/web/api/fullscreen_api/index.html deleted file mode 100644 index 7f6e616cc125b8..00000000000000 --- a/files/de/web/api/fullscreen_api/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Vollbild API -slug: Web/API/Fullscreen_API -tags: - - API - - DOM - - JS - - Tutorial - - Vollbild API -translation_of: Web/API/Fullscreen_API -original_slug: Web/API/Vollbild_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 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().

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{ domxref("Element.requestFullscreen()") }}
    • -
  • {{ domxref("Document.exitFullscreen()") }}
    • -
  • {{ domxref("Document.fullscreen") }}
    • -
  • {{ domxref("Document.fullscreenElement") }}
    • -
  • {{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}
    • -
  • {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
    • -
diff --git a/files/de/web/api/gainnode/index.html b/files/de/web/api/gainnode/index.html deleted file mode 100644 index cf8d92a7ef4c91..00000000000000 --- a/files/de/web/api/gainnode/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/gamepad_api/index.html b/files/de/web/api/gamepad_api/index.html deleted file mode 100644 index 18c2495a1b98a1..00000000000000 --- a/files/de/web/api/gamepad_api/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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 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 deleted file mode 100644 index 8a328f5b2861f3..00000000000000 --- a/files/de/web/api/geolocation/getcurrentposition/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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 deleted file mode 100644 index 33c5695d428791..00000000000000 --- a/files/de/web/api/geolocation/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -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/geolocation_api/index.html b/files/de/web/api/geolocation_api/index.html deleted file mode 100644 index 40e7f84f0a1e4f..00000000000000 --- a/files/de/web/api/geolocation_api/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Verwenden von geolocation -slug: Web/API/Geolocation_API -translation_of: Web/API/Geolocation_API -original_slug: Web/WebAPI/verwenden_von_geolocation ---- -

Die "geolocation"-API ermöglicht es Nutzern, einer Web-Applikation die eigene Position mitzuteilen. Um die Privatsphäre des Nutzers zu schützen, wird dieser vorher um Erlaubnis gebeten und muss der Übermittlung zustimmen.

- -

Das geolocation-Objekt

- -

Die geolocation-API wird durch das {{domxref("window.navigator.geolocation","navigator.geolocation")}}-Objekt offengelegt.

- -

Wenn das Objekt existiert, sind die geolocation-Services vorhanden und nutzbar. Sie können die Funktionstüchtigkeit daher wie folgt testen:

- -
if ("geolocation" in navigator) {
-  /* geolocation funktioniert */
-} else {
-  /* geolocation funktioniert NICHT */
-}
-
- -
-

Notiz: In Firefox 24 und älteren Versionen hat "geolocation" in navigator immer true zurückgegeben, auch wenn die API ausgeschaltet war. Dies wurde mit Firefox 25 gelöst um mit dem Standard kompatibel zu sein. ({{ bug(884921) }})

-
- -

Die derzeitige Position abfragen

- -

Um die derzeitige Position des Nutzers zu erhalten, können Sie die Methode {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} aufrufen. Dies startet eine asynchrone Anfrage für den Abruf der Position zu initiieren. Wenn die Position erhalten wurde, wird die übergebene Callback-Funktion ausgeführt. Sie können optional auch eine zweite Callback-Funktion übergeben, welche im Falle eines Fehlers ausgeführt wird. Ein dritter, optionaler Parameter ist ein Konfigurationsobjekt, in dem Sie das maximale Alter der zurückgegeben Position, die maximale Wartezeit für die Anfrage und den Wunsch für eine hohe Genauigkeit festlegegen können.

- -
-

Notiz: Standardmäßig versucht {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} so schnell wie möglich mit einer geringen Genauigkeit zu antworten. Es ist nützlich wenn Sie eine schnelle Antwort benötigen, unabhängig von der Genauigkeit. Beispielsweise Geräte mit einem GPS können eine Minute oder länger benötigen um eine neue Position zu erhalten, also kann es möglich sein, dass weniger genaue Daten (Ort der IP oder von WLANs) zurückgegeben werden.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

Das obige Beispiel wird die Funktion do_something() ausführen, wenn eine Position erhalten wurde.

- -

Die derzeitige Position überwachen

- -

Wenn sich die Positionsdaten ändern (entweder über die Bewegung des Gerätes oder den Erhalt genauere Geolokationsdaten), können Sie eine Callback-Funktion erstellen, die mit der erneuerten Positionsinformation arbeitet. Dies ist über die Funktion {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} möglich, welche die gleichen Eingabeparameter wie {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. besitzt. Die Callback-Funktion wird mehrere Male ausgeführt, dies erlaubt dem Browser die Position aufgrund von Bewegungen oder genaueren Positionsdaten, durch das Verwenden von anderen (langsameren) Methoden, zu erneuern. Die Fehler-Callback-Funktion, welche wie auch in {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, hier optional ist, kann auch mehrfach aufgerufen werden.

- -
-

Notiz: Sie können {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} auch ohne ein vorangestellten Aufruf von {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} nutzen.

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

Die Methode {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} gibt eine numerische ID zurück, die für die eindeutige Identifikation des Positionsüberwachers verwendet werden kann; diese können Sie in der Methode {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} nutzen, um die Positionsüberwachung zu beenden.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Anpassen der Antwort

- -

Sowohl {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} als auch {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} nehmen einen Erfolgs-Callback an, einen optionalen Fehler-Callback und ein optionales PositionOptions-Objekt.

- -

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}

- -

Ein Aufruf von {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} könnte wie folgt aussehen:

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Entschuldigung, keine Positionsinformationen sind verfügbar.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

Ein (englisches) Beispiel von watchPosition in Aktion: http://www.thedotproduct.org/experiments/geo/

- -

Darstellung einer Position

- -

Die Position des Nutzers wird durch ein Position-Objekt dargestellt, welches ein Coordinates-Objekt referenziert.

- -

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}

- -

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}

- -

Fehlerbehandlung

- -

Die Fehler-Callback-Funktion, wenn im Aufruf von getCurrentPosition() oder watchPosition() vorhanden, nimmt ein PositionError-Objekt als ersten Parameter an.

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}

- -

Geolokations-Live-Beispiel

- - - -

HTML Content

- -
<p><button onclick="geoFindMe()">Zeige meine Position an</button></p>
-<div id="out"></div>
-
- -

JavaScript Content

- -
function geoFindMe() {
-  var output = document.getElementById("out");
-
-  if (!navigator.geolocation){
-    output.innerHTML = "<p>Geolokation wird von ihrem Browser nicht unterstützt</p>";
-    return;
-  }
-
-  function success(position) {
-    var latitude  = position.coords.latitude;
-    var longitude = position.coords.longitude;
-
-    output.innerHTML = '<p>Die Latitude ist ' + latitude + '° <br>Die Longitude ist ' + longitude + '°</p>';
-
-    var img = new Image();
-    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
-
-    output.appendChild(img);
-  };
-
-  function error() {
-    output.innerHTML = "Es war nicht möglich Sie zu lokalisieren";
-  };
-
-  output.innerHTML = "<p>Lokalisieren…</p>";
-
-  navigator.geolocation.getCurrentPosition(success, error);
-}
-
- -

Demo:

- -

{{ EmbedLiveSample('Geolokations-Live-Beispiel',350,410) }}

- -

Für die Erlaubnis fragen

- -

Jedes Add-On von addons.mozilla.org, welches dieses Feature nutzt, muss explizit, ähnlich der automatischen Frage von Websites, nach Erlaubnis fragen. Die Antwort des Nutzers wird in einer Konfiguration gespeichert, welche von pref-Parameter bestimmt wird, wenn möglich. Die Funktion, die als callback-Parameter verwendet wird mit einem boolischen Wert aufgerufen, welcher die Antwort des Nutzers anzeigt. Wenn dieser true ist, kann das Add-On Geolokationsdaten nutzen.

- -
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Ort teilen",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Immer teilen",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Niemals teilen",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on möchte deinen Ort abrufen.",
-       function callback(allowed) { alert(allowed); });
-
- -

Browser compatibility

- -{{Compat}} - -

Gecko-Notizen

- -

Firefox besitzt Support für das Lokalisieren über WLAN-Informationen durch die "Google Location"-Services. In einer Transaktion zwischen Firefox und Google werden die Daten übetragen, inklusive Daten des WLAN-Zugriffspunktes, einem Zugriffstoken (ähnlich wie ein zweiwöchiger Cookie), und der IP-Adresse des Nutzers. Für mehr Informationen sollten Sie Mozillas und Googles Datenschutzbestimmungen lesen, welche den Rahmen der Datennutzung angeben.

- -

Siehe auch

- - diff --git a/files/de/web/api/globaleventhandlers/index.html b/files/de/web/api/globaleventhandlers/index.html deleted file mode 100644 index b7cbd5c61ff293..00000000000000 --- a/files/de/web/api/globaleventhandlers/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -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 {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("abort")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.onblur")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("blur")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.oncancel")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cancel")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.oncanplay")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplay")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplaythrough")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.onchange")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("change")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.onclick")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("click")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("close")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("contextmenu")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.oncuechange")}}
-
Ist ein {{event("Event_handlers", "event handler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cuechange")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.ondblclick")}}
-
Ist ein {{event("Event_handlers", "event handler")}}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("dblclick")}} ausgelöst wird.
-
{{domxref("GlobalEventHandlers.ondrag")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("drag")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragend")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("dragend")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragenter")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragexit")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragleave")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragover")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("dragover")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondragstart")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondrop")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("drop")}} event is raised.
-
{{domxref("GlobalEventHandlers.ondurationchange")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onemptied")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("emptied")}} event is raised.
-
{{domxref("GlobalEventHandlers.onended")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("ended")}} event is raised.
-
{{domxref("GlobalEventHandlers.oninput")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("input")}} event is raised.
-
{{domxref("GlobalEventHandlers.oninvalid")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("invalid")}} event is raised.
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("keydown")}} event is raised.
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("keypress")}} event is raised.
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("keyup")}} event is raised.
-
{{domxref("GlobalEventHandlers.onload")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("load")}} event is raised.
-
{{domxref("GlobalEventHandlers.onloadeddata")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
-
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
-
{{domxref("GlobalEventHandlers.onloadstart")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("loadstart")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseenter")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseleave")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousewheel")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
-
{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
-
{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpause")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pause")}} event is raised.
-
{{domxref("GlobalEventHandlers.onplay")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("play")}} event is raised.
-
{{domxref("GlobalEventHandlers.onplaying")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("playing")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerdown")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointermove")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerup")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointercancel")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerover")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerout")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerenter")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerleave")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
-
{{domxref("GlobalEventHandlers.onprogress")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("progress")}} event is raised.
-
{{domxref("GlobalEventHandlers.onratechange")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("reset")}} event is raised.
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("scroll")}} event is raised.
-
{{domxref("GlobalEventHandlers.onseeked")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("seeked")}} event is raised.
-
{{domxref("GlobalEventHandlers.onseeking")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("seeking")}} event is raised.
-
{{domxref("GlobalEventHandlers.onselect")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("select")}} event is raised.
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
-
{{domxref("GlobalEventHandlers.onshow")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("show")}} event is raised.
-
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("sort")}} event is raised.
-
{{domxref("GlobalEventHandlers.onstalled")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("stalled")}} event is raised.
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("submit")}} event is raised.
-
{{domxref("GlobalEventHandlers.onsuspend")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("suspend")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontimeupdate")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
-
{{domxref("GlobalEventHandlers.onvolumechange")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchcancel")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchend")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("touchend")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchmove")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
-
{{domxref("GlobalEventHandlers.ontouchstart")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
-
{{domxref("GlobalEventHandlers.onwaiting")}}
-
Is an {{event("Event_handlers", "event handler")}} 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

- -{{Compat}} - -

[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

- -
    -
  • {{domxref("Element")}}
    • -
diff --git a/files/de/web/api/history_api/index.html b/files/de/web/api/history_api/index.html deleted file mode 100644 index ac468095ce4dea..00000000000000 --- a/files/de/web/api/history_api/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Manipulieren des Browser-Verlaufes -slug: Web/API/History_API -tags: - - Verlauf -translation_of: Web/API/History_API -original_slug: Web/Guide/DOM/Manipulating_the_browser_history ---- -

Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren

- -

Durch den Verlauf gehen

- -

Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden back(), forward() und go().

- -

Vor und zurück bewegen

- -

Um im Verlauf zurück zu navigieren, nutze:

- -
window.history.back();
-
- -

Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.

- -

Auf ähnliche Weise kann so vorwärts navigiert werden:

- -
window.history.forward();
-
- -

An einen bestimmten Punkt im Verlauf springen

- -

Mit der Methode go() ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.

- -

Um eine Seite rückwärts zu gehen (äquivalent zu back()):

- -
window.history.go(-1);
-
- -

Um eine Seite vorwärts zu gehen (äquivalent zu forward()):

- -
window.history.go(1);
-
- -

Gleichermassen ist es möglich, 2 Seiten vorwärts mit go(2) zu gehen, 3 rückwärts mit go(-3) und so weiter.

- -

Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft length bestimmt werden:

- -
var numberOfEntries = window.history.length;
-
- -
Anmerkung: Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für go(); dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.
- -

Hinzufügen und Ändern von Verlaufseinträgen

- -

{{ gecko_minversion_header("2") }}

- -

Mit HTML5 wurden die Methoden history.pushState() und history.replaceState() eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.

- -

Wenn history.pushState() benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten XMLHttpRequest-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster this zur Zeit der Erstellung des XMLHttpRequest-Objektes ist.

- -

Beispiel für die pushState()-Methode

- -

Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "seite 2", "bar.html");
-
- -

Das ändert die angezeigte URL zu http://mozilla.org/bar.html, bringt den Browser aber nicht dazu, bar.html zu laden oder überhaupt dessen Existenz zu überprüfen.

- -

Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein popstate-Event mit einem Status-Objekt, das eine Kopie von stateObj darstellt. Die Seite selbst wird aussehen wie foo.html, aber während dem popstate-Event kann der Inhalt bearbeitet worden sein.

- -

Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu http://mozilla.org/foo.html, und die Seite erhält ein weiteres popstate-Event, dieses Mal mit einem null Status-Objekt. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im popstate-Event vollzogen wird.

- -

Die pushState()-Methode

- -

pushState() übernimmt drei Parameter: ein state Objekt, einen title (welcher aktuell noch ignoriert wird), und (optional) eine URL. Betrachten wir die einzelnen Parameter genauer:

- -
    -
  • -

    state-Objekt — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per pushState() neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird ein popstate-Event ausgelöst. Die state-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.
    -
    - Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt an pushState() übergeben, gibt die Methode eine Exception aus. Wenn mehr Speicherplatz benötigt wird, sollte sessionStorage und/oder localStorage verwendet werden.

    -
    • -
  • -

    title — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.

    -
    • -
  • -

    URL — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von pushState() diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibt pushState() eine Exception zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des documents gesetzt.

    -
    • -
- -
Anmerkung: In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der structured clone algorithm die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.
- -

In gewissem Sinne ist der Aufruf von pushState() ähnlich dem Setzen von window.location = "#foo", insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber pushState() hat ein paar Vorteile:

- -
    -
  • Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.
    - Im Gegensatz dazu bleibt window.location nur dann im selben {{ domxref("document") }} selbst wenn man nur den hash ändert.
    • -
  • Man muss nicht die URL ändern, wenn man nicht will.
    - Im Gegensatz dazu erzeugt window.location = "#foo"; nur dann einen neuen history-Eintrag, wenn der aktuelle hash nicht #foo ist. -
      -
    • Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem hash-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.
      • -
    -
    • -
- -

Man beachte, dass pushState() niemals das Auslösen eines hashchange-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren hash unterscheidet.

- -

Die replaceState()-Methode

- -

history.replaceState() arbeitet genauso wie history.pushState(), abgesehen davon, dass replaceState() den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.

- -

replaceState() ist insbesondere nützlich, um das Status-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.

- -
Anmerkung: In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der structured clone algorithm die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.
- -

Beispiel für die replaceState()-Methode

- -

Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:

- -

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");
- -

Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:

- -
history.replaceState(stateObj, "page 3", "bar2.html");
- -

Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht bar2.html laden oder auch nur prüfen, ob bar2.html existiert.

- -

Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.

- -

- -

The popstate event

- -

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

- -

See {{ domxref("window.onpopstate") }} for sample usage.

- -

Reading the current state

- -

When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts her browser. When your page reloads, the page will receive an onload event, but no popstate event. However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

- -

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

- -
var currentState = history.state;
-
- -

Examples

- -

For a complete example of AJAX web site, please see: Ajax navigation example.

- -

Browser compatibility

- -{{Compat}} - -

See also

- -
    -
  • {{ domxref("window.history") }}
    • -
  • {{ domxref("window.onpopstate") }}
    • -
diff --git a/files/de/web/api/html_drag_and_drop_api/index.html b/files/de/web/api/html_drag_and_drop_api/index.html deleted file mode 100644 index a1d3dc76865c9b..00000000000000 --- a/files/de/web/api/html_drag_and_drop_api/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: DragDrop -slug: Web/API/HTML_Drag_and_Drop_API -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop -original_slug: DragDrop ---- -

-

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/de/web/api/htmlcanvaselement/index.html b/files/de/web/api/htmlcanvaselement/index.html deleted file mode 100644 index a38ecd08608711..00000000000000 --- a/files/de/web/api/htmlcanvaselement/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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

- -{{Compat}} - -

[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

- -
    -
  • HTML element implementing this interface: {{HTMLElement("canvas")}}.
    • -
diff --git a/files/de/web/api/htmlcanvaselement/todataurl/index.html b/files/de/web/api/htmlcanvaselement/todataurl/index.html deleted file mode 100644 index 7145c9ebc5ad80..00000000000000 --- a/files/de/web/api/htmlcanvaselement/todataurl/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -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.

- -
    -
  • Wenn die Höhe oder die Breite des Canvas 0 ist, wird der String "data:," zurückgegeben.
    • -
  • Wenn die Art der Anfrage nicht image/png ist, aber der zurückgegebene Wert mit data:image/png beginnt, dann wird die Anfrage nicht unterstützt.
    • -
  • Chrome unterstützt außerdem den Typ image/webp.
    • -
- -

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

- -{{Compat}} - -

Schauen Sie auch unter

- -
    -
  • Das Interface definiert, {{domxref("HTMLCanvasElement")}}.
    • -
  • Data URIs in der HTTP Referenz.
    • -
diff --git a/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html deleted file mode 100644 index a66c3b6959b307..00000000000000 --- a/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WebGLRenderingContext.isContextLost()")}}
    • -
  • {{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}
    • -
diff --git a/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html deleted file mode 100644 index 1534dfc6c0a6c0..00000000000000 --- a/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WebGLRenderingContext.isContextLost()")}}
    • -
  • {{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}
    • -
diff --git a/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html deleted file mode 100644 index c3d1cd1dee3f2a..00000000000000 --- a/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WebGLRenderingContext.isContextLost()")}}
    • -
  • {{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}
    • -
diff --git a/files/de/web/api/htmlcollection/index.html b/files/de/web/api/htmlcollection/index.html deleted file mode 100644 index 9f9422f17a4b85..00000000000000 --- a/files/de/web/api/htmlcollection/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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

- -
    -
  • {{domxref("NodeList")}}
    • -
  • {{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}
    • -
diff --git a/files/de/web/api/htmlelement/change_event/index.html b/files/de/web/api/htmlelement/change_event/index.html deleted file mode 100644 index 20fa00bf695f84..00000000000000 --- a/files/de/web/api/htmlelement/change_event/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: change -slug: Web/API/HTMLElement/change_event -translation_of: Web/API/HTMLElement/change_event -original_slug: Web/Events/change ---- -

Das change Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das change Event nicht bei jeder Änderung der value Eigenschaft ausgelöst.

- -

General info

- -
-
Specification
-
HTML5
-
Interface
-
{{domxref("Event")}}
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
undefined
-
- -

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

Beschreibung

- -

Das change Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:

- -
    -
  • Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <input type="radio"> und <input type="checkbox">;
    • -
  • Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines {{HTMLElement("select")}}'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <input type="date">, beim Auswählen einer Datei im File Picker für <input type="file">, etc.);
    • -
  • Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines {{HTMLElement("textarea")}} oder <input type="text">).
    • -
- -

Verschiedene Webbbrowser unterscheiden sich darin, ob das change Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das change event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <select> (see {{bug("126379")}}) Element nimmt.

- -

Die HTML Spezifikation listet die <input> Typen, welche das change Event auslösen können.

- -

Beispiele

- -

Ein unvollständiges Beispiel auf jsfiddle: http://jsfiddle.net/nfakc/5/, welches möglicherweise nich in allen Webbrowsern funktioniert.

- -

Beispiel: Change Event auf einem select

- -

Der folgende Code behandelt das change Event eines select durch den Aufruf der changeEventHandler Funktion im onchange Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.

- -
<html>
-  <head>
-    <title>Example: Change event on a select</title>
-    <script type="text/javascript">
-      function changeEventHandler(event) {
-        alert('You like ' + event.target.value + ' ice cream.');
-      }
-    </script>
-    </head>
-    <body>
-        <label>Choose an ice cream flavor: </label>
-        <select size="1" onchange="changeEventHandler(event);">
-            <option>chocolate</option>
-            <option>strawberry</option>
-            <option>vanilla</option>
-        </select>
-    </body>
-</html>
-
- -

Siehe auch

- -

{{domxref("NetworkInformation.connection")}} löst das change Event aus, wenn sich die Informationen zur Verbindung verändern.

- -

Webbrowserkompatibilität

- -

{{ CompatibilityTable() }}

- -

Laut QuirksMode sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.

diff --git a/files/de/web/api/htmlelement/innertext/index.html b/files/de/web/api/htmlelement/innertext/index.html deleted file mode 100644 index 83e8e639849870..00000000000000 --- a/files/de/web/api/htmlelement/innertext/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/HTMLElement/innerText -tags: - - API DOM Property Reference -translation_of: Web/API/HTMLElement/innerText -original_slug: Web/API/Node/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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("HTMLElement.outerText")}}
    • -
  • {{domxref("Element.innerHTML")}}
    • -
diff --git a/files/de/web/api/htmlformelement/elements/index.html b/files/de/web/api/htmlformelement/elements/index.html deleted file mode 100644 index b4d947f5b61fa4..00000000000000 --- a/files/de/web/api/htmlformelement/elements/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -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 deleted file mode 100644 index 0e56ff61685f97..00000000000000 --- a/files/de/web/api/htmlformelement/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -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.

- -
    -
  • document.forms - returns an array of HTMLFormElement objects referencing all forms on the page.
    • -
  • document.forms[index] - returns an HTMLFormElement object referencing the form at the specified index.
    • -
  • document.forms['id'] - returns an HTMLFormElement object referencing the form with the specified id.
    • -
  • document.forms['name'] - returns an HTMLFormElement object referencing the form with the specified name.
    • -
- -

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

- -{{Compat}} - -

[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

- -
    -
  • The HTML element implementing this interface: {{ HTMLElement("form") }}.
    • -
diff --git a/files/de/web/api/htmlformelement/submit_event/index.html b/files/de/web/api/htmlformelement/submit_event/index.html deleted file mode 100644 index 722fba4d465cf3..00000000000000 --- a/files/de/web/api/htmlformelement/submit_event/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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/htmlheadelement/index.html b/files/de/web/api/htmlheadelement/index.html deleted file mode 100644 index 0f2e2020d5e497..00000000000000 --- a/files/de/web/api/htmlheadelement/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: head -slug: Web/API/HTMLHeadElement -tags: - - HTML - - HTML Elemente - - HTML Referenz -translation_of: Web/API/HTMLHeadElement -original_slug: Web/HTML/Element/head ---- -

Das <head> HTML Element legt den Kopf eines Dokuments fest. In diesem werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten.

- -

Beispiel

- -
<html>
-  <head>
-    <title>Seitentitel</title>
-  </head>
-</html>
-
- -

Spezifikationen

- - - -

{{HTMLRef}}

diff --git a/files/de/web/api/htmlinputelement/select/index.html b/files/de/web/api/htmlinputelement/select/index.html deleted file mode 100644 index 14354e31dc2602..00000000000000 --- a/files/de/web/api/htmlinputelement/select/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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

- -
    -
  • {{ HTMLElement("input") }}
    • -
  • {{ HTMLElement("textarea") }}
    • -
  • {{ domxref("HTMLInputElement") }}
    • -
  • {{ domxref("HTMLInputElement.setSelectionRange") }}
    • -
diff --git a/files/de/web/api/htmlslotelement/assignednodes/index.html b/files/de/web/api/htmlslotelement/assignednodes/index.html deleted file mode 100644 index e4ebec7514ab83..00000000000000 --- a/files/de/web/api/htmlslotelement/assignednodes/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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 deleted file mode 100644 index 44e147e5aab82c..00000000000000 --- a/files/de/web/api/htmlslotelement/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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 deleted file mode 100644 index 290185691e4f3b..00000000000000 --- a/files/de/web/api/htmltableelement/createcaption/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index c979659fb6e235..00000000000000 --- a/files/de/web/api/htmltableelement/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -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

- -
    -
  • The HTML element implementing this interface: {{HTMLElement("table")}}.
    • -
diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html deleted file mode 100644 index 63b121ea3f05c6..00000000000000 --- a/files/de/web/api/htmltableelement/insertrow/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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

- -
    -
  • {{domxref("HTMLTableRowElement.insertCell()")}}
    • -
  • Das HTML Element, das Zeilen repräsentiert: {{domxref("HTMLTableRowElement")}}
    • -
diff --git a/files/de/web/api/htmlunknownelement/index.html b/files/de/web/api/htmlunknownelement/index.html deleted file mode 100644 index 03d2235955bfd0..00000000000000 --- a/files/de/web/api/htmlunknownelement/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

- -
    -
  • Veraltete oder nicht standardmäßige HTML-Elemente, die diese Schnittstelle implementieren:
    - {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}
    • -
  • {{DOMxRef("SVGUnknownElement")}}
    • -
diff --git a/files/de/web/api/index.html b/files/de/web/api/index.html deleted file mode 100644 index 3173fac5cf07d0..00000000000000 --- a/files/de/web/api/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -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 deleted file mode 100644 index 77b6890a5fd6bf..00000000000000 --- a/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -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:

- -
    -
  • Persistent: Persistente Daten sollen für einen längeren Zeitraum zur Verfügung stehen. Sie werden nur gelöscht, wenn sich der Benutzer aktiv dazu entschließt (zum Beispiel kann man in Firefox und Chrome auswählen, alle Daten oder nur Daten von bestimmten Seiten zu löschen, indem man dies über Einstellungen und Datenschutz & Sicherheit > Websitedaten auswählt).
    • -
  • Temporär: Diese Daten müssen nicht über einen längeren Zeitraum gespeichert werden. Sie werden in der Reihenfolge gelöscht, wie sie am wenigsten benutzt wurden (LRU policy) sobald Storage limits erreicht wurden.
    • -
- -

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

- -
    -
  • <profile>/storage — das Hauptverzeichnis für Speicher, die durch den Quota Manager verwaltet werden (siehe unten)
    • -
  • <profile>/storage/permanent — Repository für die Speicherung persistenter Daten
    • -
  • <profile>/storage/temporary — Repository für die Speicherung temporärer Daten
    • -
  • <profile>/storage/default — Standard-Repository für die Speicherung von Daten
    • -
- -
-
-

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:

- -
    -
  • mozilla.org — Gruppe 1, Quelle 1
    • -
  • www.mozilla.org — Gruppe 1, Quelle 2
    • -
  • joe.blogs.mozilla.org — Gruppe 1, Quelle 3
    • -
  • firefox.com — Gruppe 2, Quelle 4
    • -
- -

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:

- -
    -
  • Das Gruppenlimit ist eine harte Grenze: es löst keien Datenlöschung aus.
    • -
  • Das globale Limit ist eine weiche Grenze, da eine Möglichkeit besteht, dass durch die ausgelöste Datenlöschung Speicher frei wird und sofort genutzt werden kann.
    • -
- -
-

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/index.html b/files/de/web/api/indexeddb_api/index.html deleted file mode 100644 index 8363ae604b22fa..00000000000000 --- a/files/de/web/api/indexeddb_api/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -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

- -{{Compat}} - -
    -
  • [1] {{domxref("IDBCursorWithValue")}} is not available in workers until Gecko 42.0 {{geckoRelease("42.0")}}.
    • -
  • [2] This feature is currently hidden behind a flag — to enable it and experiment, go to about:config and enable dom.indexedDB.experimental.
    • -
- -

See also

- -
    -
  • localForage: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.
    • -
  • dexie.js: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.
    • -
diff --git a/files/de/web/api/indexeddb_api/using_indexeddb/index.html b/files/de/web/api/indexeddb_api/using_indexeddb/index.html deleted file mode 100644 index d82e78fb1e8c7b..00000000000000 --- a/files/de/web/api/indexeddb_api/using_indexeddb/index.html +++ /dev/null @@ -1,1181 +0,0 @@ ---- -title: Verwendung von IndexedDB -slug: Web/API/IndexedDB_API/Using_IndexedDB -translation_of: Web/API/IndexedDB_API/Using_IndexedDB -original_slug: Web/API/IndexedDB_API/IndexedDB_verwenden ---- -

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 deleted file mode 100644 index 00d8bcf7ae5412..00000000000000 --- a/files/de/web/api/keyboardevent/altkey/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- -
    -
  • {{ domxref("KeyboardEvent") }}
    • -
diff --git a/files/de/web/api/keyboardevent/getmodifierstate/index.html b/files/de/web/api/keyboardevent/getmodifierstate/index.html deleted file mode 100644 index cbc2d5b76d0737..00000000000000 --- a/files/de/web/api/keyboardevent/getmodifierstate/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -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
- -
    -
  • Auf den anderen Plattformen werden Alt, Control und Shift unterstützt werden.
    • -
  • Alle Modifikatoren (außer "FnLock", "Hyper", "Super" und "Symbol", die nach der Implementierung von Gecko definiert werden) stehen immer für nicht vertrauenswürdige Ereignisse auf Gecko zur Verfügung. Das hängt nicht von der Plattform ab.
    • -
- -

"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

- -
    -
  • Das {{domxref("KeyboardEvent")}}, zu dem die Methode gehört.
    • -
  • {{domxref("MouseEvent.getModifierState")}}
    • -
diff --git a/files/de/web/api/keyboardevent/index.html b/files/de/web/api/keyboardevent/index.html deleted file mode 100644 index c943a3b1a1ccbc..00000000000000 --- a/files/de/web/api/keyboardevent/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -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

- -{{Compat}} - -

[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

- -
    -
  • {{domxref("KeyboardEvent.code")}}.
    • -
  • {{domxref("KeyboardEvent.key")}}.
    • -
  • {{domxref("KeyboardEvent.getModifierState")}}
    • -
diff --git a/files/de/web/api/keyboardevent/keycode/index.html b/files/de/web/api/keyboardevent/keycode/index.html deleted file mode 100644 index 033b1ce1dba1c6..00000000000000 --- a/files/de/web/api/keyboardevent/keycode/index.html +++ /dev/null @@ -1,3183 +0,0 @@ ---- -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/messageevent/index.html b/files/de/web/api/messageevent/index.html deleted file mode 100644 index 4b492b4dc6a56a..00000000000000 --- a/files/de/web/api/messageevent/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -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:

- -
    -
  • Server-sent events (siehe {{domxref("EventSource.onmessage")}}).
    • -
  • Web sockets (siehe onmessage Eigentschaft des WebSocket Interface).
    • -
  • Cross-document messaging (siehe {{domxref("Window.postMessage()")}} und {{domxref("Window.onmessage")}}).
    • -
  • Channel messaging (siehe {{domxref("MessagePort.postMessage()")}} und {{domxref("MessagePort.onmessage")}}).
    • -
  • Cross-worker/document messaging (wie in den oberen beiden Einträgen, aber auch in {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, usw.)
    • -
  • Broadcast channels (siehe {{domxref("Broadcastchannel.postMessage()")}}) und {{domxref("BroadcastChannel.onmessage")}}).
    • -
  • WebRTC data channels (siehe {{domxref("RTCDataChannel.onmessage")}}).
    • -
- -

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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("ExtendableMessageEvent")}} — ist diesem Interface sehr ähnlich, wird aber in Interfaces genutzt die Authoren mehr Flexibilität geben möchten.
    • -
diff --git a/files/de/web/api/mouseevent/index.html b/files/de/web/api/mouseevent/index.html deleted file mode 100644 index c10716beadddb5..00000000000000 --- a/files/de/web/api/mouseevent/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -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

- -{{Compat}} - -

[1] Setzt das Aktivieren von ExperimentalCanvasFeatures voraus.

- -

Siehe auch

- -
    -
  • Das direkte Elternobjekt, {{domxref("UIEvent")}}.
    • -
diff --git a/files/de/web/api/mutationobserver/index.html b/files/de/web/api/mutationobserver/index.html deleted file mode 100644 index 81f45a232ec35f..00000000000000 --- a/files/de/web/api/mutationobserver/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/api/navigator/index.html b/files/de/web/api/navigator/index.html deleted file mode 100644 index a904ec9d411c33..00000000000000 --- a/files/de/web/api/navigator/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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 deleted file mode 100644 index 0266e39cb25a47..00000000000000 --- a/files/de/web/api/navigator/registerprotocolhandler/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -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 Example below.

- -

Otherwise, the scheme must be one of the schemes on the whitelist below:

- -
-
    -
  • bitcoin
    • -
  • geo
    • -
  • im
    • -
  • irc
    • -
  • ircs
    • -
  • magnet
    • -
  • mailto
    • -
  • mms
    • -
  • news
    • -
  • nntp
    • -
  • sip
    • -
  • sms
    • -
  • smsto
    • -
  • ssh
    • -
  • tel
    • -
  • urn
    • -
  • webcal
    • -
  • wtai
    • -
  • xmpp
    • -
-
- -

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

- -{{Compat}} - -

[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/web-based_protocol_handlers/index.html b/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html deleted file mode 100644 index 3e234fbd3dcbde..00000000000000 --- a/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Webbasierte Protokoll-Handler -slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers -translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers -original_slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler ---- -

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:

- -
    -
  • Das Protokoll.
    • -
  • Das URL Template, das als Handler genutzt werden soll. Das "%s" wird durch das href Attribut des Verweises ersetzt und ein GET Request mit der resultierenden URL ausgeführt.
    • -
  • Der nutzerlesbare Name des Protokoll Handlers.
    • -
- -

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 deleted file mode 100644 index 858d9b27a2ae65..00000000000000 --- a/files/de/web/api/navigator/sendbeacon/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("navigator", "navigator")}}
    • -
diff --git a/files/de/web/api/navigator/vibrate/index.html b/files/de/web/api/navigator/vibrate/index.html deleted file mode 100644 index ae44cf50d0a1fc..00000000000000 --- a/files/de/web/api/navigator/vibrate/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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

- -{{Compat}} - -

[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/node/appendchild/index.html b/files/de/web/api/node/appendchild/index.html deleted file mode 100644 index d87f6b9beb045a..00000000000000 --- a/files/de/web/api/node/appendchild/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("Node.removeChild()")}}
    • -
  • {{domxref("Node.replaceChild()")}}
    • -
  • {{domxref("Node.insertBefore()")}}
    • -
  • {{domxref("Node.hasChildNodes()")}}
    • -
  • {{domxref("ParentNode.append()")}}
    • -
diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html deleted file mode 100644 index 90f912bb6f0f55..00000000000000 --- a/files/de/web/api/node/childnodes/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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

-
    -
  • {{ domxref("Node") }}
    • -
  • {{ domxref("Node.firstChild") }}
    • -
  • {{ domxref("Node.nodeName") }}
    • -
  • {{ domxref('Element.children') }}
    • -
  • {{ domxref("CharacterData") }}
    • -
-

Spezifikationen

- diff --git a/files/de/web/api/node/clonenode/index.html b/files/de/web/api/node/clonenode/index.html deleted file mode 100644 index 99dfc118fe6f60..00000000000000 --- a/files/de/web/api/node/clonenode/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -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

- -{{Compat}} - -

Spezifikationen

- -
    -
  • {{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
    • -
  • {{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
    • -
  • DOM4: cloneNode (draft)
    • -
diff --git a/files/de/web/api/node/firstchild/index.html b/files/de/web/api/node/firstchild/index.html deleted file mode 100644 index 10f4d13a63c152..00000000000000 --- a/files/de/web/api/node/firstchild/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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

- -
    -
  • Gibt null zurück, wenn der gegebene Datenknoten keine Kindknoten hat.
    • -
  • firstChild berücksichtigt wie bereits erwähnt auch TextNodes. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt firstChild bitte {{ domxref("Element.firstElementChild") }}.
    • -
- -

Spezifikationen

- - - -

Siehe auch:

- -
    -
  • {{ domxref("Node") }}
    • -
  • {{ domxref("Node.lastChild") }}
    • -
  • {{ domxref("Node.previousSibling") }}
    • -
  • {{ domxref("Node.childNodes") }}
    • -
diff --git a/files/de/web/api/node/haschildnodes/index.html b/files/de/web/api/node/haschildnodes/index.html deleted file mode 100644 index 20c86907c35115..00000000000000 --- a/files/de/web/api/node/haschildnodes/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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.

- -
    -
  • node.hasChildNodes()
    • -
  • node.firstChild != null (or just node.firstChild)
    • -
  • node.childNodes && node.childNodes.length (or node.childNodes.length > 0)
    • -
- -

Spezifikation

- - - -

Browser Kompatibilität

- -{{Compat}} - -

- -

Siehe auch

- -
    -
  • {{domxref("Node.childNodes")}}
    • -
  • {{domxref("Node.hasAttributes")}}
    • -
diff --git a/files/de/web/api/node/lastchild/index.html b/files/de/web/api/node/lastchild/index.html deleted file mode 100644 index 8e7868e9ca331a..00000000000000 --- a/files/de/web/api/node/lastchild/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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

-
    -
  • Gibt null zurück, wenn der gegebene Datenknoten keine Kindknoten hat.
    • -
  • lastChild berücksichtigt wie bereits erwähnt auch TextNodes. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt lastChild bitte {{ domxref("Element.lastElementChild") }}.
    • -
-

Spezifikation

-

lastChild (en)

-

Siehe auch:

-
    -
  • {{ domxref("Node") }}
    • -
  • {{ domxref("Node.firstChild") }}
    • -
  • {{ domxref("Node.nextSibling") }}
    • -
  • {{ domxref("Node.childNodes") }}
    • -
diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html deleted file mode 100644 index c022f5171adcee..00000000000000 --- a/files/de/web/api/node/nextsibling/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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

- -

Siehe auch

- diff --git a/files/de/web/api/node/nodevalue/index.html b/files/de/web/api/node/nodevalue/index.html deleted file mode 100644 index 11bac0744a426e..00000000000000 --- a/files/de/web/api/node/nodevalue/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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 deleted file mode 100644 index 1a020f5fe70161..00000000000000 --- a/files/de/web/api/node/normalize/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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 deleted file mode 100644 index 7681050bdb1d97..00000000000000 --- a/files/de/web/api/node/parentnode/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -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

-
    -
  • Es kann sich bei dem Elternelement um ein {{ domxref("Element") }}, ein {{ domxref("Document") }} oder ein {{ domxref("DocumentFragment") }} handeln.
    • -
  • parentNode gibt null zurück bei folgenden Knotentypen: Attr, Document, DocumentFragment, Entity, and Notation.
    • -
  • Außerdem wird null zurückgegeben, wenn der Knoten bisher nicht an den DOM-Baum angefügt wurde (weil er womöglich gerade erst erstellt wurde).
    • -
-

Siehe auch

-
    -
  • {{ domxref("Node") }}
    • -
  • {{ Domxref("Node.firstChild") }}
    • -
  • {{ Domxref("Node.lastChild") }}
    • -
  • {{ Domxref("Node.childNodes") }}
    • -
  • {{ Domxref("Node.nextSibling") }}
    • -
  • {{ Domxref("Node.previousSibling") }}
    • -
-

Browserunterstützung

-{{Compat}} -

Spezifikation

-

DOM Level 2 Core: Node.parentNode (en)

diff --git a/files/de/web/api/node/previoussibling/index.html b/files/de/web/api/node/previoussibling/index.html deleted file mode 100644 index 7e8530739e3c3a..00000000000000 --- a/files/de/web/api/node/previoussibling/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Node.previousSibling -slug: Web/API/Node/previousSibling -translation_of: Web/API/Node/previousSibling ---- -

{{ ApiRef() }}

-

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

-
    -
  • {{ domxref("Node.nextSibling") }}
    • -
  • {{ domxref("Element.previousElementSibling") }}
    • -
  • {{ domxref("Node.childNodes") }}
    • -
diff --git a/files/de/web/api/node/removechild/index.html b/files/de/web/api/node/removechild/index.html deleted file mode 100644 index e189e6fc5d4058..00000000000000 --- a/files/de/web/api/node/removechild/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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);
-
- -
    -
  • child ist der Kindknoten, der aus dem DOM entfernt werden soll.
    • -
  • element is der Elternknoten von child.
    • -
  • oldChild hält eine Referenz auf den entfernten Kindknoten. oldChild === 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

- -
    -
  • {{domxref("Node.replaceChild")}}
    • -
  • {{domxref("Node.parentNode")}}
    • -
  • {{domxref("ChildNode.remove")}}
    • -
diff --git a/files/de/web/api/node/replacechild/index.html b/files/de/web/api/node/replacechild/index.html deleted file mode 100644 index ed5d9689b8ed03..00000000000000 --- a/files/de/web/api/node/replacechild/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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);
-
- -
    -
  • newChild ist der neue, oldChild der zu ersetzende Knoten. Falls er bereits im DOM vorhanden ist, wird er zuerst von dort entfernt.
    • -
  • oldChild ist der zu ersetzende Knoten.
    • -
  • replacedNode ist der ersetzte Knoten, also der selbe wie 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

diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html deleted file mode 100644 index f44454ad300043..00000000000000 --- a/files/de/web/api/node/textcontent/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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

- -
    -
  • textContent gibt null zurück, wenn das Element ein Document, ein Dokumenten-Typ oder eine Notation ist. Um den gesamten Text und die CDATA Daten für das gesamte Dokument zu bekommen, kann man document.documentElement.textContent benutzen.
    • -
  • Handelt es sich bei der Node um eine CDATA Sektion, einen Kommentar, eine Prozess-Anweisun oder eine Text-Node, dann gibt textContent den Text in dieser Node zurück (den nodeValue).
    • -
  • Für andere Node-Typen gibt textContent die aneinander gehängten textContent Attribute aller Kind-Nodes zurück, aber ohne Kommentare und Prozess-Anweisungen. Dies ist ein leerer String, wenn die Node keine Kinder hat.
    • -
  • Wenn man diese Eigenschaft setzt, werden alle Kinder der Node ersetzt und mit einer einzelnen Text-Node ersetzt, die den neuen Wert beinhaltet.
    • -
- -

Unterschiede zu innerText

- -

Internet Explorer hat element.innerText eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:

- -
    -
  • Während textContent den Inhalt aller Element, inklusive {{HTMLElement("script")}} und {{HTMLElement("style")}} Elementen, liefert, macht die IE-spezifische Eigenschaft innerText dies nicht.
    • -
  • innerText kennt den Stil und gibt keinen Text versteckter Elemente zurück, was textContent hingegen tut.
    • -
  • Da innerText den CSS-Stil kennt, verursacht es einen Reflow, während textContent dies nicht tut.
    • -
- -

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 deleted file mode 100644 index 445baa8ec472fe..00000000000000 --- a/files/de/web/api/notification/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -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

- -{{Compat}} - -

Gecko notes

- -
    -
  • Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{ domxref("window.navigator.mozNotification","navigator.mozNotification") }} object through its createNotification method.
    • -
  • Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and was supporting the click and close events only.
    • -
  • Nick Desaulniers has written a Notification shim to cover both newer and older implementations.
    • -
  • One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.
    • -
- -

Chrome notes

- -
    -
  • Prior to Chrome 22, the support for notification was following an old prefixed version of the specification and was using the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.
    • -
  • Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.
    • -
- -

Android notes

- -
    -
  • The Android browser has been deprecated since Android 4.0. Newer versions use Chrome.
    • -
- -

Safari notes

- -
    -
  • Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).
    • -
- -

Notes

- -

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 deleted file mode 100644 index 2239e6ffe7552c..00000000000000 --- a/files/de/web/api/notification/permission/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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:

- -
    -
  • granted: Der Benutzer hat explizit die Berechtigung für den aktuellen Ursprung zur Anzeige von Systembenachrichtigungen erteilt.
    • -
  • denied: Der Benutzer hat die Berechtigung für den aktuellen Ursprung explizit abgelehnt, um Systembenachrichtigungen anzuzeigen.
    • -
  • default: Die Benutzerentscheidung ist unbekannt; In diesem Fall wird die Anwendung so tun, als ob die Erlaubnis verweigert wurde.
    • -
- -

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

- -{{Compat}} - -

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 deleted file mode 100644 index 5eb712994bdefa..00000000000000 --- a/files/de/web/api/page_visibility_api/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -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:

- -
    -
  • Eine Webseite beinhaltet ein image carousel, welches nur dann automatisch auf das nächste Bild wechseln soll, wenn der Benutzer die Webseite betrachtet.
    • -
  • Eine Dashboard-Applikation pollt nur dann nach Updates, wenn diese auch sichtbar ist und pausiert diesen Vorgang solange sie unsichtbar ist.
    • -
  • Eine Seite benötigt die Information, wenn sie per "prerender" geladen, um die Anzahl der page views richtig zu ermitteln.
    • -
  • Es können Sounds deaktiviert werden, wenn sich ein Gerät im standby mode befindet (also wenn der Benutzer den Bildschirm seines Smartphones oder Tablets sperrt)
    • -
- -

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 {{ReadOnlyInline}}

- -

Liefert true wenn die Webseite als unsichtbar für den Benutzer gewertet wird und false andernfalls.

- -

document.visibilityState {{ReadOnlyInline}}

- -

Ist ein string welcher den aktuellen Sichtbarkeitsstatus angibt. Mögliche Werte sind:

- -
    -
  • visible : der Seiteninhalt ist mindestens teilweise oder unvollständig sichtbar. In der Praxis bedeutet dies, dass sich die Seite in dem aktiven Tab eines nicht minimierten Fensters befindet.
    • -
  • hidden : der Seiteninhalt ist nicht für den Benutzer sichtbar. In der Praxis bedeutet dies, die Seite befindet sich in einem nicht aktiven (Hintergrund-)Tab des Browserfensters, das Browserfenster ist minimiert oder die Bildschirmsperre des Betriebssystems ist aktiv.
    • -
  • prerender : der Seiteninhalt wird gerade über "prerender" verarbeitet und ist noch nicht sichtbar für den Benutzer (es gilt somit als "hidden" für document.hidden). Ein Dokument kann den Initialzustand "prerender" erhalten und später den Status zu einem anderen Wert wechseln. Dieser kann aber nicht von einem anderen Status zu "prerender" wechseln. Achtung: Nicht alle Browser unterstützen diesen Status.
    • -
  • unloaded : Die Seite wird aus dem Speicher freigegeben / gelöscht. Achtung: Nicht alle Browser unterstützen diesen Status.
    • -
- -
//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

- -{{Compat}} - -

[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 deleted file mode 100644 index 27f20f02016c9f..00000000000000 --- a/files/de/web/api/performance/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -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 deleted file mode 100644 index a9354b4b2f4707..00000000000000 --- a/files/de/web/api/performance/now/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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:

- -
    -
  • In dedizierten web workern, die im {{domxref("Window")}}-Kontext erstellt wurden, wird der Wert kleiner sein, als performance.now() in dem Browserfenster, aus dem der worker hervorging. Ehemals gleich t0 dem Hauptkontext wurde dies in der Vergangenheit auf das heutige Verhalten geändert.
    • -
  • In geteilten Worker oder Service Workern kann es passieren, dass der Wert im Worker größer ist als der des Hauptkontextes, da das Fenster nach den Workern erschaffen werden kann.
    • -
- -
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

- -{{Compat}} - -

[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/performance_property/index.html b/files/de/web/api/performance_property/index.html deleted file mode 100644 index c62cbba4a72832..00000000000000 --- a/files/de/web/api/performance_property/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Window.performance -slug: Web/API/performance_property -tags: - - Performanz - - Timing -translation_of: Web/API/Window/performance -original_slug: 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

- -{{Compat}} - -

diff --git a/files/de/web/api/push_api/index.html b/files/de/web/api/push_api/index.html deleted file mode 100644 index 4285991bcfa8c7..00000000000000 --- a/files/de/web/api/push_api/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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

- -{{Compat}} - - - -

See also

- - - -
{{DefaultAPISidebar("Push API")}}
diff --git a/files/de/web/api/pushmanager/index.html b/files/de/web/api/pushmanager/index.html deleted file mode 100644 index b4ea2e8a843ffe..00000000000000 --- a/files/de/web/api/pushmanager/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- - diff --git a/files/de/web/api/pushmanager/subscribe/index.html b/files/de/web/api/pushmanager/subscribe/index.html deleted file mode 100644 index 9e664f9cd68957..00000000000000 --- a/files/de/web/api/pushmanager/subscribe/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -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

- -{{Compat}} - -

Weitere Informationen

- - diff --git a/files/de/web/api/range/index.html b/files/de/web/api/range/index.html deleted file mode 100644 index 63f7adafd9806d..00000000000000 --- a/files/de/web/api/range/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 9ec367418f89e5..00000000000000 --- a/files/de/web/api/range/range/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - - -

diff --git a/files/de/web/api/readablestream/index.html b/files/de/web/api/readablestream/index.html deleted file mode 100644 index 0206d5a128426c..00000000000000 --- a/files/de/web/api/readablestream/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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/response/index.html b/files/de/web/api/response/index.html deleted file mode 100644 index e66268012ccf62..00000000000000 --- a/files/de/web/api/response/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -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 deleted file mode 100644 index 53f3eff566d3e3..00000000000000 --- a/files/de/web/api/response/response/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index 9e08580472d5c2..00000000000000 --- a/files/de/web/api/rtcicecandidate/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: RTCIceCandidate -slug: Web/API/RTCIceCandidate -translation_of: Web/API/RTCIceCandidate ---- -

{{APIRef("WebRTC")}}{{SeeCompatTable}}

- -

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

- -{{Compat}} diff --git a/files/de/web/api/rtcrtptransceiver/direction/index.html b/files/de/web/api/rtcrtptransceiver/direction/index.html deleted file mode 100644 index 9f8a067af1619e..00000000000000 --- a/files/de/web/api/rtcrtptransceiver/direction/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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

- -
    -
  • {{domxref("RTCRtpTransceiver.currentDirection")}}
    • -
diff --git a/files/de/web/api/rtcrtptransceiver/index.html b/files/de/web/api/rtcrtptransceiver/index.html deleted file mode 100644 index 0bf844cf0f5465..00000000000000 --- a/files/de/web/api/rtcrtptransceiver/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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 deleted file mode 100644 index a276b9acf68424..00000000000000 --- a/files/de/web/api/service_worker_api/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -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:

- -
    -
  • die Synchronisation von Hintergrunddaten
    • -
  • um auf Anfragen anderer Quellen zu antworten
    • -
  • Um Updates von Daten zu erhalten, die sehr teuer in der Kalkulation sind, wie z. B. Standort-Daten, die dann in einem Datensatz verwendet werden können.
    • -
  • Das clientseitige Kompilieren von CoffeeScript aus Entwicklergründen
    • -
  • Hooks für Hintergrunddienste
    • -
  • Zum Erstellen benutzerdefinierter Templates anhand von URL-Mustern
    • -
  • Performancebeschleunigung wie z. B. das Vorladen von Bildern
    • -
- -

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:

- -
    -
  • Hintergrund-Synchronisation: Ein Service-Worker kann gestartet werden, wenn keine Nutzer auf der Seite sind, um den Cache zu aktualisieren usw.
    • -
  • Auf Push-Benachrichtigungen reagieren: Ein Service-Worker kann Benachrichtigungen an Nutzer senden, um mitzuteilen, dass neuer Inhalt verfügbar ist,
    • -
  • Auf eine bestimmte Uhrzeit und ein bestimmtes Datum reagieren
    • -
  • Damit kann geofencing betrieben werden
    • -
- -

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

- -{{Compat}} - -
-

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 deleted file mode 100644 index bb96559d6adcad..00000000000000 --- a/files/de/web/api/service_worker_api/using_service_workers/index.html +++ /dev/null @@ -1,457 +0,0 @@ ---- -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:

- -
    -
  • Firefox Nightly: Navigieren Sie zu about:config und setzen Sie dom.serviceWorkers.enabled auf true; Starten Sie den Browser anschließend neu.
    • -
  • Chrome Canary: Navigieren Sie zu chrome://flags und aktivieren Sie experimental-web-platform-features; Starten Sie den Browser anschließend neu (Beachten Sie, dass einige Funktionen jetzt standardmäßig in Chrome aktiviert sind).
    • -
  • Opera: Navigieren Sie zu opera://flags und aktivieren Sie Support for ServiceWorker; Starten Sie den Browser anschließend neu.
    • -
- -

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:

- -
    -
  • Der Service-Worker wird nur Netzwerkanfragen von Clients innerhalb seines Scopes abgreifen.
    • -
  • Der maximale Scope eines Service-Workers ist der Ort des Workers selbst.
    • -
  • Ist der Service-Worker auf einem Client aktiv, der mit dem Service-Worker-Allowed-Header ausgeliefert wird, kann eine Liste von maximalen Scopes für diesen Worker definiert werden.
    • -
  • Im Firefox sind Service-Worker-APIs versteckt und können nicht genutzt werden, wenn die Nutzer sich im Inkognito-Modus befinden.
    • -
- -

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

- -
    -
  • Unter about:serviceworkers können registrierte Service-Worker eingesehen und aktualisiert oder entfernt werden
    • -
  • Für Testzwecke kann die HTTPS-Beschränkung durch Aktivieren der "Service-Worker über HTTP aktivieren (bei geöffneten Entwicklerwerkzeugen)"-Option in den Firefox-Entwicklerwerkzeug-Optionen (Zahnrad-Menü)
    • -
- -

Spezifikationen

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initiale Definition.
- -

Browserkompatibilität

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/serviceworker/index.html b/files/de/web/api/serviceworker/index.html deleted file mode 100644 index 38d160b96b027f..00000000000000 --- a/files/de/web/api/serviceworker/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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 deleted file mode 100644 index 1c4a2eca53d11f..00000000000000 --- a/files/de/web/api/serviceworkercontainer/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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

- -{{Compat}} - -

See also

- - diff --git a/files/de/web/api/serviceworkercontainer/register/index.html b/files/de/web/api/serviceworkercontainer/register/index.html deleted file mode 100644 index 56d78d0a8cd79e..00000000000000 --- a/files/de/web/api/serviceworkercontainer/register/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/api/settimeout/index.html b/files/de/web/api/settimeout/index.html deleted file mode 100644 index 86108c39e543cf..00000000000000 --- a/files/de/web/api/settimeout/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout -original_slug: 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 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

- -
-<button onclick="delayedMessage();">Show a message after two seconds</button>
-<button onclick="clearMessage();">Cancel message before it happens</button>
-
-<div id="output"></div>
-
- -

JavaScript

- -
-let timeoutID;
-
-function setOutput(outputContent) {
-  document.querySelector('#output').textContent = outputContent;
-}
-
-function delayedMessage() {
-  setOutput('');
-  timeoutID = setTimeout(setOutput, 2*1000, 'That was really slow!');
-}
-
-function clearMessage() {
-  clearTimeout(timeoutID);
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample('Example')}}

- -

Siehe auch clearTimeout()

- -

Browserkompatibilität

- -{{Compat}} - -

Spezifikation

- -

Gehört zu DOM-Level 0, wie spezifiziert in HTML5.

- -

Siehe auch

- -
    -
  • {{domxref("window.setInterval")}}
    • -
  • {{domxref("window.requestAnimationFrame")}}
    • -
diff --git a/files/de/web/api/sharedworker/index.html b/files/de/web/api/sharedworker/index.html deleted file mode 100644 index 68a245225f3914..00000000000000 --- a/files/de/web/api/sharedworker/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -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 deleted file mode 100644 index 46e0819a2225b4..00000000000000 --- a/files/de/web/api/speechsynthesis/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -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 deleted file mode 100644 index 5de50fce838169..00000000000000 --- a/files/de/web/api/storage/clear/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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 deleted file mode 100644 index 2ffc4d6032bc3e..00000000000000 --- a/files/de/web/api/storage/getitem/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 deleted file mode 100644 index fac64fda0aa679..00000000000000 --- a/files/de/web/api/storage/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index ff6e866e798b0b..00000000000000 --- a/files/de/web/api/storage/key/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index f551c56106f6db..00000000000000 --- a/files/de/web/api/storage/length/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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 deleted file mode 100644 index 891ab04aba3383..00000000000000 --- a/files/de/web/api/storage/removeitem/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -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 deleted file mode 100644 index b023f1e19487e1..00000000000000 --- a/files/de/web/api/storage/setitem/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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

- -{{Compat}} - -

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 deleted file mode 100644 index fda711b21362a1..00000000000000 --- a/files/de/web/api/transferable/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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

- -{{Compat}} - -

[1] Internet Explorer 10 only accepts a single {{domxref("Transferable")}} object as parameter, but not an array.

- -

See also

- -
    -
  • Interfaces implementing it: {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}}.
    • -
diff --git a/files/de/web/api/url/createobjecturl/index.html b/files/de/web/api/url/createobjecturl/index.html deleted file mode 100644 index 879fe89cdda1f6..00000000000000 --- a/files/de/web/api/url/createobjecturl/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/api/url/index.html b/files/de/web/api/url/index.html deleted file mode 100644 index 4a69c02721860f..00000000000000 --- a/files/de/web/api/url/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 9742096e0fe294..00000000000000 --- a/files/de/web/api/url/protocol/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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

- -
    -
  • Die {{domxref("URL")}} Schnittstelle zu der es gehört.
    • -
diff --git a/files/de/web/api/urlsearchparams/index.html b/files/de/web/api/urlsearchparams/index.html deleted file mode 100644 index e26387d9483697..00000000000000 --- a/files/de/web/api/urlsearchparams/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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.
-
{{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

- -{{Compat}} - -

Verweise

- - diff --git a/files/de/web/api/web_animations_api/index.html b/files/de/web/api/web_animations_api/index.html deleted file mode 100644 index 0b8525affef4c8..00000000000000 --- a/files/de/web/api/web_animations_api/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 deleted file mode 100644 index 210af64119ec7c..00000000000000 --- a/files/de/web/api/web_storage_api/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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:

- -
    -
  • sessionStorage stellt für jeden vorhandenen Ausgangspunkt für die Dauer des Seitenbesuchs einen separaten Speicherbereich bereit (solange der Browser geöffnet bleibt inklusive Seitenaktualisierung und -Wiederherstellung).
    • -
  • localStorage hat die gleiche Funktion, bleibt jedoch trotz Schließens und Neustart des Browsers persistent.
    • -
- -

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

- -{{Compat}} - -

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 deleted file mode 100644 index d0eff62100198f..00000000000000 --- a/files/de/web/api/web_workers_api/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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:

- -
    -
  • Shared (geteilte) Worker können von mehreren Skripten, die auch in unterschiedlichen Fenstern, IFrames, etc. laufen genutzt werden, solange sie alle in der selben Domain arbeiten. Sie sind etwas komplizierter als dedizierte Worker — Skripte müssen über einen aktiven Port kommunizieren. Unter {{domxref("SharedWorker")}} finden Sie mehr Details.
    • -
  • ServiceWorker arbeiten als Proxy Server zwischen Webanwendungen, dem Browser und dem Netzwerk. Sie sollen (zusammen mit anderen Technologien) das Erstellen von effektiven offline-Anwendungen ermöglichen, Netzwerkabfragen abfangen und je nach Verfügbarkeit einer Netzwerkverbindung ensprechend reagieren und den Server über Änderungen informieren. Zudem erlauben sie Push-Benachrichtigungen zu senden und im Hintergrund APIs zu synchronisieren.
    • -
  • Chrome Worker ist ein Firefox-only Workertyp für die Add-On Entwicklung mit Zugriff auf js-ctypes in Ihrem Worker. Unter {{domxref("ChromeWorker")}} finden Sie weitere Informationen.
    • -
  • Audio Worker bieten die Möglichkeit Audioverarbeitung mit Skripten in einem Worker auszuführen.
    • -
- -
-

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

- -{{Compat}} - -

[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 deleted file mode 100644 index a057d348114b26..00000000000000 --- a/files/de/web/api/webgl_api/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -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

- -
-
    -
  • {{domxref("WebGLRenderingContext")}}
    • -
  • {{domxref("WebGL2RenderingContext")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLActiveInfo")}}
    • -
  • {{domxref("WebGLBuffer")}}
    • -
  • {{domxref("WebGLContextEvent")}}
    • -
  • {{domxref("WebGLFramebuffer")}}
    • -
  • {{domxref("WebGLProgram")}}
    • -
  • {{domxref("WebGLQuery")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLRenderbuffer")}}
    • -
  • {{domxref("WebGLSampler")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLShader")}}
    • -
  • {{domxref("WebGLShaderPrecisionFormat")}}
    • -
  • {{domxref("WebGLSync")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLTexture")}}
    • -
  • {{domxref("WebGLTransformFeedback")}} {{experimental_inline}}
    • -
  • {{domxref("WebGLUniformLocation")}}
    • -
  • {{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}
    • -
-
- -

Extensions

- -
-
    -
  • {{domxref("ANGLE_instanced_arrays")}}
    • -
  • {{domxref("EXT_blend_minmax")}}
    • -
  • {{domxref("EXT_color_buffer_float")}}
    • -
  • {{domxref("EXT_color_buffer_half_float")}}
    • -
  • {{domxref("EXT_disjoint_timer_query")}}
    • -
  • {{domxref("EXT_frag_depth")}}
    • -
  • {{domxref("EXT_sRGB")}}
    • -
  • {{domxref("EXT_shader_texture_lod")}}
    • -
  • {{domxref("EXT_texture_filter_anisotropic")}}
    • -
  • {{domxref("OES_element_index_uint")}}
    • -
  • {{domxref("OES_standard_derivatives")}}
    • -
  • {{domxref("OES_texture_float")}}
    • -
  • {{domxref("OES_texture_float_linear")}}
    • -
  • {{domxref("OES_texture_half_float")}}
    • -
  • {{domxref("OES_texture_half_float_linear")}}
    • -
  • {{domxref("OES_vertex_array_object")}}
    • -
  • {{domxref("WEBGL_color_buffer_float")}}
    • -
  • {{domxref("WEBGL_compressed_texture_atc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_etc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_etc1")}}
    • -
  • {{domxref("WEBGL_compressed_texture_pvrtc")}}
    • -
  • {{domxref("WEBGL_compressed_texture_s3tc")}}
    • -
  • {{domxref("WEBGL_debug_renderer_info")}}
    • -
  • {{domxref("WEBGL_debug_shaders")}}
    • -
  • {{domxref("WEBGL_depth_texture")}}
    • -
  • {{domxref("WEBGL_draw_buffers")}}
    • -
  • {{domxref("WEBGL_lose_context")}}
    • -
-
- -

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

- -{{Compat}} - -

[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/adding_2d_content_to_a_webgl_context/index.html b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html deleted file mode 100644 index bbdd38277f2d58..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext -slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -tags: - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -original_slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext ---- -

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

- -
    -
  • Er ist unvollständig (die makePerspective() Funktion fehlt).
    • -
  • Er verwendet globale Variablen die in der einen Funktion gesetzt, in der anderen wieder gelesen werden. Dies gilt als schlechte Programmierpraxis.
    • -
  • Die Shader werden aus dem HTML DOM geladen, anstatt als Strings in JavaScript erzeugt. Diese Design-Entscheidung wird nicht begründet.
    • -
- -

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

- -
    -
  • Matrizen auf Wolfram MathWorld (Englisch).
    • -
  • Matrix auf Wikipedia.
    • -
- -

{{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/animating_objects_with_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html deleted file mode 100644 index bec456ac7eb152..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Objekte mit WebGL animieren -slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren ---- -

{{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/animating_textures_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html deleted file mode 100644 index 64ddeef047c55b..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Animierte Texturen in WebGL -slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_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/creating_3d_objects_using_webgl/index.html b/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html deleted file mode 100644 index df264a040e9473..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 3D-Objekte mit WebGL erstellen -slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -original_slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen ---- -

{{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/getting_started_with_webgl/index.html b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html deleted file mode 100644 index 4000c59b1e52e7..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Einführung in WebGL -slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Einführung_in_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

- -

- -
    -
  • An introduction to WebGL: Verfasst von Luz Caballero, veröffentlicht auf dev.opera.com. Der Artikel behandelt, was WebGL ist, erklärt wie es funktioniert (einschließlich Render Warteschlange) und stellt einige WebGL Bibliotheken vor.
    • -
  • WebGL Fundamentals: WebGL Grundlagen
    • -
  • An intro to modern OpenGL: Eine Reihe netter Artikel über OpenGL, verfasst von Joe Groff, die eine verständliche Einführung in OpenGL bieten, von der Geschichte bis zum wichtigen Aspekt der Grafik Pipeline. Außerdem enthält es Beispiele, die demonstrieren, wie OpenGL funktioniert. Wer lernen will, was OpenGL eigentlich ist, findet hier einen guten Ausgangspunkt.
    • -
- -

- -

{{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/index.html b/files/de/web/api/webgl_api/tutorial/index.html deleted file mode 100644 index 8c8efdc75b66d2..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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/lighting_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html deleted file mode 100644 index 715746822a10ff..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Beleuchtung in WebGL -slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Beleuchtung_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/using_shaders_to_apply_color_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html deleted file mode 100644 index 93a5d0181c2b0e..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Farben mittels Shader in einen WebGL-Kontext hinzufügen -slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -original_slug: >- - Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen ---- -

{{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/using_textures_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html deleted file mode 100644 index af33f8e638980d..00000000000000 --- a/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Texturen in WebGL verwenden -slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden ---- -

{{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 deleted file mode 100644 index c4588f3f31e058..00000000000000 --- a/files/de/web/api/webglactiveinfo/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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:

- -
    -
  • {{domxref("WebGLRenderingContext.getActiveAttrib()")}}
    • -
  • {{domxref("WebGLRenderingContext.getActiveUniform()")}}
    • -
  • {{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}
    • -
- -
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

- -{{Compat}} - -

[1] Dieses Feature ist durch eine Voreinstellung deaktiviert. Zur Aktivierung setzt man in about:config den Wert gfx.offscreencanvas.enabled auf true.

- -

See also

- -
    -
  • {{domxref("WebGLRenderingContext.getActiveAttrib()")}}
    • -
  • {{domxref("WebGLRenderingContext.getActiveUniform()")}}
    • -
diff --git a/files/de/web/api/webglprogram/index.html b/files/de/web/api/webglprogram/index.html deleted file mode 100644 index 2a8e1a62fcb3df..00000000000000 --- a/files/de/web/api/webglprogram/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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

- -{{Compat}} - -

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

- -

Weiterführendes

- -
    -
  • {{domxref("WebGLShader")}}
    • -
  • {{domxref("WebGLRenderingContext.attachShader()")}}
    • -
  • {{domxref("WebGLRenderingContext.compileShader()")}}
    • -
  • {{domxref("WebGLRenderingContext.createProgram()")}}
    • -
  • {{domxref("WebGLRenderingContext.createShader()")}}
    • -
  • {{domxref("WebGLRenderingContext.deleteProgram()")}}
    • -
  • {{domxref("WebGLRenderingContext.deleteShader()")}}
    • -
  • {{domxref("WebGLRenderingContext.detachShader()")}}
    • -
  • {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
    • -
  • {{domxref("WebGLRenderingContext.getProgramParameter()")}}
    • -
  • {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
    • -
  • {{domxref("WebGLRenderingContext.getShaderParameter()")}}
    • -
  • {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
    • -
  • {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
    • -
  • {{domxref("WebGLRenderingContext.getShaderSource()")}}
    • -
  • {{domxref("WebGLRenderingContext.isProgram()")}}
    • -
  • {{domxref("WebGLRenderingContext.isShader()")}}
    • -
  • {{domxref("WebGLRenderingContext.linkProgram()")}}
    • -
  • {{domxref("WebGLRenderingContext.shaderSource()")}}
    • -
  • {{domxref("WebGLRenderingContext.useProgram()")}}
    • -
  • {{domxref("WebGLRenderingContext.validateProgram()")}}
    • -
diff --git a/files/de/web/api/webglrenderingcontext/canvas/index.html b/files/de/web/api/webglrenderingcontext/canvas/index.html deleted file mode 100644 index d104e23334de4b..00000000000000 --- a/files/de/web/api/webglrenderingcontext/canvas/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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

- -
    -
  • {{domxref("CanvasRenderingContext2D.canvas")}}
    • -
  • {{domxref("OffscreenCanvas")}}
    • -
diff --git a/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html deleted file mode 100644 index 19de1ec3cf7daa..00000000000000 --- a/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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

- -{{Compat}} - -

Weiterführendes

- -
    -
  • {{domxref("WebGLActiveInfo")}}
    • -
diff --git a/files/de/web/api/webglrenderingcontext/getattriblocation/index.html b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html deleted file mode 100644 index f2500e2d33e28f..00000000000000 --- a/files/de/web/api/webglrenderingcontext/getattriblocation/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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

- -
    -
  • {{domxref("WebGLRenderingContext.getUniformLocation()")}}
    • -
diff --git a/files/de/web/api/webglrenderingcontext/index.html b/files/de/web/api/webglrenderingcontext/index.html deleted file mode 100644 index a8492d3ea5c717..00000000000000 --- a/files/de/web/api/webglrenderingcontext/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -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

- -{{Compat}} - -

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

- -

See also

- -
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
diff --git a/files/de/web/api/websocket/binarytype/index.html b/files/de/web/api/websocket/binarytype/index.html deleted file mode 100644 index da69c1ec8c5b96..00000000000000 --- a/files/de/web/api/websocket/binarytype/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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 deleted file mode 100644 index 02caebb41f63c0..00000000000000 --- a/files/de/web/api/websocket/close/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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

- -{{Specifications}} - -

Browser Kompatibilität

- -{{Compat}} diff --git a/files/de/web/api/websocket/close_event/index.html b/files/de/web/api/websocket/close_event/index.html deleted file mode 100644 index 4efa91c56be4fe..00000000000000 --- a/files/de/web/api/websocket/close_event/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.onclose -slug: Web/API/WebSocket/close_event -tags: - - API - - Eigenschaft - - Referenz - - Web API - - WebSocket -translation_of: Web/API/WebSocket/onclose -original_slug: Web/API/WebSocket/onclose ---- -

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

- -

Die Eigenschaft WebSocket.onclose ist ein {{event("Event_handlers", "event handler")}}, 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/extensions/index.html b/files/de/web/api/websocket/extensions/index.html deleted file mode 100644 index bbc5d722c4ea57..00000000000000 --- a/files/de/web/api/websocket/extensions/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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 deleted file mode 100644 index 0b0d81974b3295..00000000000000 --- a/files/de/web/api/websocket/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -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 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 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 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

- -{{Compat}} - -

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 send Methode versendet wurden, waren auf 16 MB begrenzt. Jetzt können sie bis zu 2 GB wachsen.
diff --git a/files/de/web/api/websocket/protocol/index.html b/files/de/web/api/websocket/protocol/index.html deleted file mode 100644 index ca76edd3a274a0..00000000000000 --- a/files/de/web/api/websocket/protocol/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -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 deleted file mode 100644 index 9abc994d65de52..00000000000000 --- a/files/de/web/api/websocket/readystate/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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 deleted file mode 100644 index 56e0852dea241a..00000000000000 --- a/files/de/web/api/websocket/url/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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/websockets_api/index.html b/files/de/web/api/websockets_api/index.html deleted file mode 100644 index 603f52442183d4..00000000000000 --- a/files/de/web/api/websockets_api/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: WebSockets -slug: Web/API/WebSockets_API -tags: - - Referenz - - WebSockets -translation_of: Web/API/WebSockets_API -original_slug: WebSockets ---- -

WebSockets ist eine fortschrittliche Technologie welche es möglich macht eine interaktive Kommunikations-Session zwischen dem Browser des Benutzers und dem Server herzustellen. Mit dieser API können Sie Nachrichten zum Server senden und ereignisorientierte Antworten erhalten ohne beim Server die Antwort abzufragen.

- -
-
-

Dokumentation

- -
-
Websocket Client-Anwendungen schreiben
-
Eine Anleitung um WebSocket-Clients im Browser laufen zu lassen.
-
WebSockets Referenz
-
Eine Referenz für die Client-seitige WebSocket API.
-
Websocket-Server schreiben (Benötigt Inhalt)
-
Eine Anleitung zum schreiben von Server-seitigem Code um das WebSocket-Protokoll zu handhaben.
-
- -
- -
-

Tools

- - - - - - -
-
- -

Siehe auch

- - - -

Browser-Kompatibilität

- -{{Compat}} - -

Hinweise zu Gecko

- -

Die WebSocket-Unterstützung in Firefox wird weiterhin die Entwicklungen in der entstehenden WebSocket-Spezifikation verfolgen. Firefox 6 implementiert Version 7 des darunterliegenden Protokolls, währen Firefox 7 Version 8 implementiert (lt. IETF-Vorlage 10). Firefox mobile erhielt in Version 7.0 unterstützung für WebSockets.

- -

Gecko 6.0

- -

Vor Gecko 6.0 {{geckoRelease("6.0")}} gab es, fälschlicherweise, ein WebSocket-Objekt. Mane Seiten schlossen daraus, dass WebSocket-Dienste keine Präfixe haben; dieses Objekt wurde mittlerweile zu MozWebSocket umbenannt.

- -

Gecko 7.0

- -

Beginnend mit Gecko 7.0 {{geckoRelease("7.0")}} wird die Einstellung network.websocket.max-connections genutzt, um die maximale Anzahl von WebSockets festzustellen, die gleichzeitig genutzt werden können. Der Standardwert ist 200.

- -

Gecko 8.0

- -

Beginnend mit Gecko 8.0 {{geckoRelease("8.0")}} wird die Deflate-Stream-Erweiterung des WebSocket-Protokolls abgeschaltet, da es von den Spezifikations-Vorlagen überholt wurde. Dies löst Inkompatibilitäten mit manchen Seiten.

- -

Gecko 11.0

- -

Vor Gecko 11.0 waren sowohl eingehende als auch ausgehende Nachrichten auf 16 MB begrenzt. Sie können jetzt bis zu 2 GB groß sein. Beachten Sie, dass Speicherbegrenzungen (insbesondere auf mobilen Geräten) ein theoretisches Maximum darstellen, jedoch kein praktisches. In Wirklichkeit werden Übertragungen dieser Größe auf Geräten, die nicht über genügend Speicher verfügen, fehlschlagen.

- -

Zusätzlich wurde eine ArrayBuffer Sende- und Empfangsunterstützung für Binärdaten implementiert.

- -

Ab Gecko 11.0 steht die WebSocket-API ohne Präfixe zur Verfügung.

diff --git a/files/de/web/api/websockets_api/writing_websocket_servers/index.html b/files/de/web/api/websockets_api/writing_websocket_servers/index.html deleted file mode 100644 index cdb337e1025124..00000000000000 --- a/files/de/web/api/websockets_api/writing_websocket_servers/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Writing WebSocket servers -slug: Web/API/WebSockets_API/Writing_WebSocket_servers -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers -original_slug: WebSockets/Writing_WebSocket_servers ---- -
{{APIRef("Websockets API")}}
- -

Ein WebSocket-Server ist nichts anderes als eine Anwendung, die einen Port eines TCP-Servers überwacht, der einem bestimmten Protokoll folgt. Die Aufgabe, einen benutzerdefinierten Server zu erstellen, macht den Leuten Angst. Es kann jedoch unkompliziert sein, einen einfachen WebSocket-Server auf einer Plattform Ihrer Wahl zu implementieren.

- -

Ein WebSocket-Server kann in jeder serverseitigen Programmiersprache geschrieben werden, die dazu in der Lage ist: Berkeley sockets, siehe auch C(++), Python, PHP, oder Serverseitiges JavaScript.

- -

Dies ist kein Tutorial in einer bestimmten Sprache, sondern dient als Leitfaden, um das Schreiben Ihres eigenen Servers zu erleichtern.

- -

In diesem Artikel wird davon ausgegangen, dass Sie bereits mit der Funktionsweise von {{Glossary ("HTTP")}} vertraut sind und über ein moderates Programmiererlebnis verfügen. Abhängig von der Sprachunterstützung sind möglicherweise Kenntnisse über TCP-Sockets erforderlich. In diesem Handbuch wird das Mindestwissen dargestellt, das Sie zum Schreiben eines WebSocket-Servers benötigen.

- -
-

Notiz: Lesen Sie die neueste offizielle WebSockets-Spezifikation, RFC 6455. Die Abschnitte 1 und 4-7 sind für Server-Implementierer besonders interessant. In Abschnitt 10 wird die Sicherheit erläutert, und Sie sollten sie unbedingt lesen, bevor Sie Ihren Server verfügbar machen.

-
- -

Ein WebSocket-Server wird hier auf sehr niedriger Ebene erklärt. WebSocket-Server sind häufig separate und spezialisierte Server (aus Gründen des Lastenausgleichs oder aus anderen praktischen Gründen). Daher verwenden Sie häufig einen Reverse-Proxy (z. B. einen normalen HTTP-Server), um WebSocket-Handshakes zu erkennen, vorzuverarbeiten und an diese Clients zu senden ein echter WebSocket-Server. Dies bedeutet, dass Sie Ihren Servercode nicht mit Cookie- und Authentifizierungshandlern (zum Beispiel) aufblähen müssen.

- -

Der WebSocket-Handshake

- -

Zunächst muss der Server mithilfe eines Standard-TCP-Sockets auf eingehende Socket-Verbindungen warten. Abhängig von Ihrer Plattform kann dies automatisch für Sie erledigt werden. Angenommen, Ihr Server überwacht example.com, Port 8000, und Ihr Socket-Server antwortet auf {{HTTPMethod ("GET")}} -Anfragen unter example.com/chat.

- -
-

Warnung: Der Server überwacht möglicherweise jeden von ihm ausgewählten Port. Wenn er jedoch einen anderen Port als 80 oder 443 auswählt, kann es zu Problemen mit Firewalls und / oder Proxys kommen. Browser benötigen im Allgemeinen eine sichere Verbindung für WebSockets, obwohl sie möglicherweise eine Ausnahme für lokale Geräte bieten.

-
- -

Der Handshake ist das "Web" in WebSockets. Es ist die Brücke von HTTP zu WebSockets. Beim Handshake werden Details der Verbindung ausgehandelt, und jede Partei kann vor Abschluss zurücktreten, wenn die Bedingungen ungünstig sind. Der Server muss darauf achten, alles zu verstehen, was der Client verlangt, da sonst Sicherheitsprobleme auftreten können.

- -
-

Tipp: Die Anfrage-URL (/ Chat hier) hat in der Spezifikation keine definierte Bedeutung. Viele Benutzer verwenden es daher, damit ein Server mehrere WebSocket-Anwendungen verarbeiten kann. Zum Beispiel könnte example.com/chat eine Mehrbenutzer-Chat-App aufrufen, während /game auf demselben Server möglicherweise ein Multiplayer-Spiel aufruft.

-
- -

Client handshake Anfrage

- -

Auch wenn Sie einen Server erstellen, muss ein Client den WebSocket-Handshake-Prozess starten, indem er den Server kontaktiert und eine WebSocket-Verbindung anfordert. Sie müssen also wissen, wie Sie die Anfrage des Kunden interpretieren. Der Client sendet eine ziemlich normale HTTP-Anfrage mit Headern, die so aussehen (die HTTP-Version muss 1.1 oder höher sein und die Methode muss GET sein):

- -
GET /chat HTTP/1.1
-Host: example.com:8000
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
-
-
- -

Der Client kann hier Erweiterungen und / oder Unterprotokolle anfordern. Einzelheiten finden Sie unter Sonstiges. Es können auch allgemeine Header wie {{HTTPHeader ("User-Agent")}}, {{HTTPHeader ("Referer")}}, {{HTTPHeader ("Cookie")}} oder Authentifizierungsheader vorhanden sein. Mach mit denen, was du willst; Sie beziehen sich nicht direkt auf das WebSocket. Es ist auch sicher, sie zu ignorieren. In vielen gängigen Setups hat sich bereits ein Reverse-Proxy mit ihnen befasst.

- -
-

Tipp: Alle Browser senden einen Origin-Header. Sie können diesen Header aus Sicherheitsgründen verwenden (nach demselben Ursprung suchen, automatisch zulassen oder ablehnen usw.) und eine 403 Forbidden senden, wenn Ihnen das, was Sie sehen, nicht gefällt. Seien Sie jedoch gewarnt, dass Nicht-Browser-Agenten einen gefälschten Ursprung senden können. Die meisten Anwendungen lehnen Anforderungen ohne diesen Header ab.

-
- -

Wenn ein Header nicht verstanden wird oder einen falschen Wert hat, sollte der Server eine {{HTTPStatus ("400")}} ("Bad Request")} Antwort senden und den Socket sofort schließen. Wie üblich wird möglicherweise auch der Grund angegeben, warum der Handshake im HTTP-Antworttext fehlgeschlagen ist, die Nachricht wird jedoch möglicherweise nie angezeigt (Browser zeigen sie nicht an). Wenn der Server diese Version von WebSockets nicht versteht, sollte er einen {{HTTPHeader ("Sec-WebSocket-Version")}} Header zurücksenden, der die Version (en) enthält, die er versteht. Im obigen Beispiel wird Version 13 des WebSocket-Protokolls angegeben.
-
- Der interessanteste Header hier ist {{HTTPHeader ("Sec-WebSocket-Key")}}. Schauen wir uns das also als nächstes an.

- -
-

Hinweis: Normale HTTP-Statuscodes können nur vor dem Handshake verwendet werden. Nach erfolgreichem Handshake müssen Sie einen anderen Satz von Codes verwenden (definiert in Abschnitt 7.4 der Spezifikation).

-
- -

Server handshake Antwort

- -

Wenn der Server die Handshake-Anforderung empfängt, sollte er eine spezielle Antwort zurücksenden, die angibt, dass das Protokoll von HTTP zu WebSocket geändert wird. Dieser Header sieht ungefähr so aus (denken Sie daran, dass jede Headerzeile mit \ r \ n endet, und setzen Sie nach dem letzten ein zusätzliches \ r \ n, um das Ende des Headers anzuzeigen):

- -
HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
-
-
- -

Darüber hinaus kann der Server hier über Erweiterungs- / Unterprotokollanforderungen entscheiden. Einzelheiten finden Sie unter Sonstiges. Der Sec-WebSocket-Accept-Header ist wichtig, da der Server ihn von dem {{HTTPHeader ("Sec-WebSocket-Key")}} ableiten muss, den der Client an ihn gesendet hat. Verketten Sie dazu den Sec-WebSocket-Key des Clients und die Zeichenfolge "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es handelt sich um eine "magische Zeichenfolge"), nehmen Sie den SHA-1-Hash des Ergebnisses und geben Sie den base64 zurück Codierung dieses Hashs.

- -
-

Hinweis: Dieser scheinbar überkomplizierte Prozess ist vorhanden, sodass für den Client offensichtlich ist, ob der Server WebSockets unterstützt. Dies ist wichtig, da Sicherheitsprobleme auftreten können, wenn der Server eine WebSockets-Verbindung akzeptiert, die Daten jedoch als HTTP-Anforderung interpretiert.

-
- -

Wenn der Schlüssel also "dGhlIHNhbXBsZSBub25jZQ ==" war, lautet der Wert des Sec-WebSocket-Accept-Headers "s3pPLMBiTxaQ9kYGzzhZRbK + xOo =". Sobald der Server diese Header sendet, ist der Handshake abgeschlossen und Sie können mit dem Datenaustausch beginnen !

- -
-

Hinweis: Der Server kann andere Header wie {{HTTPHeader ("Set-Cookie")}} senden oder über andere Statuscodes nach Authentifizierung oder Weiterleitung fragen, bevor er den Antwort-Handshake sendet.

-
- -

Clients im Auge behalten

- -

Dies bezieht sich nicht direkt auf das WebSocket-Protokoll, ist jedoch hier erwähnenswert: Ihr Server muss die Sockets der Clients verfolgen, damit Sie bei Clients, die den Handshake bereits abgeschlossen haben, nicht erneut Handshakes durchführen. Dieselbe Client-IP-Adresse kann mehrmals versuchen, eine Verbindung herzustellen. Der Server kann sie jedoch ablehnen, wenn sie zu viele Verbindungen versuchen, um sich vor Denial-of-Service-Angriffen zu schützen.
-
- Beispielsweise können Sie eine Tabelle mit Benutzernamen oder ID-Nummern zusammen mit den entsprechenden {{domxref ("WebSocket")}} und anderen Daten führen, die Sie dieser Verbindung zuordnen müssen.

- -

Exchanging data frames

- -

Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using XOR encryption (with a 32-bit key). Section 5 of the specification describes this in detail.

- -

Format

- -

Each data frame (from the client to the server or vice-versa) follows this same format:

- -
Frame format:
-​​
-      0                   1                   2                   3
-      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
-     +-+-+-+-+-------+-+-------------+-------------------------------+
-     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
-     | |1|2|3|       |K|             |                               |
-     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
-     |     Extended payload length continued, if payload len == 127  |
-     + - - - - - - - - - - - - - - - +-------------------------------+
-     |                               |Masking-key, if MASK set to 1  |
-     +-------------------------------+-------------------------------+
-     | Masking-key (continued)       |          Payload Data         |
-     +-------------------------------- - - - - - - - - - - - - - - - +
-     :                     Payload Data continued ...                :
-     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-     |                     Payload Data continued ...                |
-     +---------------------------------------------------------------+
- -

The MASK bit tells whether the message is encoded. Messages from the client must be masked, so your server must expect this to be 1. (In fact, section 5.1 of the spec says that your server must disconnect from a client if that client sends an unmasked message.) When sending a frame back to the client, do not mask it and do not set the mask bit. We'll explain masking later. Note: You must mask messages even when using a secure socket. RSV1-3 can be ignored, they are for extensions.

- -

The opcode field defines how to interpret the payload data: 0x0 for continuation, 0x1 for text (which is always encoded in UTF-8), 0x2 for binary, and other so-called "control codes" that will be discussed later. In this version of WebSockets, 0x3 to 0x7 and 0xB to 0xF have no meaning.

- -

The FIN bit tells whether this is the last message in a series. If it's 0, then the server keeps listening for more parts of the message; otherwise, the server should consider the message delivered. More on this later.

- -

Decoding Payload Length

- -

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

- -
    -
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. -
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. -
  3. Read the next 64 bits and interpret those as an unsigned integer. (The most significant bit must be 0.) You're done.
    4. -
- -

Reading and Unmasking the Data

- -

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

- -
var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}
- -

Now you can figure out what DECODED means depending on your application.

- -

Message Fragmentation

- -

The FIN and opcode fields work together to send a message split up into separate frames. This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

- -

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame; this means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

- -
-Client: FIN=1, opcode=0x1, msg="hello"
-Server: (process complete message immediately) Hi.
-Client: FIN=0, opcode=0x1, msg="and a"
-Server: (listening, new message containing text started)
-Client: FIN=0, opcode=0x0, msg="happy new"
-Server: (listening, payload concatenated to previous message)
-Client: FIN=1, opcode=0x0, msg="year!"
-Server: (process complete message) Happy new year to you too!
-
- -

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

- -

Pings and Pongs: The Heartbeat of WebSockets

- -

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

- -

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

- -
-

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

-
- -

Closing the connection

- -

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded.

- -

Miscellaneous

- -
-

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

-
- -

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols very similar, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

- -

Extensions

- -
-

This section needs expansion. Please edit if you are equipped to do so.

-
- -

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

- -
-

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

-
- -

TODO

- -

Subprotocols

- -

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

- -
-

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

-
- -

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

- -
GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-
-
- -

or, equivalently:

- -
...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-
-
- -

Now the server must pick one of the protocols that the client suggested and it supports. If there is more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it sends:

- -
Sec-WebSocket-Protocol: soap
-
-
- -
-

The server can't send more than one Sec-Websocket-Protocol header.
- If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect. The client may close the connection if it doesn't get the subprotocol it wants.

-
- -

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server needs to have a JSON parser. Practically speaking, this will be part of a library, but the server needs to pass the data around.

- -
-

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

-
- - - - diff --git a/files/de/web/api/window/afterprint_event/index.html b/files/de/web/api/window/afterprint_event/index.html deleted file mode 100644 index f74dcaa4da521d..00000000000000 --- a/files/de/web/api/window/afterprint_event/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WindowEventHandlers.onafterprint -slug: Web/API/Window/afterprint_event -translation_of: Web/API/WindowEventHandlers/onafterprint -original_slug: Web/API/WindowEventHandlers/onafterprint ---- -
{{ApiRef}}
- -
Die Eigenschaft WindowEventHandlers.onafterprint definiert und gibt den {{event("onafterprint")}} {{event("Event_handlers", "event handler")}} 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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{domxref("window.print")}}
    • -
  • {{domxref("window.onbeforeprint")}}
    • -
  • Drucken
    • -
  • In Webkitbrowsern kann eine equivalentes Ergebnis mit matchMedia('print') erreicht werden.
    • -
  • - 
    var mediaQueryList = window.matchMedia('print');
-mediaQueryList.addListener(function(mql) {
-	if (!mql.matches) {
-		console.log('onafterprint');
-	};
-});
-
    -
    • -
diff --git a/files/de/web/api/window/alert/index.html b/files/de/web/api/window/alert/index.html deleted file mode 100644 index 9454fae3989bc5..00000000000000 --- a/files/de/web/api/window/alert/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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);
- -
    -
  • nachricht ist ein optionaler Text-String, der im Dialog angezeigt werden soll, oder alternativ ein Objekt, das in einen Text-String umgewandelt und angezeigt wird.
    • -
- -

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 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 deleted file mode 100644 index c8d47fc6eea60d..00000000000000 --- a/files/de/web/api/window/applicationcache/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -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

- -
    -
  • cache ist eine Objektreferenz auf eine {{domxref("OfflineResourceList")}}.
    • -
- -

Spezification

- -
    -
  • {{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}
    • -
- -

Siehe auch

- - diff --git a/files/de/web/api/window/cancelanimationframe/index.html b/files/de/web/api/window/cancelanimationframe/index.html deleted file mode 100644 index d7a69211ead843..00000000000000 --- a/files/de/web/api/window/cancelanimationframe/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -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);
-
- -

Spezifikation

- -
    -
  • {{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}
    • -
- -

Browserkompatibilität

- -

{{Compat("api.Window.cancelAnimationFrame")}}

- -

Siehe auch

- -
    -
  • {{domxref("window.mozAnimationStartTime")}}
    • -
  • {{domxref("window.requestAnimationFrame()")}}
    • -
diff --git a/files/de/web/api/window/close/index.html b/files/de/web/api/window/close/index.html deleted file mode 100644 index deda5900fbe52b..00000000000000 --- a/files/de/web/api/window/close/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 deleted file mode 100644 index 9b76c0be10e04d..00000000000000 --- a/files/de/web/api/window/confirm/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -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);
- -
    -
  • nachricht ist der optionale Text, der im Dialogfenster angezeigt wird.
    • -
  • eingabe ist ein boolean-Wert, der angibt, welche Schaltfläche gedrückt wurde (true heißt OK).
    • -
- -

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

- -
    -
  • {{domxref("window.alert","alert")}}
    • -
  • {{domxref("window.prompt","prompt")}}
    • -
diff --git a/files/de/web/api/window/console/index.html b/files/de/web/api/window/console/index.html deleted file mode 100644 index fb072fb57d6381..00000000000000 --- a/files/de/web/api/window/console/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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/devicemotion_event/index.html b/files/de/web/api/window/devicemotion_event/index.html deleted file mode 100644 index 5e633ff35ffae1..00000000000000 --- a/files/de/web/api/window/devicemotion_event/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Window.ondevicemotion -slug: Web/API/Window/devicemotion_event -tags: - - API - - Ausrichtung - - Beschleunigungssensor - - Bewegung - - Eigenschaft - - Firefox OS - - Geräteausrichtung -translation_of: Web/API/Window/ondevicemotion -original_slug: 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/domcontentloaded_event/index.html b/files/de/web/api/window/domcontentloaded_event/index.html deleted file mode 100644 index 928f665494541a..00000000000000 --- a/files/de/web/api/window/domcontentloaded_event/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/API/Window/DOMContentLoaded_event -tags: - - Referenz - - Web - - events -translation_of: Web/API/Window/DOMContentLoaded_event -original_slug: Web/Events/DOMContentLoaded ---- -

Das DOMContentLoaded-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das load-Event sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das load-Event zu benutzen, obwohl DOMContentLoaded wesentlich besser geeignet wäre.

- -

{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}

- -

{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}

- -

Performanz

- -

Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das JavaScript asynchron ausgeführt und das Laden der Stylesheets optimiert werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.

- -

Allgemeine Informationen

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
Ja
-
Abbrechbar
-
Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)
-
Ziel
-
Dokument
-
Standardaktion
-
Keine
-
- -

Eigenschaften

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Das Zielelement des Events (das oberste Ziel im DOM Baum).
type {{readonlyInline}}{{domxref("DOMString")}}Der Typ des Events.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Gibt an, ob das Event weiter nach oben wandert (bubble).
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Gibt and, ob das Event abbrechbar ist.
- -

Beispiel

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-</script>
-
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst.
-</script>
-
- -

Browserkompatibilität

- -{{Compat}} - -

[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.

- -

[2] Internet Explorer 8 unterstützt das readystatechange-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, document.documentElement.doScroll("left"); auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.

- -

Verwandte Events

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/de/web/api/window/dump/index.html b/files/de/web/api/window/dump/index.html deleted file mode 100644 index 6fc6cff32d77ed..00000000000000 --- a/files/de/web/api/window/dump/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -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);
-
- -
    -
  • message ist die zu protokollierende Nachricht.
    • -
- -

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/hashchange_event/index.html b/files/de/web/api/window/hashchange_event/index.html deleted file mode 100644 index c8d7de2b2a1e50..00000000000000 --- a/files/de/web/api/window/hashchange_event/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: WindowEventHandlers.onhashchange -slug: Web/API/Window/hashchange_event -tags: - - Eigenschaft - - Event - - HTML-DOM - - Referenz - - WindowEventHandlers -translation_of: Web/API/WindowEventHandlers/onhashchange -original_slug: 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

- -{{Compat}} - - diff --git a/files/de/web/api/window/history/index.html b/files/de/web/api/window/history/index.html deleted file mode 100644 index bfab1d05182f9b..00000000000000 --- a/files/de/web/api/window/history/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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/length/index.html b/files/de/web/api/window/length/index.html deleted file mode 100644 index 2fbac683fcd8e3..00000000000000 --- a/files/de/web/api/window/length/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -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;
-
- -
    -
  • framesCount ist die Anzahl an Frames.
    • -
- -

Beispiel

- -
if (window.length) {
-  // this is a document with subframes
-}
- -

Spezifikationen

- -{{Specifications}} - -

Browserkompatibilität

- - - -

{{Compat("api.Window.length")}}

diff --git a/files/de/web/api/window/load_event/index.html b/files/de/web/api/window/load_event/index.html deleted file mode 100644 index 4e643fe7abb224..00000000000000 --- a/files/de/web/api/window/load_event/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: load -slug: Web/API/Window/load_event -translation_of: Web/API/Window/load_event -original_slug: Web/Events/load ---- -

Das load Ereignis wird ausgelöst, sobald eine Ressource und die von ihr abhängigen Ressourcen das Laden beendet haben.

- -

General info

- -
-
Spezifikation
-
DOM L3
-
Schnittstelle
-
UIEvent
-
bubbles
-
Nein
-
cancelable
-
Nein
-
Ziel
-
Window,Document,Element
-
Default Action
-
None.
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
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.
- -

Example

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Alle Ressourcen haben das Laden beendet!");
-  });
-</script>
-
- -

- - - -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/de/web/api/window/localstorage/index.html b/files/de/web/api/window/localstorage/index.html deleted file mode 100644 index ee0191c8698916..00000000000000 --- a/files/de/web/api/window/localstorage/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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

- -
    -
  • Using the Web Storage API
    • -
  • {{domxref("LocalStorage")}}
    • -
  • {{domxref("SessionStorage")}}
    • -
  • {{domxref("Window.sessionStorage")}}
    • -
diff --git a/files/de/web/api/window/name/index.html b/files/de/web/api/window/name/index.html deleted file mode 100644 index 9fd63a19039efb..00000000000000 --- a/files/de/web/api/window/name/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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 deleted file mode 100644 index 39cf8b9ff87fcd..00000000000000 --- a/files/de/web/api/window/navigator/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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/opendialog/index.html b/files/de/web/api/window/opendialog/index.html deleted file mode 100644 index 62ba37663c9593..00000000000000 --- a/files/de/web/api/window/opendialog/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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 deleted file mode 100644 index 32301159ce07db..00000000000000 --- a/files/de/web/api/window/opener/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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/popstate_event/index.html b/files/de/web/api/window/popstate_event/index.html deleted file mode 100644 index 0d2d0af107b301..00000000000000 --- a/files/de/web/api/window/popstate_event/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: WindowEventHandlers.onpopstate -slug: Web/API/Window/popstate_event -translation_of: Web/API/WindowEventHandlers/onpopstate -original_slug: 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;
-
- -
    -
  • funcRef ist eine event handler Funktion, bzw. Ereignisbehandlungsroutine.
    • -
- -

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/window/print/index.html b/files/de/web/api/window/print/index.html deleted file mode 100644 index afad8c1c7f6d7e..00000000000000 --- a/files/de/web/api/window/print/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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

- -
    -
  • Printing
    • -
  • {{ domxref("window.onbeforeprint") }}
    • -
  • {{ domxref("window.onafterprint") }}
    • -
diff --git a/files/de/web/api/window/prompt/index.html b/files/de/web/api/window/prompt/index.html deleted file mode 100644 index d0236116e2fad1..00000000000000 --- a/files/de/web/api/window/prompt/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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);
-
- -
    -
  • eingabe ist ein String, der den vom Benutzer eingegeben Text enthält, oder null.
    • -
  • nachricht ist der String, der dem Benutzer angezeigt wird. Dieser Parameter ist optional und kann weggelassen werden, wenn es im Fenster nichts anzuzeigen gibt.
    • -
  • default ist ein String mit dem voreingestellten Wert im Eingabefeld. Es ist ein optionaler Parameter. Beachte, dass in Internet Explorer 7 und 8 der String "undefined" im Eingabefeld steht, wenn der Parameter weggelassen wird.
    • -
- -

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

- -
    -
  • {{domxref("window.alert", "alert")}}
    • -
  • {{domxref("window.confirm", "confirm")}}
    • -
diff --git a/files/de/web/api/window/resize_event/index.html b/files/de/web/api/window/resize_event/index.html deleted file mode 100644 index bc95b0990599b5..00000000000000 --- a/files/de/web/api/window/resize_event/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: GlobalEventHandlers.onresize -slug: Web/API/Window/resize_event -tags: - - API - - DOM - - Property -translation_of: Web/API/GlobalEventHandlers/onresize -original_slug: Web/API/GlobalEventHandlers/onresize ---- -

{{ ApiRef() }}

- -

Die GlobalEventHandlers.onresize Property enthält einen {{event("Event_handlers", "event handler")}}, der ausgelöst wird, sobald ein {{event("resize")}}-Event empfangen wird.

- -

Syntax

- -
window.onresize = funcRef;
-
- -

Parameter

- -
    -
  • funcRef ist eine Referenz auf eine Funktion.
    • -
- -

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

- -{{Specifications}} diff --git a/files/de/web/api/window/screenx/index.html b/files/de/web/api/window/screenx/index.html deleted file mode 100644 index a6b32e98d1a493..00000000000000 --- a/files/de/web/api/window/screenx/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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
-
- -
    -
  • lLoc enthält den Abstand in CSS-Pixeln vom linken Bildschirmrand.
    • -
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}Initiale Definition.
- -

Browserkompatibilität

- -{{Compat}} - -

[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

- -
    -
  • {{domxref("Window.screenY")}}
    • -
diff --git a/files/de/web/api/window/scroll/index.html b/files/de/web/api/window/scroll/index.html deleted file mode 100644 index 463a83c7cf99f0..00000000000000 --- a/files/de/web/api/window/scroll/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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

- -
    -
  • x-koord ist das Pixel auf der horizontalen Achse des Dokuments, das Sie in der oberen linken Ecke angezeigt haben wollen.
    • -
  • y-koord ist das Pixel auf der vertikalen Achse des Dokuments, das Sie in der oberen linken Ecke angezeigt haben wollen.
    • -
- -

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 deleted file mode 100644 index 5697fbd9c4db65..00000000000000 --- a/files/de/web/api/window/scrollto/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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

- -
    -
  • x-Koordinate ist der Pixel auf der horizontalen Achse des Dokuments, wo der obere linke Punkt sein soll.
    • -
  • y-koordinate ist der Pixel auf der vertikalen Achse des Dokuments, wo der obere linke Punkt sein soll.
    • -
- -

- or -

- -
    -
  • options ist ein {{domxref("ScrollToOptions")}} Dictionary.
    • -
- -

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 deleted file mode 100644 index 281ef2a95a3606..00000000000000 --- a/files/de/web/api/window/sessionstorage/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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 deleted file mode 100644 index 8968e89177b8eb..00000000000000 --- a/files/de/web/api/window/stop/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -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/windoweventhandlers/index.html b/files/de/web/api/windoweventhandlers/index.html deleted file mode 100644 index 56c6a055242580..00000000000000 --- a/files/de/web/api/windoweventhandlers/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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 {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
-
{{domxref("WindowEventHandlers.onhashchange")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
-
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("message")}} event is raised.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("offline")}} event is raised.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("online")}} event is raised.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
-
{{domxref("WindowEventHandlers.onpopstate")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("popstate")}} event is raised.
-
{{domxref("WindowEventHandlers.onresize")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("resize")}} event is raised.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("storage")}} event is raised.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Is an {{event("Event_handlers", "event handler")}} 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

- -{{Compat}} - -

See also

- -
    -
  • {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}
    • -
diff --git a/files/de/web/api/windoworworkerglobalscope/index.html b/files/de/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 59cdb9f2af4bd6..00000000000000 --- a/files/de/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 -original_slug: Web/API/WindowBase64 ---- -

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

- -{{Compat}} - -

[1] atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

- -

See also

- -
    -
  • Base64 encoding and decoding
    • -
  • {{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}
    • -
diff --git a/files/de/web/api/worker/index.html b/files/de/web/api/worker/index.html deleted file mode 100644 index bb2eefb85cb03a..00000000000000 --- a/files/de/web/api/worker/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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 {{event("Event_handlers", "event handler")}}, 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.

- -{{Compat}} - -

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.

- -

See also

- - diff --git a/files/de/web/api/xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/index.html deleted file mode 100644 index 6f9d0479ad0458..00000000000000 --- a/files/de/web/api/xmlhttprequest/index.html +++ /dev/null @@ -1,557 +0,0 @@ ---- -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}}nsIChannelDer 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

- -
    -
  • Standardmässig begrenzt Firefox 3 die Anzahl gleichzeitiger XMLHttpRequest Verbindungen pro Server auf 6 (frühere Versionen begrenzen dies auf 2 pro Server). Manche interaktiven Websites können eine XMLHttpRequest Verbindung offen halten, so dass das Öffnen mehrerer Sitzungen auf solchen Sites dazu führen kann, dass der Browser auf eine Art und Weise hängen bleibt, dass das Fenster nicht mehr neu gezeichnet wird und Steuerelemente nicht mehr reagieren. Dieser Wert lässt sich ändern durch Editieren der Voreinstellung network.http.max-persistent-connections-per-server in about:config.
    • -
  • Ab Gecko 7 werden Header, die durch setRequestHeader gesetzt wurden, mit der Anfrage mitgeschickt, wenn einer Umleitung gefolgt wird. Zuvor wurden diese Header nicht gesendet.
    • -
  • XMLHttpRequest ist in Gecko implementiert mittels der nsIXMLHttpRequest, nsIXMLHttpRequestEventTarget, und nsIJSXMLHttpRequest Schnittstellen.
    • -
- -

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

- -{{Compat}} - -

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/css/-moz-float-edge/index.html b/files/de/web/css/-moz-float-edge/index.html deleted file mode 100644 index 7bddc9e0a63a62..00000000000000 --- a/files/de/web/css/-moz-float-edge/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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 deleted file mode 100644 index 7a61a0d55a7462..00000000000000 --- a/files/de/web/css/-moz-force-broken-image-icon/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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

- -
    -
  • Diese Eigenschaft funktioniert nur in gecko-basierten Browsern.
    • -
  • Die Verwendung dieser Eigenschaft wird nicht empfohlen. Stattdessen sollte ein passendes alt Attribut verwendet werden.
    • -
- -

Siehe auch

- -
    -
  • {{Bug(58646)}}
    • -
diff --git a/files/de/web/css/-moz-image-rect/index.html b/files/de/web/css/-moz-image-rect/index.html deleted file mode 100644 index 685d7a855b7fee..00000000000000 --- a/files/de/web/css/-moz-image-rect/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -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

- -
    -
  • {{WebkitBug(32177)}}
    • -
diff --git a/files/de/web/css/-moz-image-region/index.html b/files/de/web/css/-moz-image-region/index.html deleted file mode 100644 index 74bb2138790004..00000000000000 --- a/files/de/web/css/-moz-image-region/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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 deleted file mode 100644 index 7cac9575981837..00000000000000 --- a/files/de/web/css/-moz-orient/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -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

- -
    -
  • {{cssxref("box-orient")}}
    • -
diff --git a/files/de/web/css/-moz-outline-radius-bottomleft/index.html b/files/de/web/css/-moz-outline-radius-bottomleft/index.html deleted file mode 100644 index 33caabb749cb2b..00000000000000 --- a/files/de/web/css/-moz-outline-radius-bottomleft/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 deleted file mode 100644 index 6603060bd4ea5e..00000000000000 --- a/files/de/web/css/-moz-outline-radius-bottomright/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 deleted file mode 100644 index 1129445f62ab60..00000000000000 --- a/files/de/web/css/-moz-outline-radius-topleft/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 deleted file mode 100644 index 4abd5bea36a9b4..00000000000000 --- a/files/de/web/css/-moz-outline-radius-topright/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 deleted file mode 100644 index fa87451b5f9ca0..00000000000000 --- a/files/de/web/css/-moz-outline-radius/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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.
-
- -
    -
  • Falls ein einzelner Wert gesetzt ist, wird er auf alle 4 Ecken angewendet.
    • -
  • Falls zwei Werte gesetzt sind, bezieht sich der erste auf die linke obere und die rechte untere Ecke und der zweite auf die rechte obere und die linke untere Ecke.
    • -
  • Falls drei Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere und die linke untere Ecke und der dritte auf die rechte untere Ecke.
    • -
  • Falls vier Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere Ecke, der dritte auf die rechte untere Ecke und der vierte auf die linke untere Ecke.
    • -
- -

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

- -
    -
  • dotted oder dashed abgerundete Ecken werden durchgehend dargestellt, {{bug("382721")}}.
    • -
  • Zukünftige Versionen von Gecko/Firefox entfernen möglicherweise diese Eigenschaft vollständig. Siehe {{bug("593717")}}.
    • -
- -

Spezifikationen

- -

Diese Eigenschaft ist in keinem CSS Standard definiert.

- -

Browser Kompatibilität

- -{{Compat}} diff --git a/files/de/web/css/-moz-user-focus/index.html b/files/de/web/css/-moz-user-focus/index.html deleted file mode 100644 index c82cba6f23133e..00000000000000 --- a/files/de/web/css/-moz-user-focus/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/-moz-user-input/index.html b/files/de/web/css/-moz-user-input/index.html deleted file mode 100644 index b464f664b6760b..00000000000000 --- a/files/de/web/css/-moz-user-input/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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

- -
    -
  • {{cssxref("-moz-user-focus")}}
    • -
  • {{cssxref("-moz-user-modify")}}
    • -
  • {{cssxref("-moz-user-select")}}
    • -
diff --git a/files/de/web/css/-webkit-box-reflect/index.html b/files/de/web/css/-webkit-box-reflect/index.html deleted file mode 100644 index 1e9ada8e14f0a0..00000000000000 --- a/files/de/web/css/-webkit-box-reflect/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: '-webkit-box-reflect' -slug: Web/CSS/-webkit-box-reflect -tags: - - CSS - - 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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/css/-webkit-mask-position-x/index.html b/files/de/web/css/-webkit-mask-position-x/index.html deleted file mode 100644 index ddcefe2ed1f218..00000000000000 --- a/files/de/web/css/-webkit-mask-position-x/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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

- -{{Compat}} - -

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 deleted file mode 100644 index 375cf102912f40..00000000000000 --- a/files/de/web/css/-webkit-mask-position-y/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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

- -{{Compat}} - -

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 deleted file mode 100644 index fc07688cfa9eec..00000000000000 --- a/files/de/web/css/-webkit-mask-repeat-x/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index bf287f0a4e2ab3..00000000000000 --- a/files/de/web/css/-webkit-mask-repeat-y/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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

- -{{Compat}} - -

[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-overflow-scrolling/index.html b/files/de/web/css/-webkit-overflow-scrolling/index.html deleted file mode 100644 index c039476dd939e2..00000000000000 --- a/files/de/web/css/-webkit-overflow-scrolling/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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

- -{{Compat}} - -

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 deleted file mode 100644 index fa3ffdabc0cab1..00000000000000 --- a/files/de/web/css/-webkit-tap-highlight-color/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -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 deleted file mode 100644 index fd25d6e685e6ef..00000000000000 --- a/files/de/web/css/-webkit-text-fill-color/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -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

- -{{Compat}} - -

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 deleted file mode 100644 index 0fb4a3609ce59d..00000000000000 --- a/files/de/web/css/-webkit-text-stroke-color/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -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

- -{{Compat}} - -

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 deleted file mode 100644 index daf94d8d0994b4..00000000000000 --- a/files/de/web/css/-webkit-text-stroke-width/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/css/-webkit-text-stroke/index.html b/files/de/web/css/-webkit-text-stroke/index.html deleted file mode 100644 index 6c4bbb9412e1ad..00000000000000 --- a/files/de/web/css/-webkit-text-stroke/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 0c2bfd17ebe62d..00000000000000 --- a/files/de/web/css/-webkit-touch-callout/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 94db0f216d50a0..00000000000000 --- a/files/de/web/css/@charset/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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 deleted file mode 100644 index 8bb12442248110..00000000000000 --- a/files/de/web/css/@document/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -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:

- -
    -
  • url(), welche einen exakten URL matcht.
    • -
  • url-prefix(), welche matcht, falls der Dokument-URL mit dem angegebenen Wert beginnt.
    • -
  • domain(), welche matcht, falls der Dokument-URL zur angegebenen Domain (oder einer Subdomain davon) gehört.
    • -
  • regexp(), welche matcht, falls der Dokument-URL auf den angegebenen regulären Ausdruck passt. Der Ausdruck muss den gesamten URL matchen.
    • -
- -

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 deleted file mode 100644 index c214afdbe3c10b..00000000000000 --- a/files/de/web/css/@import/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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 deleted file mode 100644 index c1a5569afe8391..00000000000000 --- a/files/de/web/css/@keyframes/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -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 }} 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 deleted file mode 100644 index d919a97c587d36..00000000000000 --- a/files/de/web/css/@media/any-pointer/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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/aural/index.html b/files/de/web/css/@media/aural/index.html deleted file mode 100644 index 65608a08ac0a82..00000000000000 --- a/files/de/web/css/@media/aural/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: aural -slug: Web/CSS/@media/aural -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/@media/aural -original_slug: Web/CSS/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/@media/index.html b/files/de/web/css/@media/index.html deleted file mode 100644 index 90cf4a935cef66..00000000000000 --- a/files/de/web/css/@media/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -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

- -
    -
  • Media queries
    • -
  • The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.
    • -
diff --git a/files/de/web/css/@media/pointer/index.html b/files/de/web/css/@media/pointer/index.html deleted file mode 100644 index db50e4800c7443..00000000000000 --- a/files/de/web/css/@media/pointer/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -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 deleted file mode 100644 index 84c9382a27e4c9..00000000000000 --- a/files/de/web/css/@media/prefers-reduced-motion/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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

- -
    -
  • Unter Windows 10: Einstellungen > Erleichterte Bedienung > Anzeige > Animationen in Windows anzeigen
    • -
  • In Firefox about:config: Füge eine Binär-Präferenz ("Number") namens ui.prefersReducedMotion hinzu und setze deren Wert auf 1. Änderung an dieser Präferenz werden sofort übernommen.
    • -
- -

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 deleted file mode 100644 index 7f25285f3e2285..00000000000000 --- a/files/de/web/css/@media/width/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -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/index.html b/files/de/web/css/@page/index.html deleted file mode 100644 index 7a17e475d94034..00000000000000 --- a/files/de/web/css/@page/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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.

- -
    -
  • {{Cssxref(":blank")}}
    • -
  • {{Cssxref(":first")}}
    • -
  • {{Cssxref(":left")}}
    • -
  • {{Cssxref(":right")}}
    • -
  • {{Cssxref(":recto")}} {{experimental_inline}}
    • -
  • {{Cssxref(":verso")}} {{experimental_inline}}
    • -
- -

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/@viewport/index.html b/files/de/web/css/@viewport/index.html deleted file mode 100644 index 73cbd15dbbc37f..00000000000000 --- a/files/de/web/css/@viewport/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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 deleted file mode 100644 index bf59121e5edf7b..00000000000000 --- a/files/de/web/css/_colon_-moz-broken/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -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

- -
    -
  • {{bug("11011")}}
    • -
  • {{cssxref("-moz-alt-content")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-drag-over/index.html b/files/de/web/css/_colon_-moz-drag-over/index.html deleted file mode 100644 index af4b680211ddef..00000000000000 --- a/files/de/web/css/_colon_-moz-drag-over/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -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 deleted file mode 100644 index 97002e8509931a..00000000000000 --- a/files/de/web/css/_colon_-moz-first-node/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":-moz-last-node")}}
    • -
  • {{cssxref(":first-child")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-focusring/index.html b/files/de/web/css/_colon_-moz-focusring/index.html deleted file mode 100644 index 3bdde77fe642a6..00000000000000 --- a/files/de/web/css/_colon_-moz-focusring/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{bug("418521")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-handler-blocked/index.html b/files/de/web/css/_colon_-moz-handler-blocked/index.html deleted file mode 100644 index df544a0487265b..00000000000000 --- a/files/de/web/css/_colon_-moz-handler-blocked/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":-moz-handler-crashed")}}
    • -
  • {{cssxref(":-moz-handler-disabled")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-handler-crashed/index.html b/files/de/web/css/_colon_-moz-handler-crashed/index.html deleted file mode 100644 index 25f59a32c21f88..00000000000000 --- a/files/de/web/css/_colon_-moz-handler-crashed/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":-moz-handler-blocked")}}
    • -
  • {{cssxref(":-moz-handler-disabled")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-handler-disabled/index.html b/files/de/web/css/_colon_-moz-handler-disabled/index.html deleted file mode 100644 index 4a47e9f9d6a325..00000000000000 --- a/files/de/web/css/_colon_-moz-handler-disabled/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":-moz-handler-blocked")}}
    • -
  • {{cssxref(":-moz-handler-crashed")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-last-node/index.html b/files/de/web/css/_colon_-moz-last-node/index.html deleted file mode 100644 index 29f8c0b4864462..00000000000000 --- a/files/de/web/css/_colon_-moz-last-node/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":-moz-first-node")}}
    • -
  • {{cssxref(":last-child")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-list-bullet/index.html b/files/de/web/css/_colon_-moz-list-bullet/index.html deleted file mode 100644 index f3ffef8cdabdda..00000000000000 --- a/files/de/web/css/_colon_-moz-list-bullet/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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 deleted file mode 100644 index 92de0853acebc6..00000000000000 --- a/files/de/web/css/_colon_-moz-list-number/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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 deleted file mode 100644 index 01a8a5cb9a43c6..00000000000000 --- a/files/de/web/css/_colon_-moz-loading/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -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 deleted file mode 100644 index 74d080b0162e43..00000000000000 --- a/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref(":-moz-locale-dir(rtl)")}}
    • -
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 deleted file mode 100644 index ac2045c98693ac..00000000000000 --- a/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -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-only-whitespace/index.html b/files/de/web/css/_colon_-moz-only-whitespace/index.html deleted file mode 100644 index ef533f52d73288..00000000000000 --- a/files/de/web/css/_colon_-moz-only-whitespace/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -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-submit-invalid/index.html b/files/de/web/css/_colon_-moz-submit-invalid/index.html deleted file mode 100644 index af433fef51a14d..00000000000000 --- a/files/de/web/css/_colon_-moz-submit-invalid/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":valid")}}
    • -
  • {{cssxref(":invalid")}}
    • -
  • {{cssxref(":required")}}
    • -
  • {{cssxref(":optional")}}
    • -
diff --git a/files/de/web/css/_colon_-moz-suppressed/index.html b/files/de/web/css/_colon_-moz-suppressed/index.html deleted file mode 100644 index a14ef0e383cd02..00000000000000 --- a/files/de/web/css/_colon_-moz-suppressed/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -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-user-disabled/index.html b/files/de/web/css/_colon_-moz-user-disabled/index.html deleted file mode 100644 index 50ea47366cb934..00000000000000 --- a/files/de/web/css/_colon_-moz-user-disabled/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -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 deleted file mode 100644 index 88a73ced90f739..00000000000000 --- a/files/de/web/css/_colon_-moz-window-inactive/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -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_active/index.html b/files/de/web/css/_colon_active/index.html deleted file mode 100644 index 208f391127ded2..00000000000000 --- a/files/de/web/css/_colon_active/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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

- -
    -
  • Weitere Link-Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":visited")}} und {{cssxref(":hover")}}.
    • -
diff --git a/files/de/web/css/_colon_autofill/index.html b/files/de/web/css/_colon_autofill/index.html deleted file mode 100644 index 17d95e56fa784f..00000000000000 --- a/files/de/web/css/_colon_autofill/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: Web/CSS/:autofill -tags: - - CSS - - NeedsExample - - Non-standard - - Pseudoklasse - - Referenz -translation_of: Web/CSS/:-webkit-autofill -original_slug: 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

- -{{Compat}} - -

Siehe auch

- - diff --git a/files/de/web/css/_colon_default/index.html b/files/de/web/css/_colon_default/index.html deleted file mode 100644 index 5055b1a2b89a67..00000000000000 --- a/files/de/web/css/_colon_default/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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 deleted file mode 100644 index 160ff8063bb716..00000000000000 --- a/files/de/web/css/_colon_dir/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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

- -
    -
  • Sprachbezogene Pseudoklassen: {{cssxref(":lang")}}, {{cssxref(":dir")}}
    • -
diff --git a/files/de/web/css/_colon_disabled/index.html b/files/de/web/css/_colon_disabled/index.html deleted file mode 100644 index 1bec2fd5c3d223..00000000000000 --- a/files/de/web/css/_colon_disabled/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref(":enabled")}}
    • -
diff --git a/files/de/web/css/_colon_empty/index.html b/files/de/web/css/_colon_empty/index.html deleted file mode 100644 index ed47ba891a4b9e..00000000000000 --- a/files/de/web/css/_colon_empty/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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 deleted file mode 100644 index 1d4f3888d57863..00000000000000 --- a/files/de/web/css/_colon_enabled/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":disabled")}}
    • -
diff --git a/files/de/web/css/_colon_first-child/index.html b/files/de/web/css/_colon_first-child/index.html deleted file mode 100644 index 150c836d177457..00000000000000 --- a/files/de/web/css/_colon_first-child/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":last-child")}}
    • -
  • {{cssxref(":nth-child")}}
    • -
  • {{cssxref(":last-of-type")}}
    • -
diff --git a/files/de/web/css/_colon_first-of-type/index.html b/files/de/web/css/_colon_first-of-type/index.html deleted file mode 100644 index 55b24ee7a2ac67..00000000000000 --- a/files/de/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref(":nth-of-type")}}, {{Cssxref(":last-of-type")}}
    • -
diff --git a/files/de/web/css/_colon_first/index.html b/files/de/web/css/_colon_first/index.html deleted file mode 100644 index 2af8daa43a1bed..00000000000000 --- a/files/de/web/css/_colon_first/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref("@page")}}
    • -
  • {{Cssxref(":left")}}
    • -
  • {{Cssxref(":right")}}
    • -
diff --git a/files/de/web/css/_colon_focus/index.html b/files/de/web/css/_colon_focus/index.html deleted file mode 100644 index 2b98c9b5722d6f..00000000000000 --- a/files/de/web/css/_colon_focus/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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

- -

- -
    -
  • {{cssxref(":focus-within")}}
    • -
- -

diff --git a/files/de/web/css/_colon_fullscreen/index.html b/files/de/web/css/_colon_fullscreen/index.html deleted file mode 100644 index 8d10c1176d3abd..00000000000000 --- a/files/de/web/css/_colon_fullscreen/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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

- -
    -
  • Vollbildmodus
    • -
  • {{domxref("element.mozRequestFullScreen()")}}
    • -
  • {{domxref("document.mozCancelFullScreen()")}}
    • -
  • {{domxref("document.mozFullScreen")}}
    • -
  • {{domxref("document.mozFullScreenElement")}}
    • -
  • {{domxref("document.mozFullScreenEnabled")}}
    • -
  • {{HTMLAttrXRef("allowfullscreen", "iframe")}}
    • -
  • {{cssxref(":-moz-full-screen-ancestor")}}
    • -
diff --git a/files/de/web/css/_colon_hover/index.html b/files/de/web/css/_colon_hover/index.html deleted file mode 100644 index a293f58ccb775d..00000000000000 --- a/files/de/web/css/_colon_hover/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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 deleted file mode 100644 index 695b664e663188..00000000000000 --- a/files/de/web/css/_colon_in-range/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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 deleted file mode 100644 index 8f229baed24d2c..00000000000000 --- a/files/de/web/css/_colon_indeterminate/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 deleted file mode 100644 index 963ef0ebfe3b8f..00000000000000 --- a/files/de/web/css/_colon_invalid/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -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

- -
    -
  • {{ cssxref(":valid") }}
    • -
  • {{ cssxref(":-moz-submit-invalid") }}
    • -
  • {{ cssxref(":required") }}
    • -
  • {{ cssxref(":optional") }}
    • -
diff --git a/files/de/web/css/_colon_lang/index.html b/files/de/web/css/_colon_lang/index.html deleted file mode 100644 index b426c83f5b01df..00000000000000 --- a/files/de/web/css/_colon_lang/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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 deleted file mode 100644 index 368ad9a58a8a5b..00000000000000 --- a/files/de/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":first-child")}}
    • -
  • {{cssxref(":nth-child")}}
    • -
  • {{cssxref(":last-of-type")}}
    • -
diff --git a/files/de/web/css/_colon_last-of-type/index.html b/files/de/web/css/_colon_last-of-type/index.html deleted file mode 100644 index 267747715fc975..00000000000000 --- a/files/de/web/css/_colon_last-of-type/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref(":nth-last-of-type")}}
    • -
  • {{Cssxref(":first-of-type")}}
    • -
  • {{Cssxref(":nth-of-type")}}
    • -
diff --git a/files/de/web/css/_colon_link/index.html b/files/de/web/css/_colon_link/index.html deleted file mode 100644 index 0ac0cb3d3d0b43..00000000000000 --- a/files/de/web/css/_colon_link/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}
    • -
diff --git a/files/de/web/css/_colon_not/index.html b/files/de/web/css/_colon_not/index.html deleted file mode 100644 index baf0e2e1b0bb89..00000000000000 --- a/files/de/web/css/_colon_not/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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: - -
    -
  • Mit der Negation können auch irrationale Selektoren erstellt werden, z. B. :not(*), welche alle Elemente auswählen würde, die keine Elemente sind.
    • -
  • Es ist möglich, andere Regeln zu überschreiben. A:not(B) hat den selben Effekt wie A, aber eine höhere Spezifität.
    • -
  • :not(bla){} passt auf alle Elemente, die nicht bla sind einschließlich html und body.
    • -
-
- -

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 deleted file mode 100644 index 17dc2c33871053..00000000000000 --- a/files/de/web/css/_colon_nth-child/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -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:

- -
    -
  • 1n+0, oder einfach n, trifft auf jedes Kindelement zu.
    • -
  • 2n+0, oder einfach 2n, würde auf die Kindelemente 2, 4, 6, 8, etc. zutreffen. Hier kann auch einfach das Schlüsselwort even verwendet werden.
    • -
  • 2n+1 würde auf die Elemente 1, 3, 5, 7, etc. zutreffen. Hier gibt es auch eine Kurzform: Das Schlüsselwort odd.
    • -
  • 3n+4 würde auf die folgenden Elemente zutreffen: 4, 7, 10, 13, etc.
    • -
- -

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

- -
    -
  • {{cssxref(":nth-of-type")}}
    • -
diff --git a/files/de/web/css/_colon_only-child/index.html b/files/de/web/css/_colon_only-child/index.html deleted file mode 100644 index 5d4d8f6ebff3e6..00000000000000 --- a/files/de/web/css/_colon_only-child/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -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 deleted file mode 100644 index ccf6fe977074f4..00000000000000 --- a/files/de/web/css/_colon_optional/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":required")}}
    • -
  • {{cssxref(":invalid")}}
    • -
  • {{cssxref(":valid")}}
    • -
diff --git a/files/de/web/css/_colon_out-of-range/index.html b/files/de/web/css/_colon_out-of-range/index.html deleted file mode 100644 index 8547309521a0c7..00000000000000 --- a/files/de/web/css/_colon_out-of-range/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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_placeholder-shown/index.html b/files/de/web/css/_colon_placeholder-shown/index.html deleted file mode 100644 index 288d6476eccdaa..00000000000000 --- a/files/de/web/css/_colon_placeholder-shown/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: Web/CSS/:placeholder-shown -tags: - - CSS - - CSS Pseudoklasse - - CSS Referenz - - Non-standard - - Platzhalter - - Selektoren -translation_of: Web/CSS/:placeholder-shown -translation_of_original: Web/CSS/:-moz-placeholder -original_slug: Web/CSS/:-moz-placeholder ---- -
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

- -{{Compat}} - -

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

- -

Siehe auch

- - diff --git a/files/de/web/css/_colon_required/index.html b/files/de/web/css/_colon_required/index.html deleted file mode 100644 index 769f9251803320..00000000000000 --- a/files/de/web/css/_colon_required/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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

- -
    -
  • {{cssxref(":optional")}}, {{cssxref(":invalid")}}, {{cssxref(":valid")}}
    • -
diff --git a/files/de/web/css/_colon_root/index.html b/files/de/web/css/_colon_root/index.html deleted file mode 100644 index 4328605e04854f..00000000000000 --- a/files/de/web/css/_colon_root/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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_user-invalid/index.html b/files/de/web/css/_colon_user-invalid/index.html deleted file mode 100644 index 6e0fc4560fbfcd..00000000000000 --- a/files/de/web/css/_colon_user-invalid/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: Web/CSS/:user-invalid -tags: - - CSS - - CSS Referenz - - NeedsExample - - NeedsMobileBrowserCompatibility - - Non-standard - - Pseudoklasse -translation_of: Web/CSS/:user-invalid -original_slug: Web/CSS/:-moz-ui-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:

- -
    -
  • Falls das Steuerungselement nicht den Fokus hat und der Wert ungültig ist, wende diese Pseudoklasse an.
    • -
  • Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse nicht an.
    • -
  • Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.
    • -
  • Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.
    • -
- -

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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{cssxref(":valid")}}
    • -
  • {{cssxref(":invalid")}}
    • -
  • {{cssxref(":required")}}
    • -
  • {{cssxref(":optional")}}
    • -
  • {{cssxref(":-moz-ui-valid")}}
    • -
diff --git a/files/de/web/css/_colon_visited/index.html b/files/de/web/css/_colon_visited/index.html deleted file mode 100644 index 53071e2595d84a..00000000000000 --- a/files/de/web/css/_colon_visited/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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 deleted file mode 100644 index 470328ae51c941..00000000000000 --- a/files/de/web/css/_doublecolon_-moz-page-sequence/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{cssxref("::-moz-page")}}
    • -
  • {{cssxref("::-moz-scrolled-page-sequence")}}
    • -
diff --git a/files/de/web/css/_doublecolon_-moz-page/index.html b/files/de/web/css/_doublecolon_-moz-page/index.html deleted file mode 100644 index e491443ea9c316..00000000000000 --- a/files/de/web/css/_doublecolon_-moz-page/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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

- -
    -
  • {{cssxref("::-moz-page-sequence")}}
    • -
  • {{cssxref("::-moz-scrolled-page-sequence")}}
    • -
diff --git a/files/de/web/css/_doublecolon_-moz-progress-bar/index.html b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html deleted file mode 100644 index 858c79c3199141..00000000000000 --- a/files/de/web/css/_doublecolon_-moz-progress-bar/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -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

- -
    -
  • {{HTMLElement("progress")}}
    • -
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 deleted file mode 100644 index 766209907979e7..00000000000000 --- a/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -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

- -{{Compat}} - -

Siehe auch

- -
    -
  • {{cssxref("::-moz-page")}}
    • -
  • {{cssxref("::-moz-page-sequence")}}
    • -
diff --git a/files/de/web/css/_doublecolon_after/index.html b/files/de/web/css/_doublecolon_after/index.html deleted file mode 100644 index 6eca5cbd0cb3f5..00000000000000 --- a/files/de/web/css/_doublecolon_after/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref("::before")}}, {{cssxref("content")}}
    • -
diff --git a/files/de/web/css/_doublecolon_backdrop/index.html b/files/de/web/css/_doublecolon_backdrop/index.html deleted file mode 100644 index f535c3395a6fbe..00000000000000 --- a/files/de/web/css/_doublecolon_backdrop/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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

- -
    -
  • {{HTMLElement("dialog")}}
    • -
diff --git a/files/de/web/css/_doublecolon_before/index.html b/files/de/web/css/_doublecolon_before/index.html deleted file mode 100644 index 080ef608bb6fe4..00000000000000 --- a/files/de/web/css/_doublecolon_before/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -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

- -
    -
  • {{Cssxref("::after")}}, {{cssxref("content")}}
    • -
diff --git a/files/de/web/css/_doublecolon_marker/index.html b/files/de/web/css/_doublecolon_marker/index.html deleted file mode 100644 index 02c7dae2ef6838..00000000000000 --- a/files/de/web/css/_doublecolon_marker/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: '::marker' -slug: 'Web/CSS/::marker' -tags: - - CSS - - CSS Liste - - Experimental - - Layout - - Pseudo-element - - Referenz - - Selektor -translation_of: 'Web/CSS/::marker' ---- -
{{CSSRef}}
- -

Das CSS pseudo-element ::marker wählt das Markierungsfeld eines Listenelements aus, das in der Regel einen Aufzählungspunkt oder eine Zahl enthält. Es funktioniert mit jedem Element oder Pseudo-Element, das angezeigt werden soll: Listenelement display: list-item, wie z.B. die Elemente {{HTMLElement("li")}} und {{HTMLElement("summary")}} elements.

- -
::marker {
-  color: blue;
-  font-size: 1.2em;
-}
- -

Zulässige Eigenschaften

- -

Nur bestimmte CSS-Eigenschaften können in einer Regel mit ::marker als Selektor verwendet werden:

- -
    -
  • Alle Schrift-Eigenschaften
    • -
  • Die Eigenschaft {{CSSxRef("white-space")}}
    • -
  • {{CSSxRef("color")}}
    • -
  • Die Eigenschaften {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} und {{CSSxRef("direction")}}
    • -
  • Die Eigenschaft {{CSSxRef("content")}}
    • -
  • Alle Animations- und Transitions-Eigenschaften
    • -
- -
-

Die Spezifikation besagt, dass in Zukunft weitere CSS-Eigenschaften unterstützt werden können.

-
- -

Syntax

- -{{CSSSyntax}} - -

Beispiel

- -

HTML

- -
<ul>
-  <li>Peaches</li>
-  <li>Apples</li>
-  <li>Plums</li>
-</ul>
- -

CSS

- -
ul li::marker {
-  color: red;
-  font-size: 1.5em;
-}
- -

Ergebnis

- -

{{EmbedLiveSample('Examples')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}Keine wesentliche Änderung.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Ursprüngliche Definition.
- -

Browser-Kompatibilität

- -
- -

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

-
- -

See also

- -
    -
  • HTML-Elemente, die standardmäßig Markierungsfelder haben: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}
    • -
diff --git a/files/de/web/css/_doublecolon_selection/index.html b/files/de/web/css/_doublecolon_selection/index.html deleted file mode 100644 index d8d1197db357f0..00000000000000 --- a/files/de/web/css/_doublecolon_selection/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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/actual_value/index.html b/files/de/web/css/actual_value/index.html deleted file mode 100644 index 22e9cc94b09918..00000000000000 --- a/files/de/web/css/actual_value/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: tatsächlicher Wert -slug: Web/CSS/actual_value -translation_of: Web/CSS/actual_value -original_slug: Web/CSS/tatsächlicher_Wert ---- -
{{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/adjacent_sibling_combinator/index.html b/files/de/web/css/adjacent_sibling_combinator/index.html deleted file mode 100644 index 038346f47709ad..00000000000000 --- a/files/de/web/css/adjacent_sibling_combinator/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Angrenzende Geschwisterselektoren -slug: Web/CSS/Adjacent_sibling_combinator -tags: - - CSS - - CSS Referenz - - NeedsMobileBrowserCompatibility - - Selectors - - Selektoren -translation_of: Web/CSS/Adjacent_sibling_combinator -original_slug: Web/CSS/Angrenzende_Geschwisterselektoren ---- -

{{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/align-content/index.html b/files/de/web/css/align-content/index.html deleted file mode 100644 index 91cd6c1671d4b4..00000000000000 --- a/files/de/web/css/align-content/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -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 deleted file mode 100644 index 7691b4e386a079..00000000000000 --- a/files/de/web/css/align-items/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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

- -

TBD

- -

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 deleted file mode 100644 index 61c6c9c53259ec..00000000000000 --- a/files/de/web/css/align-self/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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 deleted file mode 100644 index ad71165540c52a..00000000000000 --- a/files/de/web/css/all/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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

- - -
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue;  color: red; }
-{{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

- - -
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue;  color: red; }
-blockquote { 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

- - -
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue;  color: red; }
-blockquote { 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

- - -
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue; color: red; }
-blockquote { 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 deleted file mode 100644 index 740d52b2446323..00000000000000 --- a/files/de/web/css/alternative_style_sheets/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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 deleted file mode 100644 index 2d45d258dfd067..00000000000000 --- a/files/de/web/css/angle-percentage/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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 deleted file mode 100644 index 9c7181255e9f9e..00000000000000 --- a/files/de/web/css/angle/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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/animation-delay/index.html b/files/de/web/css/animation-delay/index.html deleted file mode 100644 index eee5198120d379..00000000000000 --- a/files/de/web/css/animation-delay/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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 deleted file mode 100644 index 29bf7a2da4987f..00000000000000 --- a/files/de/web/css/animation-direction/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -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 deleted file mode 100644 index 6538d81a331604..00000000000000 --- a/files/de/web/css/animation-duration/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 deleted file mode 100644 index be480fdd80ad8b..00000000000000 --- a/files/de/web/css/animation-fill-mode/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -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 deleted file mode 100644 index b2afa2a255318e..00000000000000 --- a/files/de/web/css/animation-iteration-count/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 deleted file mode 100644 index ca6c4bbe4751de..00000000000000 --- a/files/de/web/css/animation-name/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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 deleted file mode 100644 index 5223e4139b4790..00000000000000 --- a/files/de/web/css/animation-play-state/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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 deleted file mode 100644 index dfcd429cecee0b..00000000000000 --- a/files/de/web/css/animation-timing-function/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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 deleted file mode 100644 index f1b55d6fd1d6a9..00000000000000 --- a/files/de/web/css/animation/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -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 deleted file mode 100644 index 160a504160cd06..00000000000000 --- a/files/de/web/css/appearance/index.html +++ /dev/null @@ -1,1486 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 7fbb6ced815c04..00000000000000 --- a/files/de/web/css/at-rule/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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 deleted file mode 100644 index a92a52416e8a14..00000000000000 --- a/files/de/web/css/attr/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr -tags: - - CSS - - CSS Funktion - - Layout - - Referenz - - Web -translation_of: Web/CSS/attr() -original_slug: 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/attribute_selectors/index.html b/files/de/web/css/attribute_selectors/index.html deleted file mode 100644 index 78e57b68c934db..00000000000000 --- a/files/de/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Attributselektoren -slug: Web/CSS/Attribute_selectors -tags: - - Anfänger - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Attribute_selectors -original_slug: Web/CSS/Attributselektoren ---- -
{{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/backdrop-filter/index.html b/files/de/web/css/backdrop-filter/index.html deleted file mode 100644 index 17d633527ad4c1..00000000000000 --- a/files/de/web/css/backdrop-filter/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -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 deleted file mode 100644 index 5aafbd7f471942..00000000000000 --- a/files/de/web/css/backface-visibility/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -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 deleted file mode 100644 index 12111607d7ef4b..00000000000000 --- a/files/de/web/css/background-attachment/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -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 deleted file mode 100644 index adc6d2c5d088b6..00000000000000 --- a/files/de/web/css/background-blend-mode/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -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 deleted file mode 100644 index e7dcb58207325d..00000000000000 --- a/files/de/web/css/background-clip/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/background-color/index.html b/files/de/web/css/background-color/index.html deleted file mode 100644 index 90209c440ad820..00000000000000 --- a/files/de/web/css/background-color/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -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 deleted file mode 100644 index 944da8596f750d..00000000000000 --- a/files/de/web/css/background-image/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/background-origin/index.html b/files/de/web/css/background-origin/index.html deleted file mode 100644 index a94465bdd7d096..00000000000000 --- a/files/de/web/css/background-origin/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/background-position/index.html b/files/de/web/css/background-position/index.html deleted file mode 100644 index 7c0d6659135305..00000000000000 --- a/files/de/web/css/background-position/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/background-repeat/index.html b/files/de/web/css/background-repeat/index.html deleted file mode 100644 index e28b7a68e71cc9..00000000000000 --- a/files/de/web/css/background-repeat/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -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.mozilla.org/static/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

- - diff --git a/files/de/web/css/background-size/index.html b/files/de/web/css/background-size/index.html deleted file mode 100644 index 2bca19b8d06494..00000000000000 --- a/files/de/web/css/background-size/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -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 deleted file mode 100644 index 9d6a44f24451d9..00000000000000 --- a/files/de/web/css/background/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -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 deleted file mode 100644 index 154d9dc911b1fa..00000000000000 --- a/files/de/web/css/basic-shape/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -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/border-bottom-color/index.html b/files/de/web/css/border-bottom-color/index.html deleted file mode 100644 index 64256988c0cb49..00000000000000 --- a/files/de/web/css/border-bottom-color/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 deleted file mode 100644 index c5ed3e4f56d25f..00000000000000 --- a/files/de/web/css/border-bottom-left-radius/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

- -{{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 deleted file mode 100644 index 4e5745f32a91e9..00000000000000 --- a/files/de/web/css/border-bottom-right-radius/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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 deleted file mode 100644 index bfd0ec42490480..00000000000000 --- a/files/de/web/css/border-bottom-style/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 deleted file mode 100644 index 6f67816001686c..00000000000000 --- a/files/de/web/css/border-bottom-width/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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 deleted file mode 100644 index f5924c0a512405..00000000000000 --- a/files/de/web/css/border-bottom/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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 deleted file mode 100644 index 182d1fc38c4d0e..00000000000000 --- a/files/de/web/css/border-collapse/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -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 deleted file mode 100644 index f2f1ed34e53e2d..00000000000000 --- a/files/de/web/css/border-color/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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 deleted file mode 100644 index e10b0de8ee5372..00000000000000 --- a/files/de/web/css/border-image-outset/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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 deleted file mode 100644 index 2810fce31df98c..00000000000000 --- a/files/de/web/css/border-image-repeat/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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 deleted file mode 100644 index cfe5959b58249a..00000000000000 --- a/files/de/web/css/border-image-slice/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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 deleted file mode 100644 index 31319da15467a2..00000000000000 --- a/files/de/web/css/border-image-source/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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 deleted file mode 100644 index 050f9f8860f17a..00000000000000 --- a/files/de/web/css/border-image-width/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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 deleted file mode 100644 index 662a2bcab55c85..00000000000000 --- a/files/de/web/css/border-image/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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 deleted file mode 100644 index a449d91d7e63a1..00000000000000 --- a/files/de/web/css/border-left-color/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-left-style/index.html b/files/de/web/css/border-left-style/index.html deleted file mode 100644 index 4e6ef82b9a090a..00000000000000 --- a/files/de/web/css/border-left-style/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-left-width/index.html b/files/de/web/css/border-left-width/index.html deleted file mode 100644 index 5ba450310b2d30..00000000000000 --- a/files/de/web/css/border-left-width/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-left/index.html b/files/de/web/css/border-left/index.html deleted file mode 100644 index 13661b71a9a2c4..00000000000000 --- a/files/de/web/css/border-left/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-radius/index.html b/files/de/web/css/border-radius/index.html deleted file mode 100644 index 026a92c0206f9d..00000000000000 --- a/files/de/web/css/border-radius/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -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;
-
- -
-           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 deleted file mode 100644 index bda0b5d2e59a10..00000000000000 --- a/files/de/web/css/border-right-color/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-right-style/index.html b/files/de/web/css/border-right-style/index.html deleted file mode 100644 index 26ac8fc450677c..00000000000000 --- a/files/de/web/css/border-right-style/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-right-width/index.html b/files/de/web/css/border-right-width/index.html deleted file mode 100644 index f0616774ee2a21..00000000000000 --- a/files/de/web/css/border-right-width/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-right/index.html b/files/de/web/css/border-right/index.html deleted file mode 100644 index a74e101a51e80c..00000000000000 --- a/files/de/web/css/border-right/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-spacing/index.html b/files/de/web/css/border-spacing/index.html deleted file mode 100644 index 6b0e61ec01829d..00000000000000 --- a/files/de/web/css/border-spacing/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/border-style/index.html b/files/de/web/css/border-style/index.html deleted file mode 100644 index 9dc43b2ed6adde..00000000000000 --- a/files/de/web/css/border-style/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -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 deleted file mode 100644 index 1969c0f5b12670..00000000000000 --- a/files/de/web/css/border-top-color/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-top-left-radius/index.html b/files/de/web/css/border-top-left-radius/index.html deleted file mode 100644 index f6aa912d963bda..00000000000000 --- a/files/de/web/css/border-top-left-radius/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/border-top-right-radius/index.html b/files/de/web/css/border-top-right-radius/index.html deleted file mode 100644 index 6a1b341905ba11..00000000000000 --- a/files/de/web/css/border-top-right-radius/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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

- -{{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 deleted file mode 100644 index 623473ee98c403..00000000000000 --- a/files/de/web/css/border-top-style/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-top-width/index.html b/files/de/web/css/border-top-width/index.html deleted file mode 100644 index 5b911df733c0b2..00000000000000 --- a/files/de/web/css/border-top-width/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-top/index.html b/files/de/web/css/border-top/index.html deleted file mode 100644 index 13b6f27dc33642..00000000000000 --- a/files/de/web/css/border-top/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border-width/index.html b/files/de/web/css/border-width/index.html deleted file mode 100644 index d4be72a3336aac..00000000000000 --- a/files/de/web/css/border-width/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/border/index.html b/files/de/web/css/border/index.html deleted file mode 100644 index f8bef148c55171..00000000000000 --- a/files/de/web/css/border/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 deleted file mode 100644 index 6caee7fe4085be..00000000000000 --- a/files/de/web/css/bottom/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/box-flex/index.html b/files/de/web/css/box-flex/index.html deleted file mode 100644 index f59b883b61ff98..00000000000000 --- a/files/de/web/css/box-flex/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: '-moz-box-flex' -slug: Web/CSS/box-flex -tags: - - CSS - - CSS Referenz - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - Non-standard -translation_of: Web/CSS/box-flex -original_slug: Web/CSS/-moz-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/box-ordinal-group/index.html b/files/de/web/css/box-ordinal-group/index.html deleted file mode 100644 index bd5b0ce7b93f3c..00000000000000 --- a/files/de/web/css/box-ordinal-group/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/box-ordinal-group -tags: - - CSS - - CSS Referenz - - CSS:Mozilla Erweiterungen - - Flexible Box - - Non-standard -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group -original_slug: Web/CSS/-moz-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/box-pack/index.html b/files/de/web/css/box-pack/index.html deleted file mode 100644 index d65e4664016325..00000000000000 --- a/files/de/web/css/box-pack/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: '-moz-box-pack' -slug: Web/CSS/box-pack -tags: - - CSS - - CSS Eigenschaft - - CSS Referenz - - Layout - - Non-standard -translation_of: Web/CSS/box-pack -original_slug: Web/CSS/-moz-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/box-shadow/index.html b/files/de/web/css/box-shadow/index.html deleted file mode 100644 index fa45083bd18218..00000000000000 --- a/files/de/web/css/box-shadow/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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 deleted file mode 100644 index 8a6f5403c20cbe..00000000000000 --- a/files/de/web/css/box-sizing/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -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 deleted file mode 100644 index 408373f0aab6c9..00000000000000 --- a/files/de/web/css/break-after/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -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 deleted file mode 100644 index 0d281c67615b90..00000000000000 --- a/files/de/web/css/break-inside/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -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 deleted file mode 100644 index 975bd9c726d0be..00000000000000 --- a/files/de/web/css/calc/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc -tags: - - CSS - - CSS Funktion - - Referenz -translation_of: Web/CSS/calc() -original_slug: 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 deleted file mode 100644 index b27afeb602a2b0..00000000000000 --- a/files/de/web/css/caption-side/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -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/child_combinator/index.html b/files/de/web/css/child_combinator/index.html deleted file mode 100644 index 2065004ea8400f..00000000000000 --- a/files/de/web/css/child_combinator/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Kindselektoren -slug: Web/CSS/Child_combinator -tags: - - CSS - - CSS Referenz - - Einsteiger - - NeedsMobileBrowserCompatibility - - Selektoren -translation_of: Web/CSS/Child_combinator -original_slug: Web/CSS/Kindselektoren ---- -
{{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/class_selectors/index.html b/files/de/web/css/class_selectors/index.html deleted file mode 100644 index 4181120dd0307e..00000000000000 --- a/files/de/web/css/class_selectors/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Klassenselektoren -slug: Web/CSS/Class_selectors -tags: - - CSS - - CSS Referenz - - Einsteiger - - Selektoren -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Klassenselektoren ---- -
{{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/clear/index.html b/files/de/web/css/clear/index.html deleted file mode 100644 index 0679e4def34a2f..00000000000000 --- a/files/de/web/css/clear/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -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 deleted file mode 100644 index 521da403a2b54f..00000000000000 --- a/files/de/web/css/clip-path/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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 deleted file mode 100644 index d3f93e6b34d0df..00000000000000 --- a/files/de/web/css/clip/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -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 deleted file mode 100644 index 48583a1ac48b28..00000000000000 --- a/files/de/web/css/color/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -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/color_value/index.html b/files/de/web/css/color_value/index.html deleted file mode 100644 index edf34b4988ac2a..00000000000000 --- a/files/de/web/css/color_value/index.html +++ /dev/null @@ -1,1286 +0,0 @@ ---- -title: -slug: Web/CSS/color_value -tags: - - CSS - - CSS Datentyp - - Layout - - NeedsLiveSample - - NeedsMobileBrowserCompatibility - - Referenz - - Web -translation_of: Web/CSS/color_value -original_slug: Web/CSS/Farben ---- -
{{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/column-count/index.html b/files/de/web/css/column-count/index.html deleted file mode 100644 index 432a69ce97bdf7..00000000000000 --- a/files/de/web/css/column-count/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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

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

- -{{Compat}} diff --git a/files/de/web/css/column-fill/index.html b/files/de/web/css/column-fill/index.html deleted file mode 100644 index 3750096c9f459e..00000000000000 --- a/files/de/web/css/column-fill/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 deleted file mode 100644 index 7043b904bec1e1..00000000000000 --- a/files/de/web/css/column-gap/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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 deleted file mode 100644 index 4362ab902bdbb0..00000000000000 --- a/files/de/web/css/column-rule-color/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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

- -{{csssyntax("/de/docs/Web/CSS/Wertdefinitionssyntax")}} - -
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 deleted file mode 100644 index 7e5fa50cb6b901..00000000000000 --- a/files/de/web/css/column-rule-style/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -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

- -{{csssyntax("/de/docs/Web/CSS/Wertdefinitionssyntax")}} - -
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 deleted file mode 100644 index ea0eb68f738737..00000000000000 --- a/files/de/web/css/column-rule-width/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 deleted file mode 100644 index 05183e00b8a18c..00000000000000 --- a/files/de/web/css/column-rule/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 deleted file mode 100644 index 6be446711439b3..00000000000000 --- a/files/de/web/css/column-span/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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 deleted file mode 100644 index e3335bbfd1b62f..00000000000000 --- a/files/de/web/css/column-width/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 deleted file mode 100644 index 7ca24b7b500d54..00000000000000 --- a/files/de/web/css/columns/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -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/compositing_and_blending/index.html b/files/de/web/css/compositing_and_blending/index.html deleted file mode 100644 index 47edc11c2a559f..00000000000000 --- a/files/de/web/css/compositing_and_blending/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: CSS Compositing and Blending -slug: Web/CSS/Compositing_and_Blending -tags: - - CSS - - CSS Compositing and Blending - - CSS Referenz - - Übersicht -translation_of: Web/CSS/Compositing_and_Blending -translation_of_original: Web/CSS/CSS_Compositing_and_Blending -original_slug: Web/CSS/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

- -{{Compat}} diff --git a/files/de/web/css/computed_value/index.html b/files/de/web/css/computed_value/index.html deleted file mode 100644 index f4fa1449e2c7ed..00000000000000 --- a/files/de/web/css/computed_value/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Berechneter Wert -slug: Web/CSS/computed_value -tags: - - CSS - - Guide - - Web -translation_of: Web/CSS/computed_value -original_slug: Web/CSS/berechneter_Wert ---- -
- {{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/content/index.html b/files/de/web/css/content/index.html deleted file mode 100644 index b64e1be6cbf001..00000000000000 --- a/files/de/web/css/content/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -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

- -{{csssyntax("/en-US/docs/CSS/Value_definition_syntax")}} - -
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 deleted file mode 100644 index 2e3f751de0b8e7..00000000000000 --- a/files/de/web/css/counter-increment/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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 deleted file mode 100644 index d126e606ed71ca..00000000000000 --- a/files/de/web/css/counter-reset/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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/index.html b/files/de/web/css/css_animations/index.html deleted file mode 100644 index 35df3692b43497..00000000000000 --- a/files/de/web/css/css_animations/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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_animations/using_css_animations/index.html b/files/de/web/css/css_animations/using_css_animations/index.html deleted file mode 100644 index e5612dd07ebc77..00000000000000 --- a/files/de/web/css/css_animations/using_css_animations/index.html +++ /dev/null @@ -1,365 +0,0 @@ ---- -title: CSS Animationen nutzen -slug: Web/CSS/CSS_Animations/Using_CSS_animations -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations -original_slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen ---- -

{{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 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_backgrounds_and_borders/border-image_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html deleted file mode 100644 index 639328b2c01686..00000000000000 --- a/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html +++ /dev/null @@ -1,2627 +0,0 @@ ---- -title: Border-image Generator -slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator -tags: - - CSS - - Werkzeuge -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.

- - - -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html deleted file mode 100644 index 7de67b4e24fc05..00000000000000 --- a/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html +++ /dev/null @@ -1,1601 +0,0 @@ ---- -title: Border-radius Generator -slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator -tags: - - CSS - - Werkzeuge -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.

- - - -

{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}

diff --git a/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 1e884038a38445..00000000000000 --- a/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2885 +0,0 @@ ---- -title: Box-shadow Generator -slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -tags: - - CSS3 - - Werkzeuge - - box-shadow -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: 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.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

diff --git a/files/de/web/css/css_backgrounds_and_borders/index.html b/files/de/web/css/css_backgrounds_and_borders/index.html deleted file mode 100644 index 497ee1f6349c09..00000000000000 --- a/files/de/web/css/css_backgrounds_and_borders/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Backgrounds_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders -original_slug: Web/CSS/CSS_Background_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

- -{{Compat}} diff --git a/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html deleted file mode 100644 index 50794e443094ae..00000000000000 --- a/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Hintergrundbilder skalieren -slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -tags: - - CSS Hintergrundbild - - Skalierung Hintergrundbild -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images -original_slug: Web/Guide/CSS/Scaling_background_images ---- -

Die {{ cssxref("background-size") }} CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.Man kann das Bild nach Wunsch nach oben oder unten skalieren.

- -

Kacheln eines großen Bildes

- -

Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:

- -

- -

Das wird erreicht, indem wir folgendes CSS verwenden:

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(firefox_logo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

Man braucht für {{ cssxref("background-size") }} kein Präfix mehr zu setzen, jedoch können Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.

- -

Dehnen eines Bildes

- -

Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:

- -
background-size: 300px 150px;
-
- -

So sieht das Ergebnis aus:

- -

- -

Hochskalieren eines Bildes

- -

Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:

- -

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.

- -

Spezielle Werte: "contain" und "cover"

- -

Neben den {{cssxref("<length>")}} Werten, bietet die {{ cssxref("background-size") }} CSS Eigenschaft zwei spezielle Werte für Größen, contain und cover. Sehen wir uns diese an.

- -

contain

- -

Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B. Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.

- -

{{ EmbedLiveSample("contain", "100%", "220") }}

- -
<div class="bgSizeContain">
-  <p>Try resizing this window and see what happens.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist.

- -
{{ EmbedLiveSample("cover", "100%", "220") }}
- -

Das Beispiel verwendet folgendes HTML & CSS:

- -
<div class="bgSizeCover">
-  <p>Try resizing this window and see what happens.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Siehe auch

- -
    -
  • {{ cssxref("background-size") }}
    • -
  • {{ cssxref("background") }}
    • -
diff --git a/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 8b8c8df3afafeb..00000000000000 --- a/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Mehrere Hintergründe in CSS verwenden -slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - Beispiel - - CSS - - CSS Hintergrund - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -original_slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden ---- -

{{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 deleted file mode 100644 index 29aec1474ccc98..00000000000000 --- a/files/de/web/css/css_basic_user_interface/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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_box_model/index.html b/files/de/web/css/css_box_model/index.html deleted file mode 100644 index 79a9866a0298c0..00000000000000 --- a/files/de/web/css/css_box_model/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Boxmodell -slug: Web/CSS/CSS_Box_Model -tags: - - CSS - - CSS Boxmodell - - CSS Referenz - - Übersicht -translation_of: Web/CSS/CSS_Box_Model -original_slug: Web/CSS/CSS_Boxmodell ---- -
{{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

- -{{Compat}} diff --git a/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index 666e47bc8f7ce0..00000000000000 --- a/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Boxmodell -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell ---- -

{{ 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_box_model/mastering_margin_collapsing/index.html b/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html deleted file mode 100644 index f4deff178fca02..00000000000000 --- a/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Zusammenfallen von Außenabständen meistern -slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -tags: - - CSS - - CSS Boxmodell - - Referenz -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -original_slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern ---- -
{{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 deleted file mode 100644 index 1b12d996a68bf2..00000000000000 --- a/files/de/web/css/css_charsets/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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/color_picker_tool/index.html b/files/de/web/css/css_colors/color_picker_tool/index.html deleted file mode 100644 index 7a1c347eb8f35b..00000000000000 --- a/files/de/web/css/css_colors/color_picker_tool/index.html +++ /dev/null @@ -1,3226 +0,0 @@ ---- -title: Farbauswahl-Werkzeug -slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - Farbauswahl - - Farbe - - Hilfsmittel - - Pipette - - Werkzeug -translation_of: Web/CSS/CSS_Colors/Color_picker_tool -original_slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug ---- - - - -

{{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 deleted file mode 100644 index fece15eae7f854..00000000000000 --- a/files/de/web/css/css_colors/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Farben -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Farben - - Referenz - - Übersicht -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors -original_slug: 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

- -{{Compat}} - -

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 deleted file mode 100644 index f637773da445f6..00000000000000 --- a/files/de/web/css/css_columns/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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_columns/using_multi-column_layouts/index.html b/files/de/web/css/css_columns/using_multi-column_layouts/index.html deleted file mode 100644 index f911c8b2ea4df1..00000000000000 --- a/files/de/web/css/css_columns/using_multi-column_layouts/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: CSS3 Spalten -slug: Web/CSS/CSS_Columns/Using_multi-column_layouts -tags: - - CSS - - CSS3 -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts -original_slug: CSS3_Columns ---- -

Viele Benutzer haben Schwierigkeiten Texte zu lesen, wenn die Zeilen sehr lang sind. Es dauert dann zu lange für das Auge vom Ende der Zeile zum Anfang einer Neuen zu springen. Sie verrutschen unter Umständen in der Zeile und der Lesefluss wird unterbrochen. Um dennoch das Maximum an Bildfläche von großen Bildschirmen zu nutzen, sollten Autoren eine begrenzte Spaltenbreite verwenden, die den Text dann nebeneinander platziert (vergleichbar mit dem Spaltensatz in Zeitungen). Unglücklicherweise ist es mittels HTML und CSS 2.1 nicht möglich Spaltenumbrüche festzulegen, ohne dass diese an festen Positionen gebunden sind. Das erlaubte Markup im Text muss stark eingeschränkt werden oder die Spalten müssen durch die Verwendung von Scripts erstellt werden.

-

Die CSS3 Multi-column Spezifikation schlägt einige neue CSS Eigenschaften vor, die diese Funktionen mittels CSS ermöglichen. In Firefox 1.5 und später wurde ein Teil dieser Eigenschaften implementiert, um das Verhalten, so wie es in der Spezifikation beschrieben ist (mit einer Ausnahme; siehe unten), zu realisieren.

-

In Robert O'Callahans Blog kann man den Einsatz von CSS Columns mit einem Firefox 1.5 oder später betrachten.

-

Verwendung von Spalten

-

Spaltenanzahl und -breite

-

Zwei CSS Eigenschaften steuern, ob und wie viele Spalten erscheinen werden: -moz-column-count und -moz-column-width.

-

-moz-column-count legt die Anzahl an Spalten auf eine bestimmte Zahl fest, z.B.:

-
<div style="-moz-column-count:2">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
-wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
-Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
-da dieser am Donnerstag released werden soll.</div>
-

Dieser Codeschnipsel wird den Inhalt in zwei Spalten anzeigen (funktioniert nur unter Firefox 1.5 oder höher):

-
- In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.
-

-

-moz-column-width legt die minimal erwünschte Spaltenbreite fest.
- Wenn -moz-column-count nicht ebenfalls festgelegt wurde, wird der Browser automatisch so viele Spalten erstellen, wie in die verfügbare Breite passen.

-
<div style="-moz-column-width:20em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
-wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
-Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
-da dieser am Donnerstag released werden soll.</div>
-

Wird so angezeigt:

-
- In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.
-

-

Die genauen Details dazu sind in der CSS3 Spezifikation beschrieben.

-

In einem mehrspaltigen Block, wird der Inhalt (wenn nötig) automatisch von der einen in die nächste Spalte transportiert. Alle HTML, CSS und DOM Funktionen werden innerhalb von Spalten unterstützt, auch beim Bearbeiten und Drucken des Textes.

-

Höhenausgleich

-

In der CSS3 Spezifikation ist festgelegt, dass sich die Spaltenhöhen ausgleichen müssen: Das bedeutet, dass der Browser die maximale Höhe automatisch festlegt, sodass die Höhe jeder Spalte ungefähr gleich sind. Firefox macht genau das.

-

Es ist jedoch in einigen Situationen nützlich eine maximale Höhe der Spalten explizit festzulegen, den Inhalt in die erste Spalte zu legen und dann soviele Spalten wie nötig zu erstellen, die sich nach rechts austrecken. Daher wurde das Spaltenmodel erweitert. Wenn die height Eigenschaft in einem mehrspaltigen Block festgelegt wurde, kann jede Spalte nur so hoch wie diese Höhenangabe werden und nicht größer, bevor dann eine neue Spalte hinzugefügt wird. Dieser Modus ist effizienter für das Layout.

-

Spaltenlücken

-

Seit Firefox 3 gibt es standardmäßig eine Lücke von 1em zwischen den einzelnen Spalten (vorher war jede Spalte direkt neben der nächsten Spalte).
- Es ist einfach das Standardverhalten zu ändern, in dem man die -moz-column-gap Eigenschaft einsetzt:

-
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
-wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
-Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
-da dieser am Donnerstag released werden soll.</div>
-
- In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.
-

-

Graceful Degradation (Abwärtskompatibilität und Fehlertoleranz)

-

Die -moz-column Eigenschaft wird von Browsern, die Spalten nicht unterstützen, einfach ignoriert. Daher ist es relativ einfach ein Layout zu erstellen, dass den Inhalt in diesen Browsern in einer einzigen Spalte anzeigt, während in Firefox 1.5 und später mehrere Spalten angezeigt werden.

-

Fazit

-

CSS3 Spalten bieten eine neue Möglichkeit für Webentwickler das Beste aus der Bildfläche herauszuholen. Fantasievolle Entwickler finden vielleicht weitere Verwendungsmöglichkeiten, bei denen die Funktion des automatischen Höhenausgleichs zum Einsatz kommen könnte.

-

Siehe auch

- -

Zusätzliche Referenzen

- diff --git a/files/de/web/css/css_conditional_rules/index.html b/files/de/web/css/css_conditional_rules/index.html deleted file mode 100644 index e2868ab8b8e9ca..00000000000000 --- a/files/de/web/css/css_conditional_rules/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_counter_styles/using_css_counters/index.html b/files/de/web/css/css_counter_styles/using_css_counters/index.html deleted file mode 100644 index 7e2f073ae873eb..00000000000000 --- a/files/de/web/css/css_counter_styles/using_css_counters/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: CSS Zähler verwenden -slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters -tags: - - Anleitung - - CSS - - CSS Listen - - CSS Wert - - Fortgeschrittene - - Layout - - Referenz - - Web -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: 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_device_adaptation/index.html b/files/de/web/css/css_device_adaptation/index.html deleted file mode 100644 index fac857cb4bad5c..00000000000000 --- a/files/de/web/css/css_device_adaptation/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 027513b95e5817..00000000000000 --- a/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -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/basic_concepts_of_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index 4496344baf5163..00000000000000 --- a/files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Grundlegende Konzepte der Flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_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 deleted file mode 100644 index 7a4b756f1024fe..00000000000000 --- a/files/de/web/css/css_flexible_box_layout/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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

- -{{Compat}} - -

diff --git a/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html deleted file mode 100644 index ec93ce5dd00285..00000000000000 --- a/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Flex Elemente Sortieren -slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items -tags: - - Barrierefreiheit - - CSS - - Flex - - Reihenfolge - - Richtung - - flexbox - - umgekehrt -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren ---- -

{{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_fonts/index.html b/files/de/web/css/css_fonts/index.html deleted file mode 100644 index eeb10e730dd1f5..00000000000000 --- a/files/de/web/css/css_fonts/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_functions/index.html b/files/de/web/css/css_functions/index.html deleted file mode 100644 index 648c96c2c0bf2c..00000000000000 --- a/files/de/web/css/css_functions/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: CSS Funktionsnotation -slug: Web/CSS/CSS_Functions -tags: - - CSS - - CSS Datentypen - - CSS Funktion - - Funktionen - - Funktionsnotation - - Referenz - - Typen - - datentpen -translation_of: Web/CSS/CSS_Functions ---- -
{{CSSRef}}
- -

Die CSS-Funktionsnotation ist ein Typ von CSS-Werten, der komplexere Datentypen darstellen oder spezielle Datenverarbeitungen oder Berechnungen aufrufen kann.

- -

Syntax

- -
selector {
-  property: functional-notation( [argument]? [, argument]! );
-}
- -

Die Syntax beginnt mit dem Namen der funktionalen Notation, gefolgt von einer linken Klammer (. Als Nächstes folgen das/die Notationsargument(e), und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

- -

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern sind sie optional. In einigen Funktionsnotationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.

- -

Index

- -

Zu den funktionalen Notationen, die durch eine Reihe von CSS-Spezifikationen definiert sind, gehören die folgenden:

- -
A - -
    -
  • {{CSSxRef("abs", "abs()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("acos", "acos()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)
    • -
  • {{CSSxRef("asin", "asin()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("atan", "atan()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("atan2", "atan2()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("attr")}}
    • -
-B - -
    -
  • {{CSSxRef("filter-function/blur", "blur()")}} (filter)
    • -
  • {{CSSxRef("filter-function/brightness", "brightness()")}} (filter)
    • -
-C - -
    -
  • {{CSSxRef("calc")}} (math)
    • -
  • {{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)
    • -
  • {{CSSxRef("circle", "circle()")}} (shape)
    • -
  • {{CSSxRef("clamp")}} (math)
    • -
  • {{CSSxRef("color()")}} (colors) {{Experimental_Inline}}
    • -
  • {{CSSxRef("conic-gradient")}}
    • -
  • {{CSSxRef("cos", "cos()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("counter")}}
    • -
  • {{CSSxRef("counters")}}
    • -
  • {{CSSxRef("filter-function/contrast", "contrast()")}} (filter)
    • -
  • {{CSSxRef("cross-fade")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("cubic-bezier", "cubic-bezier()")}}
    • -
-D - -
    -
  • {{CSSxRef("device-cmyk", "device-cmyk()")}} (colors) {{Experimental_Inline}}
    • -
  • {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)
    • -
-E - -
    -
  • {{CSSxRef("element")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("env")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("ellipse", "ellipse()")}} (shape)
    • -
  • {{CSSxRef("exp", "exp()")}} (math) {{Experimental_Inline}}
    • -
-F - -
    -
  • {{CSSxRef("fit-content()", "fit-content()")}}
    • -
  • {{CSSxRef("format", "format()")}}
    • -
-G - -
    -
  • {{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)
    • -
-H - -
    -
  • {{CSSxRef("hsl", "hsl()")}} (colors)
    • -
  • {{CSSxRef("hsla", "hsla()")}} (colors)
    • -
  • {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)
    • -
  • {{CSSxRef("hwb", "hwb()")}} (colors) {{Experimental_Inline}}
    • -
  • {{CSSxRef("hypot", "hypot()")}} (math) {{Experimental_Inline}}
    • -
-I - -
    -
  • {{CSSxRef("imagefunction", "image()")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("image-set")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("inset()")}} (shape)
    • -
  • {{CSSxRef("filter-function/invert", "invert()")}} (filter)
    • -
-L - -
    -
  • {{CSSxRef("lab", "lab()")}} (colors) {{Experimental_Inline}}
    • -
  • {{CSSxRef("lch", "lch()")}} (colors) {{Experimental_Inline}}
    • -
  • {{CSSxRef("leader", "leader()")}}
    • -
  • {{CSSxRef("linear-gradient")}}
    • -
  • {{CSSxRef("local", "local()")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("log", "log()")}} (math) {{Experimental_Inline}}
    • -
-M - -
    -
  • {{CSSxRef("transform-function/matrix", "matrix()")}} (transform)
    • -
  • {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)
    • -
  • {{CSSxRef("max")}} (math)
    • -
  • {{CSSxRef("min")}} (math)
    • -
  • {{CSSxRef("minmax")}} (math)
    • -
  • {{CSSxRef("mod", "mod()")}} (math) {{Experimental_Inline}}
    • -
-O - -
    -
  • {{CSSxRef("filter-function/opacity", "opacity()")}} (filter)
    • -
  • {{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)
    • -
-P - -
    -
  • {{CSSxRef("paint")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("path()", "path()")}} (shape)
    • -
  • {{CSSxRef("transform-function/perspective", "perspective()")}} (transform)
    • -
  • {{CSSxRef("polygon", "polygon()")}} (shape)
    • -
  • {{CSSxRef("pow", "pow()")}} (math) {{Experimental_Inline}}
    • -
-R - -
    -
  • {{CSSxRef("radial-gradient")}}
    • -
  • {{CSSxRef("rem", "rem()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("repeat")}}
    • -
  • {{CSSxRef("repeating-linear-gradient")}}
    • -
  • {{CSSxRef("repeating-radial-gradient")}}
    • -
  • {{CSSxRef("repeating-conic-gradient")}}
    • -
  • rgb() (colors)
    • -
  • rgba() (colors)
    • -
  • {{CSSxRef("transform-function/rotate", "rotate()")}} (transform)
    • -
  • {{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)
    • -
  • {{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)
    • -
  • {{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)
    • -
  • {{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)
    • -
  • {{CSSxRef("round", "round()")}} (math) {{Experimental_Inline}}
    • -
-S - -
    -
  • {{CSSxRef("filter-function/saturate", "saturate()")}} (filter)
    • -
  • {{CSSxRef("transform-function/scale", "scale()")}} (transform)
    • -
  • {{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)
    • -
  • {{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)
    • -
  • {{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)
    • -
  • {{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)
    • -
  • {{CSSxRef("filter-function/sepia", "sepia()")}} (filter)
    • -
  • {{CSSxRef("sign", "sign()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("sin", "sin()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("transform-function/skew", "skew()")}} (transform)
    • -
  • {{CSSxRef("transform-function/skewX", "skewX()")}} (transform)
    • -
  • {{CSSxRef("transform-function/skewY", "skewY()")}} (transform)
    • -
  • {{CSSxRef("sqrt", "sqrt()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("steps", "steps()")}}
    • -
  • {{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)
    • -
  • {{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)
    • -
  • {{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)
    • -
  • {{CSSxRef("symbols", "symbols()")}}
    • -
-T - -
    -
  • {{CSSxRef("tan", "tan()")}} (math) {{Experimental_Inline}}
    • -
  • {{CSSxRef("target-counter", "target-counter()")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("target-counters", "target-counters()")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("target-text", "target-text()")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("toggle", "toggle()")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("transform-function/translate", "translate()")}} (transform)
    • -
  • {{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)
    • -
  • {{CSSxRef("transform-function/translateX", "translateX()")}} (transform)
    • -
  • {{CSSxRef("transform-function/translateY", "translateY()")}} (transform)
    • -
  • {{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)
    • -
-U - -
    -
  • {{CSSxRef("url()", "url()")}}
    • -
-V - -
    -
  • {{CSSxRef("var")}}
    • -
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Hinzugefügte Funktionsnotation toggle(), attr(), calc(), min(), max(), clamp(), round(), mod(), rem(), mod(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() und sign().
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Fügt die Funktionsnotation calc() zu.
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Fügt kommmalose Syntaxen für die funktionale Notation rgb(), rgba(), hsl(), und hsla() hinzu.
- Erlaubt Alpha-Werte in rgb() und hsl(), und macht rgba() und hsla() into (deprecated) zu (veralteten) Aliasen für diese.
- Fügt die Funktionen hwb(), device-cmyk() und color() hinzu.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Fügt rgba(), hsl(), hsla() als funktionale Notation hinzu.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}Fügt element(), image(), image-set() und conic-gradient() als Funktionsnotation hinzu.
- -

Siehe auch

- - diff --git a/files/de/web/css/css_generated_content/index.html b/files/de/web/css/css_generated_content/index.html deleted file mode 100644 index 2e52a1145f9731..00000000000000 --- a/files/de/web/css/css_generated_content/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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 deleted file mode 100644 index ef1535ffb47e5e..00000000000000 --- a/files/de/web/css/css_grid_layout/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -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 deleted file mode 100644 index 5551a4a59e2850..00000000000000 --- a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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 deleted file mode 100644 index fda424229e9a9d..00000000000000 --- a/files/de/web/css/css_images/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_images/using_css_gradients/index.html b/files/de/web/css/css_images/using_css_gradients/index.html deleted file mode 100644 index 04639bad35f39f..00000000000000 --- a/files/de/web/css/css_images/using_css_gradients/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: Verwendung von CSS Farbverläufen -slug: Web/CSS/CSS_Images/Using_CSS_gradients -tags: - - Beispiel - - CSS - - CSS Bild - - Guide - - NeedsLiveSample - - NeedsUpdate - - Web - - erweitert -translation_of: Web/CSS/CSS_Images/Using_CSS_gradients -original_slug: Farbverläufe_in_CSS ---- -

CSS Farbverläufe sind neue Typen von {{cssxref("<image>")}}, die durch das CSS3 Image Module hinzugefügt wurden. Die Verwendung von CSS Farbverläufen erlaubt es, weiche Übergänge zwischen zwei oder mehr angegebenen Farben anzuzeigen. Dies ermöglicht es, Bilder für diese Effekte zu vermeiden, was Downloadzeit und Bandbreitennutzung verringert. Darüber hinaus sehen Objekte besser aus, wenn sie herangezoomt werden, da der Farbverlauf durch den Browser erzeugt wird, sodass das Layout viel flexibler gestaltet werden kann.

- -

Browser unterstützen zwei Arten von Verläufen: lineare, definiert durch die {{cssxref("linear-gradient")}} Funktion, und radiale, definiert durch {{cssxref("radial-gradient")}}.

- -

Lineare Farbverläufe

- -

Um einen linearen Farbverlauf zu erstellen, wird ein Startpunkt gesetzt und eine Richtung (als Winkel), entlang welcher der Verlaufseffekt angewendet wird. Es werden auch Farbstopps definiert. Farbstopps sind die Farben, zwischen denen Gecko weiche Übergänge darstellen soll. Es müssen mindestens zwei angegeben werden, es können jedoch auch mehrere definiert werden, um komplexere Verlaufseffekte zu erzeugen.

- -

Einfache lineare Farbverläufe

- -

Hier ist ein linearer Farbverlauf, der in der Mitte (horizontal) oben (vertikal) mit blau beginnt und in weiß übergeht.

- - - - - - - - - - - - -
ScreenshotLivedemo
-
-
- -
-
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
-background: -prefix-linear-gradient(top, blue, white);
-
-/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
-   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
-background: linear-gradient(to bottom, blue, white);
-
-
- -

(Siehe die Browser Kompatibilitätstabelle für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).

- -

Der gleiche Farbverlauf wird geändert, sodass er von links nach rechts verläuft:

- - - - - - - - - - - - -
ScreenshotLivedemo
basic_linear_blueleft.png -
-
- -
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
-background: -prefix-linear-gradient(left, blue, white);
-
-/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
-   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
-background: linear-gradient(to right, blue, white);
- -

(Siehe die Browser Kompatibilitätstabelle für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).

- -

Der Verlauf kann diagonal gestaltet werden, indem die horizontale und vertikale Startposition definiert wird. Zum Beispiel:

- - - - - - - - - - - - -
ScreenshotLivedemo
basic_linear_bluetopleft.png -
-
- -
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
-background: -prefix-linear-gradient(left top, blue, white);
-
-/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
-   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
-background: linear-gradient(to bottom right, blue, white);
-
- -

Verwendung von Winkeln

- -

Falls kein Winkel angegeben wird, wird er automatisch durch die angegebene Richtung bestimmt. Falls mehr Kontrolle über die Richtung des Verlaufs erwünscht ist, kann der Winkel explizit angegeben werden.

- -

Als Beispiel sind hier zwei Verläufe, der erste mit einer Richtung nach rechts und der zweite mit einem Winkel von 70 Grad.

- -

linear_gradient_angle.png

- -

Der rechte verwendet CSS wie folgt:

- -
background: linear-gradient(70deg, black, white);
-
- -

Der Winkel wird angegeben als ein Winkel zwischen horizontaler Linie und der Verlaufslinie gegen den Uhrzeigersinn. Mit anderen Worten, 0deg erzeugt einen vertikalen Farbverlauf von unten nach oben, während 90deg einen horizontalen Verlauf von links nach rechts erzeugt:

- -

linear_redangles.png

- -
background: linear-gradient(<angle>, red, white);
-
- -
-

Hinweis: Mehrere Browser implementieren (mit Präfix) einen älteren Entwurf der Spezifikation, wo 0deg nach rechts anstatt nach oben zeigte. Daher sollte auf den Wert des Winkels geachtet werden, wenn der standardisierte linear-gradient und der mit Präfix versehene gemischt verwendet werden. Eine einfache Formel hierfür ist 90 - x = y, wobei x die Standardverwendung und y die nicht standardisierte, mit Herstellerpräfix versehene Verwendung ist.

-
- -

Farbstopps

- -

Farbstopps sind Punkte entlang der Verlaufslinie, die eine bestimmte Farbe an dieser Position angeben. Die Position kann entweder als ein Prozentwert der Länge der Linie oder als absolute Länge angegeben werden. Es können beliebig viele Farbstopps definiert werden, um den gewünschten Effekt zu erzielen.

- -

Falls die Position als Prozentwert angegeben wird, repräsentiert 0% den Startpunkt und 100% den Endpunkt; jedoch können auch Werte außerhalb dieses Bereichs verwendet werden, falls nötig, um den gewünschten Effekt zu erhalten.

- -

Beispiel: Drei Farbstopps

- -

Dieses Beispiel definiert drei Farbstopps:

- - - - - - - - - - - - -
ScreenshotLivedemo
linear_colorstops1.png -
-
- -
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
-background: -prefix-linear-gradient(top, blue, white 80%, orange);
-
-/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
-   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
-background: linear-gradient(to bottom, blue, white 80%, orange);
-
- -

Beachte, dass der erste und letzte Farbstopp keine Position definieren; daher werden ihnen automatisch Werte von 0% und 100% zugewiesen. Der mittlere Farbstopp definiert eine Position von 80%, was ihn ziemlich weit nach unten verlagert.

- -

Beispiel: Gleichmäßig verteilte Farbstopps

- -

Hier ist ein Beispiel, das eine Vielzahl an Farben verwendet, die alle gleichmäßig verteilt sind:

- - - - - - - - - - - - -
ScreenshotLivedemo
linear_rainbow.png -
-
- -
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
-background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
-
-/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
-   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
-background: linear-gradient(to right, red, orange, yellow, green, blue);
-
- -

Beachte, dass die Farbstopps automatisch gleichmäßig verteilt werden, wenn keine Positionen angegeben werden.

- -

Transparenz und Farbverläufe

- -

Farbverläufe unterstützen Transparenz. Diese kann zum Beispiel dazu benutzt werden, mehrere Hintergründe übereinander zu legen, um Fadingeffekte bei Hintergrundbilder zu erzeugen. Um dies zu erreichen, können entweder rgba Farben, hsla Farben oder das Schlüsselwort transparent verwendet werden (siehe Farbwerte). Jedoch sei darauf hingewiesen, dass einige Browser das Schlüsselwort transparent als rgba(0,0,0,0) anstatt rgba(255,255,255,0) rendern, was zu unerwarteten Ergebnissen (und potentiell dunklen Stellen) führen kann wenn die Farbverläufe sich überblenden. Daher ist es sicherer, opake Farbverläufe zu definieren.

- -

Hier ist ein Beispiel, wie Transparenz in Farbverläufen verwendet wird:

- -

Beispiel für Farbverläufe mit Transparenz

- -
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
-background: -prefix-linear-gradient(left, rgba(255,255,255,0),
-  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
-
-/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
-   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
-background: linear-gradient(to right, rgba(255,255,255,0),
-  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
-
- -

Die Hintergründe sind überlagert, wobei der erste Hintergrund oben liegt und jeder weitere Hintergrund weiter unten. Durch die Überlagerung von Hintergründen auf diese Weise können kreative Effekte erzeugt werden, wie oben zu sehen.

- -

Radiale Farbverläufe

- -

Radiale Farbverläufe werden durch die {{cssxref("radial-gradient")}} Funktion definiert. Die Syntax ist ähnlich der linearer Farbverläufe, außer, dass die Endform (ob Kreis oder Ellipse) des Verlaufs angegeben werden kann, als auch deren Größe. Standardmäßig ist die Endform eine Ellipse mit den gleichen Proportionen wie die der Containerbox.

- -

Farbstopps

- -

Farbstopps können auf die gleiche Weise wie bei linearen Farbverläufen angegeben werden. Die Verlaufslinie verläuft dabei von der Startposition in alle Richtungen.

- -

Beispiel: Gleichmäßig verteilte Farbstopps

- -

Standardmäßig werden Farbstopps wie bei linearen Verläufen gleichmäßig verteilt:

- - - - - - - - - - - - -
ScreenshotLivedemo
radial_gradient_even.png -
-
- -
background: radial-gradient(red, yellow, rgb(30, 144, 255));
-
- -

Beispiel: Explizit verteilte Farbstopps

- -

Hier werden bestimmte Positionen für die Farbstopps definiert:

- - - - - - - - - - - - -
ScreenshotLivedemo
radial_gradient_varied.png -
-
- -
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
-
- -

Größe

- -

Dies ist einer der Bereiche, in denen sich radiale von linearen Farbverläufen unterscheiden. Es kann ein Größenwert angegeben werden, der den Punkt definiert, der die Größe des Kreises oder der Ellipse bestimmt. Siehe die Beschreibung der Größenkonstanten für Details.

- -

Beispiel: closest-side für Ellipsen

- -

Diese Ellipse verwendet den Größenwert closest-side, welcher bedeutet, dass die Größe durch die Distanz zwischen dem Startpunkt (der Mitte) und der nähesten Seite der eingeschlossenen Box bestimmt wird.

- - - - - - - - - - - - -
ScreenshotLivedemo
radial_ellipse_size1.png -
-
- -
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
-
- -

Beispiel: farthest-corner für Ellipsen

- -

Dieses Beispiel ist ähnlich zum vorherigen mit dem Unterschied, dass die Größe der Ellipse durch farthest-corner bestimmt wird, welches die Größe des Verlaufs durch die Distanz zwischen Startpunkt und der vom Startpunkt am weitesten entfernten Ecke der engeschlossenen Box bestimmt.

- - - - - - - - - - - - -
ScreenshotLivedemo
radial_ellipse_size2.png -
-
- -
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
-
- -

Beispiel: closest-side für Kreise

- -

Dieses Beispiel verwendet closest-side, welches die Größe des Kreises als die Distanz zwischen dem Startpunkt und der nähesten Seite definiert.

- - - - - - - - - - - - -
ScreenshotLivedemo
radial_circle_size1.png -
-
- -
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
-
- -

Hier entspricht der Radius des Kreises der Hälfte der Höhe der Box, da der obere und untere Rand gleich weit vom Startpunkt entfernt sind und näher als der linke und rechte Rand sind.

- -

Wiederholung von Farbverläufen

- -

Die {{cssxref("linear-gradient")}} und {{cssxref("radial-gradient")}} Eigenschaften unterstützen nicht automatisch die Wiederholung von Farbstopps. Jedoch sind die Eigenschaften {{cssxref("repeating-linear-gradient")}} und {{cssxref("repeating-radial-gradient")}} für diese Funktionalität verfügbar.

- -

Beispiele: Sich wiederholender linearer Farbverlauf

- -

Dieses Beispiel verwendet {{cssxref("repeating-linear-gradient")}}, um einen Farbverlauf zu erzeugen:

- - - - - - - - - - - - -
ScreenshotLivedemo
repeating_linear_gradient.png -
-
- -
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
-
- -

Ein weiteres Beispiel, das die {{cssxref("repeating-linear-gradient")}} Eigenschaft verwendet.

- -

repeat_background_gradient_checked.png

- -
background-color: #000;
-background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
-      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
-      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
-      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
-      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
-      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
-      rgba(255, 206, 0, 0.25) 166px),
-repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
-      rgba(143, 77, 63, 0.25) 10px),
-repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
-      rgba(143, 77, 63, 0.25) 10px);
-
- -

Beispiel: Sich wiederholender radialer Farbverlauf

- -

Dieses Beispiel verwendet {{cssxref("repeating-radial-gradient")}}, um einen Farbverlauf zu erzeugen:

- - - - - - - - - - - - -
ScreenshotLivedemo
repeating_radial_gradient.png -
-
- -
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-
- -

Siehe auch

- -
    -
  • Farbverlauf-bezogene Artikel: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.
    • -
diff --git a/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html deleted file mode 100644 index 673c3e0bbec4f3..00000000000000 --- a/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Konsistente Listeneinrückung -slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation -tags: - - Anleitung - - CSS - - Intermediate - - NeedsUpdate -translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation -original_slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung ---- -
{{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_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html deleted file mode 100644 index c29c31058fc6d2..00000000000000 --- a/files/de/web/css/css_lists_and_counters/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_logical_properties/index.html b/files/de/web/css/css_logical_properties/index.html deleted file mode 100644 index 3f900a767fb32f..00000000000000 --- a/files/de/web/css/css_logical_properties/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_masking/index.html b/files/de/web/css/css_masking/index.html deleted file mode 100644 index 27d9e1e37a30d4..00000000000000 --- a/files/de/web/css/css_masking/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: CSS Masken -slug: Web/CSS/CSS_Masking -tags: - - CSS - - CSS Masken - - CSS Referenz - - Übersicht -translation_of: Web/CSS/CSS_Masking -original_slug: Web/CSS/CSS_Masken ---- -
{{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_motion_path/index.html b/files/de/web/css/css_motion_path/index.html deleted file mode 100644 index 322a5b1158bbae..00000000000000 --- a/files/de/web/css/css_motion_path/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Bewegungspfad -slug: Web/CSS/CSS_Motion_Path -tags: - - Bewegungspfad - - CSS - - Experimentell - - Referenz - - Übersicht -translation_of: Web/CSS/CSS_Motion_Path -original_slug: Web/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

- -{{Compat}} diff --git a/files/de/web/css/css_namespaces/index.html b/files/de/web/css/css_namespaces/index.html deleted file mode 100644 index 99b6e1faf567a9..00000000000000 --- a/files/de/web/css/css_namespaces/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: CSS Namensräume -slug: Web/CSS/CSS_Namespaces -tags: - - CSS - - CSS Namensräume - - Referenz - - Web - - Übersicht -translation_of: Web/CSS/CSS_Namespaces -original_slug: Web/CSS/CSS_Namensräume ---- -
{{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 deleted file mode 100644 index 0a9020dd543dce..00000000000000 --- a/files/de/web/css/css_positioning/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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 deleted file mode 100644 index 1345ed23dfe147..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Stapeln mit 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}}
- -

Im ersten Teil dieses Artikels, Stapeln ohne die Eigenschaft z-index, wird erklärt, wie die Stapelung standardmäßig angeordnet wird. Wenn Sie eine benutzerdefinierte Stapelreihenfolge erstellen möchten, können Sie die Eigenzschaft {{cssxref("z-index")}} bei einem positionierten Element verwenden.

- -

Die Eigenschaft z-index kann mit einem ganzzahligen Wert (positiv, null oder negativ) angegeben werden, der die Position des Elements entlang der z-Achse darstellt. Wenn Sie mit der z-Achse nicht vertraut sind, stellen Sie sich die Seite als einen Stapel von Ebenen vor, von denen jede eine Nummer hat. Die Ebenen werden in numerischer Reihenfolge gerendert, wobei größere Zahlen über kleineren Zahlen stehen.

- -
    -
  • unterste Schicht (am weitesten vom Beobachter entfernt)
    • -
  • ...
    • -
  • Schicht -3
    • -
  • Schicht -2
    • -
  • Schicht -1
    • -
  • Schicht 0 (Standard-Renderingschicht)
    • -
  • Schicht 1
    • -
  • Schicht 2
    • -
  • Schicht 3
    • -
  • ...
    • -
  • oberste Schicht (am nähesten zum Beobachter liegend)
    • -
- -
-
    -
  • Wenn keine Eigenschaft z-index angegeben ist, werden Elemente auf der Standard-Rendering-Ebene 0 (Null) gerendert.
    • -
  • Wenn mehrere Elemente denselben z-index Wert haben (d. h. sie werden auf derselben Ebene platziert), gelten die im Abschnitt Stapeln ohne z-Index-Eigenschaft erläuterten Stapelungsregeln.
    • -
-
- -

Im folgenden Beispiel wird die Stapelreihenfolge der Ebenen mithilfe des z-index neu angeordnet. Der z-index von Element Nr. 5 hat keine Auswirkung, da es sich nicht um ein positioniertes Element handelt.

- -

Example of stacking rules modified using z-index

- -

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 deleted file mode 100644 index 9f7b3dd4013a8b..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: CSS z-index verstehen -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 den meisten einfachen Fällen können HTML-Seiten als zweidimensional betrachtet werden, da Text, Bilder und andere Elemente auf der Seite angeordnet sind, ohne sich zu überlappen. In diesem Fall gibt es einen einzigen Rendering-Fluss, und der Prozess kennt den Platz, den jedes Elemente einimmt. Mit dem Attribut {{cssxref("z-index")}} können Sie die Reihenfolge der Schichtung von Objekten beim Rendern von Inhalten verändern.

- -
-

In CSS 2.1 hat jede Box eine Position in drei Dimensionen. Zusätzlich zu ihrer horizontalen und vertikalen Position liegen die Boxen entlang einer "Z-Achse" und werden übereinander formatiert. Die Positionen der Z-Achse sind besonders relevant, wenn sich Boxen visuell überlappen.

-
- -

(von CSS 2.1 Section 9.9.1 - Layered presentation)

- -

Das bedeutet, dass Sie mit CSS-Stilregeln Boxen auf Ebenen zusätzlich zur normalen Rendering-Ebene (Ebene 0) positionieren können. Die Z-Position jeder Ebene wird als Ganzzahl ausgedrückt, die die Stapelreihenfolge für das Rendering darstellt. Größere Zahlen bedeuten näher am Betrachter. Die Z-Position kann mit der CSS-Eigenschaft z-index gesteuert werden

- -

Die Verwendung von z-index erscheint extrem einfach: eine einzelne Eigenschaft, der eine einzelne Ganzzahl zugewiesen ist, mit einem leicht verständlichen Verhalten. Wenn z-index jedoch auf komplexe Hierarchien von HTML-Elementen angewendet wird, kann sein Verhalten schwer zu verstehen oder vorherzusagen sein. Das liegt an den komplexen Stapelungsregeln. In der Tat wurde in der CSS-Spezifikation CSS-2.1 Anhang E ein eigener Abschnitt reserviert, um diese Regeln besser zu erklären.

- -

Dieser Artikel wird versuchen, diese Regeln zu erklären, mit einigen Vereinfachungen und mehreren Beispielen.

- -
    -
  1. Stapeln ohne die Eigenschaft z-index: Die Stapelungsregeln, die gelten, wenn z-index nicht verwendet wird.
    2. -
  2. Stapeln mit schwebenden Blöcken: Wie schwebende Elemente beim Stapeln behandelt werden.
    3. -
  3. Verwenden von z-index: Wie Sie z-index verwenden, um die Standardstapelung zu ändern.
    4. -
  4. Der Stapelungskontext: Hinweise zum Stacking-Kontext.
    5. -
  5. Stapelungskontext-Beispiel 1: 2-stufige HTML-Hierarchie, z-index auf der letzten Stufe
    6. -
  6. Stapelungskontext-Beispiel 2: 2-stufige HTML-Hierarchie, z-index auf allen Ebenen
    7. -
  7. Stapelungskontext-Beispiel 3: 3-stufige HTML-Hierarchie, z-index auf der zweiten Ebene
    8. -
- -
-

Original Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 9. Juli 2005
    • -
- -

Anmerkung des Autors: Danke an Wladimir Palant und Rod Whiteley für die Rezension.

-
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html deleted file mode 100644 index 8e5889444b7713..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Stapeln mit fließenden Blöcken -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -tags: - - CSS - - CSS z-index - - CSS z-index verstehen - - Fortgeschritten - - Leitfaden - - Referenz - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float ---- -
{{cssref}}
- -

Bei fließenden Blöcken (float) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:

- -
    -
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. -
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. -
  3. Fließende Blöcke
    4. -
  4. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    5. -
- -

Wie Sie im Beispiel unten sehen können, sind Hintergrund und Rahmen des nicht positionierten Blocks (DIV #4) von fließenden Blöcken völlig unbeeinflusst, der Inhalt ist jedoch betroffen. Dies geschieht gemäß dem Standard-Float-Verhalten. Dieses Verhalten kann mit einer zusätzlichen Regel in der obigen Liste dargestellt werden:

- -
    -
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. -
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. -
  3. Schwebende Blöcke
    4. -
  4. Nachfolgende nicht-positionierte Inline-Elemente
    5. -
  5. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML
    6. -
- -

Example of stacking rules with floating boxes

- -
-

Hinweis: Wenn ein Deckkraftwert (opacity) auf den nicht positionierten Block (DIV #4) angewendet wird, passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks ragen über die schwebenden Blöcke und die positionierten Blöcke hinaus. Das liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines Deckkraftwerts erzeugt einen neuen Stapelkontext (siehe What No One Told You About Z-Index).

-
- -

Quellcode für das Beispiel

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
-
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
-
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
-
-<br />
-
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
-
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
-
-<div id="rel1">
-  <b>DIV #6</b><br />position: relative;</div>
-
-
- -

CSS

- -
div {
-  padding: 10px;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 10px;
-  right: 140px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  height: 100px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 10px 0px 10px;
-  text-align: left;
-}
-
-#flo1 {
-  margin: 0px 10px 0px 20px;
-  float: left;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#flo2 {
-  margin: 0px 20px 0px 10px;
-  float: right;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#abs2 {
-  position: absolute;
-  width: 150px;
-  height: 100px;
-  top: 80px;
-  left: 100px;
-  border: 1px dashed #990;
-  background-color: #fdd;
-}
-
-#rel1 {
-  position: relative;
-  border: 1px dashed #996;
-  background-color: #cff;
-  margin: 0px 10px 0px 10px;
-  text-align: left;
-}
-
- -

See also

- - - -
-

Original Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 3. November 2004
    • -
-
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html deleted file mode 100644 index b1a48f0ebc09ec..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Stapelkontext Beispiel 1 -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 ---- -
{{cssref}}
- -

« CSS « Understanding CSS z-index

- -

Stapelkontext Beispiel 1

- -

Lassen Sie uns mit einem einfachen Beispiel beginnen. Im Wurzel-Stapelkontext haben wir zwei DIVs (DIV #1 und DIV #3), beide relativ positioniert, aber ohne {{cssxref("z-index")}} Eigenschaften. Innerhalb von DIV #1 befindet sich ein absolut positioniertes DIV #2, während sich in DIV #3 ein absolut positioniertes DIV #4 befindet, beide ohne z-index Eigenschaften.

- -

Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.

- -

Stacking context example 1

- -

Wenn DIV #2 ein positiver z-index Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.

- -

Stacking context example 1

- -

Wenn dann DIV #4 ebenfalls einen positiven z-index zugewiesen bekommt, der größer ist als der z-index von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.

- -

Stacking context example 1

- -

In diesem letzten Beispiel können Sie sehen, dass DIV #2 und DIV #4 keine Geschwister sind, da sie zu verschiedenen Eltern in der Hierarchie der HTML-Elemente gehören. Trotzdem kann die Stapelung von DIV #4 in Bezug auf DIV #2 durch z-index gesteuert werden. Da DIV #1 und DIV #3 kein z-index-Wert zugewiesen ist, bilden sie keinen Stapelkontext. Das bedeutet, dass ihr gesamter Inhalt, einschließlich DIV #2 und DIV #4, zu demselben Wurzel-Stacking-Kontext gehört.

- -

In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:

- -
    -
  • Wurzel-Stapelkontext -
      -
    • DIV #2 (z-index 1)
      • -
    • DIV #4 (z-index 2)
      • -
    -
    • -
- -
Hinweis: DIV #1 und DIV #3 sind nicht lichtdurchlässig. Es ist wichtig, sich daran zu erinnern, dass das Zuweisen einer Deckkraft von weniger als 1 zu einem positionierten Element implizit einen Stapelkontext erzeugt, genau wie das Hinzufügen eines z-index Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.
- -

Beispiel

- -

HTML

- -
<div id="div1">
-<br /><span class="bold">DIV #1</span>
-<br />position: relative;
-   <div id="div2">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: absolute;
-   <br />z-index: 1;
-   </div>
-</div>
-
-<br />
-
-<div id="div3">
-<br /><span class="bold">DIV #3</span>
-<br />position: relative;
-   <div id="div4">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-   <br />z-index: 2;
-   </div>
-</div>
-
-</body></html>
-
- -

CSS

- -
.bold {
-    font-weight: bold;
-    font: 12px Arial;
-}
-#div1,
-#div3 {
-    height: 80px;
-    position: relative;
-    border: 1px dashed #669966;
-    background-color: #ccffcc;
-    padding-left: 5px;
-}
-#div2 {
-    opacity: 0.8;
-    z-index: 1;
-    position: absolute;
-    width: 150px;
-    height: 200px;
-    top: 20px;
-    left: 170px;
-    border: 1px dashed #990000;
-    background-color: #ffdddd;
-    text-align: center;
-}
-#div4 {
-    opacity: 0.8;
-    z-index: 2;
-    position: absolute;
-    width: 200px;
-    height: 70px;
-    top: 65px;
-    left: 50px;
-    border: 1px dashed #000099;
-    background-color: #ddddff;
-    text-align: left;
-    padding-left: 10px;
-}
- -

Ergebnis

- -

{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

- -

See also

- - - -
-

Original Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 9. Juli 2005
    • -
-
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html deleted file mode 100644 index 625a306375b182..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Stapelkontext Beispiel 2 -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 ---- -
{{cssref}}
- -

« CSS « Understanding CSS z-index

- -

Stapelkontext Beispiel 2

- -

Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des Stapelkontexts. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.

- -

{{ EmbedLiveSample('Example_source_code', '352', '270') }}

- -

Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) liegt, da beide zum selben Stapelkontext gehören (dem Wurzel-Kontext), so dass die z-index Werte bestimmen, wie Elemente gestapelt werden.

- -

Was als merkwürdig angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrer z-index Werte. Der Grund dafür ist, dass sie nicht zum selben Stapelkontext gehören. DIV #4 gehört zu dem Stacking-Kontext, der durch DIV #3 erzeugt wurde, und wie bereits erklärt, befindet sich DIV #3 (und sein gesamter Inhalt) unter DIV #2.

- -

Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:

- -
    -
  • Wurzel-Stapelkontext -
      -
    • DIV #2 (z-index 2)
      • -
    • DIV #3 (z-index 1) -
        -
      • DIV #4 (z-index 10)
        • -
      -
      • -
    -
    • -
- -
Hinweis: Es ist zu beachten, dass sich die HTML-Hierarchie im Allgemeinen von der Stapelkontexthierarchie unterscheidet. In der Stapelkontexthierarchie werden Elemente, die keinen Stapelkontext erzeugen, an ihrem übergeordneten Element zusammengeklappt.
- -

Beispiel

- -

HTML

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-#div2 { z-index: 2; }
-#div3 { z-index: 1; }
-#div4 { z-index: 10; }
-
-#div1,#div3 {
-   height: 80px;
-   position: relative;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#div2 {
-   opacity: 0.8;
-   position: absolute;
-   width: 150px;
-   height: 200px;
-   top: 20px;
-   left: 170px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-#div4 {
-   opacity: 0.8;
-   position: absolute;
-   width: 200px;
-   height: 70px;
-   top: 65px;
-   left: 50px;
-   border: 1px dashed #000099;
-   background-color: #ddddff;
-   text-align: left;
-   padding-left: 10px;
-}
-
-
-</style></head>
-
-<body>
-
-    <br />
-
-    <div id="div1"><br />
-        <span class="bold">DIV #1</span><br />
-        position: relative;
-        <div id="div2"><br />
-            <span class="bold">DIV #2</span><br />
-            position: absolute;<br />
-            z-index: 2;
-        </div>
-    </div>
-
-    <br />
-
-    <div id="div3"><br />
-        <span class="bold">DIV #3</span><br />
-        position: relative;<br />
-        z-index: 1;
-        <div id="div4"><br />
-            <span class="bold">DIV #4</span><br />
-            position: absolute;<br />
-            z-index: 10;
-        </div>
-    </div>
-
-</body>
-</html>
-
- -

Siehe auch

- - - -
-

Original Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 9. July 2005
    • -
-
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html deleted file mode 100644 index 165cd88bd69b3d..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Stapelkontext Beispiel 3 -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 ---- -
{{cssref}}
- -

« CSS « Understanding CSS z-index

- -

Stapelkontext Beispiel 3

- -

Dieses letzte Beispiel zeigt Probleme, die entstehen, wenn mehrere positionierte Elemente in einer mehrstufigen HTML-Hierarchie gemischt werden und wenn z-Indizes über Klassenselektoren zugewiesen werden.

- -

Nehmen wir als Beispiel ein hierarchisches Menü mit drei Ebenen, das aus mehreren positionierten DIVs besteht. Die DIVs der zweiten und dritten Ebene erscheinen, wenn man mit dem Mauszeiger über die übergeordneten Elemente fährt oder auf sie klickt. Normalerweise wird diese Art von Menü entweder clientseitig oder serverseitig per Skript generiert, so dass die Stilregeln mit einem Klassenselektor anstelle des id-Selektors zugewiesen werden.If the three menu levels partially overlap, then managing stacking could become a problem.

- -

Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.

- -

{{ EmbedLiveSample('Example_source_code', '320', '330') }}

- -

Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.

- -

Das Menü der zweiten Ebene wird absolut innerhalb des übergeordneten Elements positioniert. Um es über alle Menüs der ersten Ebene zu legen, wird ein {{cssxref("z-index")}} verwendet. Das Problem ist, dass für jedes Menü der zweiten Ebene ein Stapelkontext erzeugt wird und jedes Menü der dritten Ebene zum Kontext seines Elternelements gehört.

- -

Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben z-index Wert haben und die Standard-Stapelregeln gelten.

- -

Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:

- -
    -
  • Wurzel-Stapelkontext -
      -
    • LEVEL #1 -
        -
      • LEVEL #2 (z-index: 1) -
          -
        • LEVEL #3
          • -
        • ...
          • -
        • LEVEL #3
          • -
        -
        • -
      • LEVEL #2 (z-index: 1)
        • -
      • ...
        • -
      • LEVEL #2 (z-index: 1)
        • -
      -
      • -
    • LEVEL #1
      • -
    • ...
      • -
    • LEVEL #1
      • -
    -
    • -
- -

Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) z-index Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.

- -
Hinweis: Im Quellcode sehen Sie, dass die Menüs der zweiten und dritten Ebene aus mehreren DIVs bestehen, die in einem absolut positionierten Container enthalten sind. Dies ist nützlich, um sie alle auf einmal zu gruppieren und zu positionieren.
- -

Beispiel Quellcode

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-div.lev1 {
-   width: 250px;
-   height: 70px;
-   position: relative;
-   border: 2px outset #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#container1 {
-   z-index: 1;
-   position: absolute;
-   top: 30px;
-   left: 75px;
-}
-
-div.lev2 {
-   opacity: 0.9;
-   width: 200px;
-   height: 60px;
-   position: relative;
-   border: 2px outset #990000;
-   background-color: #ffdddd;
-   padding-left: 5px;
-}
-
-#container2 {
-   z-index: 1;
-   position: absolute;
-   top: 20px;
-   left: 110px;
-}
-
-div.lev3 {
-   z-index: 10;
-   width: 100px;
-   position: relative;
-   border: 2px outset #000099;
-   background-color: #ddddff;
-   padding-left: 5px;
-}
-
-</style></head>
-
-<body>
-
-<br />
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-
-   <div id="container1">
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-
-         <div id="container2">
-
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-
-         </div>
-
-      </div>
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-      </div>
-
-   </div>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-</body></html>
-
- -

Siehe auch

- - - -
-

Original Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 9. Juli 2005
    • -
-
- -

Hinweis: Der Grund, warum das Beispielbild falsch aussieht - mit der zweiten Ebene 2, die die Menüs der Ebene 3 überlagert - ist, dass die Ebene 2 Deckkraft hat, was einen neuen Stapelungskontext erzeugt. Im Grunde ist diese ganze Beispielseite falsch und irreführend.

diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html deleted file mode 100644 index 4711fcdaefc805..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Stapeln ohne die Eigenschaft z-index -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -tags: - - CSS - - CSS z-index - - CSS z-index verstehen - - Fortgeschritten - - Leitfaden - - Referenz - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index ---- -
{{cssref}}
- -

Wenn die CSS-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):

- -
    -
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. -
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. -
  3. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    4. -
- -

Beachten Sie, dass die CSS-Eigenschaft {{cssxref("order")}}, wenn sie das Rendering von der "Reihenfolge des Erscheinens im HTML" innerhalb von {{cssxref("flex")}}-Containern ändert, auch die Reihenfolge für den Stapelkontext beeinflusst.

- -

Im folgenden Beispiel sind die Elemente #1 bis #4 positionierte Elemente. Element Nr. 5 ist statisch und wird daher unter den anderen vier Elementen gezeichnet, obwohl es im HTML-Markup später kommt.

- -

Figure 1. Exemple de règles d'empilement sans propriété z-index

- -

Quellcode für das Beispiel

- -

HTML

- -
<div id="abs1" class="absolute">
-  <b>DIV #1</b><br />position: absolute;</div>
-<div id="rel1" class="relative">
-  <b>DIV #2</b><br />position: relative;</div>
-<div id="rel2" class="relative">
-  <b>DIV #3</b><br />position: relative;</div>
-<div id="abs2" class="absolute">
-  <b>DIV #4</b><br />position: absolute;</div>
-<div id="sta1" class="static">
-  <b>DIV #5</b><br />position: static;</div>
-
- -

CSS

- -
b {
-  font-family: sans-serif;
-}
-
-div {
-  padding: 10px;
-  border: 1px dashed;
-  text-align: center;
-}
-
-.static {
-  position: static;
-  height: 80px;
-  background-color: #ffc;
-  border-color: #996;
-}
-
-.absolute {
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  background-color: #fdd;
-  border-color: #900;
-  opacity: 0.7;
-}
-
-.relative {
-  position: relative;
-  height: 80px;
-  background-color: #cfc;
-  border-color: #696;
-  opacity: 0.7;
-}
-
-#abs1 {
-  top: 10px;
-  left: 10px;
-}
-
-#rel1 {
-  top: 30px;
-  margin: 0px 50px 0px 50px;
-}
-
-#rel2 {
-  top: 15px;
-  left: 20px;
-  margin: 0px 50px 0px 50px;
-}
-
-#abs2 {
-  top: 10px;
-  right: 10px;
-}
-
-#sta1 {
-  background-color: #ffc;
-  margin: 0px 50px 0px 50px;
-}
-
- -

Siehe auch

- - - -
-

Original Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 3. November 2004
    • -
-
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 deleted file mode 100644 index cbaae015def2c4..00000000000000 --- a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Der Stapelkontext -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 Stapelkontext 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 Stapelkontext

- -

Im vorherigen Teil dieses Artikels, die Verwendung von {{cssxref("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 Stapelkontext bilden.

- -

Ein Stapelkontext 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 Stapelkontext werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die z-index Werte der untergeordneten Stapelkontexte nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelkontexte werden im übergeordneten Stapelkontext atomar als eine einzige Einheit behandelt.

- -

Zusammengefasst:

- -
    -
  • Stapelkontexte können in anderen Stapelkontexten enthalten sein und zusammen eine Hierarchie von Stapelkontexten bilden.
    • -
  • Jeder Stapelkontext ist völlig unabhängig von seinen Geschwistern: Bei der Verarbeitung des Stapels werden nur nachkommende Elemente berücksichtigt.
    • -
  • Jeder Stapelkontext ist in sich geschlossen: Nachdem der Inhalt des Elements gestapelt wurde, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelkontextes betrachtet.
    • -
- -
Hinweis: Die Hierarchie der Stapelkontexte ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelkontexte erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelkontext bilden, vom übergeordneten Stapelkontext 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 Stapelkontext. Die Hierarchie der Stapelkontext 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 Stapelkontextes des Wurzelelementes gültig ist, während der z-Index (6) von DIV #4 innerhalb des Stapelkontextes 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 Stapelkontext 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 Dokumenteninformation

- -
    -
  • Autor(s): Paolo Lombardi
    • -
  • Dieser Artikel ist die englische Übersetzung eines Artikels, den ich auf Italienisch für YappY. geschrieben habe. Ich gewähre das Recht, den gesamten Inhalt unter der Creative Commons: Attribution-Sharealike license zu teilen.
    • -
  • Letzte Aktualisation: 9. Juli 2005
    • -
-
diff --git a/files/de/web/css/css_ruby/index.html b/files/de/web/css/css_ruby/index.html deleted file mode 100644 index 16350631abf13d..00000000000000 --- a/files/de/web/css/css_ruby/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_selectors/index.html b/files/de/web/css/css_selectors/index.html deleted file mode 100644 index d65d18745822f1..00000000000000 --- a/files/de/web/css/css_selectors/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_shapes/index.html b/files/de/web/css/css_shapes/index.html deleted file mode 100644 index d0f03fe3f56ed6..00000000000000 --- a/files/de/web/css/css_shapes/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_table/index.html b/files/de/web/css/css_table/index.html deleted file mode 100644 index 1eaf003b4336ef..00000000000000 --- a/files/de/web/css/css_table/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_text/index.html b/files/de/web/css/css_text/index.html deleted file mode 100644 index 3000d35a8ad1a8..00000000000000 --- a/files/de/web/css/css_text/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/css_text_decoration/index.html b/files/de/web/css/css_text_decoration/index.html deleted file mode 100644 index 0d4824207e8994..00000000000000 --- a/files/de/web/css/css_text_decoration/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: CSS Textdekoration -slug: Web/CSS/CSS_Text_Decoration -tags: - - CSS - - CSS Referenz - - CSS Textdekoration - - Übersicht -translation_of: Web/CSS/CSS_Text_Decoration -original_slug: Web/CSS/CSS_Textdekoration ---- -
{{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/index.html b/files/de/web/css/css_transforms/index.html deleted file mode 100644 index 9354f4ed5737e0..00000000000000 --- a/files/de/web/css/css_transforms/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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

- -{{Compat}} - -

[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_transforms/using_css_transforms/index.html b/files/de/web/css/css_transforms/using_css_transforms/index.html deleted file mode 100644 index aaced7d54bba9f..00000000000000 --- a/files/de/web/css/css_transforms/using_css_transforms/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: CSS Transformationen verwenden -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms -tags: - - CSS - - CSS Transformationen - - CSS3 - - Fortgeschritten - - Guide -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms -original_slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden ---- -
{{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.

- -
-

Nur Elemente, die durch das Box-Modell positioniert werden, können transformiert werden. Als Faustregel gilt, dass ein Element durch das Box-Modell positioniert wird, wenn es display: block hat.

-
- -

CSS Transformationseigenschaften

- -

Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

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

Beispiele

- -

Hier ist ein unverändertes Bild des MDN-Logos:

- -

MDN Logo

- -

Drehung

- -

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotating', 'auto', 240) }}

- -

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.

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
- -

{{EmbedLiveSample('Skewing_and_translating') }}

- -

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 zu setzende Element ist die {{cssxref("perspective")}}. Die Perspektive ist das, was uns den 3D-Eindruck vermittelt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner sind sie.

- -

{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

- -

Das zweite Element, das konfiguriert werden muss, ist die Position des Betrachters mit der Eigenschaft {{ cssxref("perspective-origin") }}. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer ausreichend ist.

- -

{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

- -

Sobald Sie dies getan haben, können Sie das Element im 3D-Raum bearbeiten.

- -

Siehe auch

- - diff --git a/files/de/web/css/css_transitions/index.html b/files/de/web/css/css_transitions/index.html deleted file mode 100644 index 48037fd8de49ee..00000000000000 --- a/files/de/web/css/css_transitions/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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

- -{{Compat}} - -

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_types/index.html b/files/de/web/css/css_types/index.html deleted file mode 100644 index c472530e055283..00000000000000 --- a/files/de/web/css/css_types/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: CSS-Basis-Datentypen -slug: Web/CSS/CSS_Types -translation_of: Web/CSS/CSS_Types -original_slug: Web/CSS/CSS_Typen ---- -
{{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_writing_modes/index.html b/files/de/web/css/css_writing_modes/index.html deleted file mode 100644 index 3914af641fe3c8..00000000000000 --- a/files/de/web/css/css_writing_modes/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/cssom_view/index.html b/files/de/web/css/cssom_view/index.html deleted file mode 100644 index 6c8015ec0ef48f..00000000000000 --- a/files/de/web/css/cssom_view/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/cursor/index.html b/files/de/web/css/cursor/index.html deleted file mode 100644 index 3bca2daddf6473..00000000000000 --- a/files/de/web/css/cursor/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -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 deleted file mode 100644 index 40f291470e5433..00000000000000 --- a/files/de/web/css/custom-ident/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -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 deleted file mode 100644 index faaa0bf8b572b4..00000000000000 --- a/files/de/web/css/direction/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -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 deleted file mode 100644 index 35a69668bba31f..00000000000000 --- a/files/de/web/css/display/index.html +++ /dev/null @@ -1,309 +0,0 @@ ---- -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

- -

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. -
- -
inline
-
Es werden eine oder mehrere inline Elementboxen generiert.
- -
block
-
Es wird eine Blockbox generiert.
- -
list-item
-
- Es 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-block
-
- Es 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-table
-
- Verhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein - inline Element generiert. -
- -
table
-
- Verhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine - Blockbox generiert. -
- -
table-caption
-
Verhält sich wie das {{HTMLElement("caption")}} HTML Element
- -
table-cell
-
Verhält sich wie das {{HTMLElement("td")}} HTML Element
- -
table-column
-
Verhält sich wie das {{HTMLElement("col")}} HTML Element
- -
table-column-group
-
Verhält sich wie das {{HTMLElement("colgroup")}} HTML Element
- -
table-footer-group
-
Verhält sich wie das {{HTMLElement("tfoot")}} HTML Element
- -
table-header-group
-
Verhält sich wie das {{HTMLElement("thead")}} HTML Element
- -
table-row
-
Verhält sich wie das {{HTMLElement("tr")}} HTML Element
- -
table-row-group
-
Verhält sich wie das {{HTMLElement("tbody")}} HTML Element
-
- -

- Flexbox model values (CSS3) -

-
-
flex
-
Es wird ein Flexbox Container als block Element erzeugt.
- -
inline-flex
-
- Es wird ein Flexbox Container als inline Element erzeugt. -
-
- -

- Grid box model values (CSS3) - {{experimental_inline}} -

-
-
grid
-
Es wird ein Grid Container als block Element erzeugt.
- -
inline-grid
-
Es wird ein Grid Container als inline Element erzeugt.
-
- -

- Ruby Formatierungsmodell Werte (CSS3){{experimental_inline}} -

-
-
ruby
-
- Das 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-base
-
Diese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.
- -
ruby-text
-
Diese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.
- -
ruby-base-container
-
- Diese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als - anonyme Boxen generiert wurden. -
- -
ruby-text-container
-
Diese 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. -
    • -
-
-
contents
-
- Diese 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 deleted file mode 100644 index f20a3477bb9fb2..00000000000000 --- a/files/de/web/css/empty-cells/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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/filter/index.html b/files/de/web/css/filter/index.html deleted file mode 100644 index 3e1f038550e8f5..00000000000000 --- a/files/de/web/css/filter/index.html +++ /dev/null @@ -1,1064 +0,0 @@ ---- -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 deleted file mode 100644 index 9f0ba380aaa616..00000000000000 --- a/files/de/web/css/flex-flow/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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 deleted file mode 100644 index 96bec33f7b3e1e..00000000000000 --- a/files/de/web/css/flex-grow/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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 deleted file mode 100644 index 523c48e7f2cccb..00000000000000 --- a/files/de/web/css/flex-shrink/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 deleted file mode 100644 index 7567f16017f7b2..00000000000000 --- a/files/de/web/css/flex-wrap/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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 deleted file mode 100644 index f2ad980dbffd38..00000000000000 --- a/files/de/web/css/float/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: float -slug: Web/CSS/float -tags: - - CSS - - CSS Eigenschaft - - CSS Positionierung - - Referenz - - 'recipe:css-property' -translation_of: Web/CSS/float ---- -
{{CSSRef}}
- -

Die CSS Eigenschaft float platziert ein Element auf der linken oder rechten Seite seines Containers, so dass Text- und Inline-Elemente um das Element herum angeordnet werden können. Das Element wird aus dem normalen Fluss der Seite entfernt, bleibt aber dennoch ein Teil des Flusses (im Gegensatz zur absoluten Positionierung).

- -

.

- -
{{EmbedInteractiveExample("pages/css/float.html")}}
- -

Ein Floating-Element ist ein Element, bei dem der berechnete Wert von float nicht none ist.

- -

Da float die Verwendung des Blocklayouts impliziert, ändert es in einigen Fällen den berechneten Wert der {{cssxref("display")}} Werte:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Spezifizierter WertBerechneter Wert
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
otherunchanged
- -
Hinweis: Wenn Sie diese Eigenschaft von JavaScript als Mitglied des {{domxref("HTMLElement.style")}} Objektsreferenzieren, unterstützen moderne Browser float, aber in älteren Browsern müssen Sie es als cssFloat buchstabieren, wobei Internet Explorer ab Version 8 und älter styleFloat verwenden. Dies war eine Ausnahme von der Regel, dass der Name des DOM-Mitglieds der in camel case (Binnenmajuskel) geschriebene Name des durch Bindestriche getrennten CSS-Namens ist (aufgrund der Tatsache, dass "float" ein reserviertes Wort in JavaScript ist, was sich in der Notwendigkeit zeigt, "class" als "className" und <label>'s "for" als "htmlFor" zu maskieren).
- -

Syntax

- -
/* Keyword values */
-float: left;
-float: right;
-float: none;
-float: inline-start;
-float: inline-end;
-
-/* Global values */
-float: inherit;
-float: initial;
-float: unset;
-
- -

The float property is specified as a single keyword, chosen from the list of values below.

- -

Values

- -
-
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.
-
inline-start
-
Das Element muss auf der Anfangsseite seines enthaltenden Blocks fließen. Das ist die linke Seite bei ltr Richtungen und die rechte Seite bei rtl-Richtungen.
-
inline-end
-
-

Das Element muss auf der Endseite seines enthaltenden Blocks fließen. Das ist die rechte Seite bei ltr Richtungen und die linke Seite bei rtl-Richtungen.

-
-
inherit
-
Der Wert des Elternelements wird geerbt.
-
- -

Formale Definition

- -

{{cssinfo}}

- -

Formale Syntax

- -{{csssyntax}} - -

Beispiele

- -

Wie fließende Elemente positioniert werden

- -

Wie oben erwähnt, wird ein Element, wenn es fließend (floated) ist, wird es aus dem normalen Fluss des Dokuments herausgenommen (obwohl es immer noch Teil des Dokuments bleibt). Es wird nach links oder rechts verschoben, bis es die Kante seines Behälters oder eines anderen schwebenden Elements berührt.

- -

In diesem Beispiel gibt es drei farbige Quadrate. Zwei davon sind nach links und eines nach rechts geschoben. Beachten Sie, dass das zweite "linke" Quadrat rechts vom ersten platziert wird. Weitere Quadrate würden weiter nach rechts gestapelt werden, bis sie den enthaltenden Kasten gefüllt haben, wonach sie in die nächste Zeile umbrechen würden.

- -

Ein schwebendes Element ist mindestens so hoch wie seine höchsten verschachtelten fließenden Kinder. Wir gaben dem Elternteil die Breite von 100% (width: 100%) und haben es fließen lassen, um sicherzustellen, dass es hoch genug ist, um seine fließenden Kinder zu umfassen, und um sicherzustellen, dass es die Breite des Elternteils einnimmt, damit wir sein benachbartes Geschwisterkind nicht überdecken müssen.

- -

HTML

- -
<section>
-  <div class="left">1</div>
-  <div class="left">2</div>
-  <div class="right">3</div>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
-     lectus vulputate. Donec id iaculis velit. Aliquam vel
-     malesuada erat. Praesent non magna ac massa aliquet tincidunt
-     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
-</section>
-
- -

CSS

- -
section {
-  border: 1px solid blue;
-  width: 100%;
-  float: left;
-}
-
-div {
-  margin: 5px;
-  width: 50px;
-  height: 150px;
-}
-
-.left {
-  float: left;
-  background: pink;
-}
-
-.right {
-  float: right;
-  background: cyan;
-}
- -

Ergebnis

- -

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

- -

Auflösung von floats

- -

Manchmal möchten Sie vielleicht erzwingen, dass ein Element unter alle schwebenden Elemente verschoben wird. Beispielsweise möchten Sie vielleicht, dass Absätze neben den Fließkommazahlen bleiben, aber Überschriften zwingen, auf ihrer eigenen Zeile zu stehen. Siehe {{cssxref("clear")}} für Beispiele.

- -

Spezifikation

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Neue Werte inline-start und inline-end.
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}Keine Änderungen
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}Ursprüngliche Deinition
- -

Browser Kompatibilität

- -

{{Compat("css.properties.float")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/font-family/index.html b/files/de/web/css/font-family/index.html deleted file mode 100644 index 6c9e380f85a22e..00000000000000 --- a/files/de/web/css/font-family/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -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

- -{{csssyntax("/de/docs/Web/CSS/Wertdefinitionssyntax")}} - -
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 deleted file mode 100644 index 37894baa8f257a..00000000000000 --- a/files/de/web/css/font-feature-settings/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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 deleted file mode 100644 index 5605482d1bf904..00000000000000 --- a/files/de/web/css/font-size/index.html +++ /dev/null @@ -1,327 +0,0 @@ ---- -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 deleted file mode 100644 index 7a1accf116a079..00000000000000 --- a/files/de/web/css/font-style/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -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 deleted file mode 100644 index 3362e68f60a524..00000000000000 --- a/files/de/web/css/font-variant/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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 deleted file mode 100644 index bb7b766b05219e..00000000000000 --- a/files/de/web/css/font-weight/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -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 deleted file mode 100644 index 476a00ddc56eac..00000000000000 --- a/files/de/web/css/font/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -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 deleted file mode 100644 index 6aff3fa615df24..00000000000000 --- a/files/de/web/css/frequency/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -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

- -{{Compat}} - -

[*] Einige Versionen von Opera unterstützten den Datentyp teilweise in einer veralteten Spezifikation.

diff --git a/files/de/web/css/gap/index.html b/files/de/web/css/gap/index.html deleted file mode 100644 index a9908919d245ae..00000000000000 --- a/files/de/web/css/gap/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap -original_slug: Web/CSS/grid-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/gradient/index.html b/files/de/web/css/gradient/index.html deleted file mode 100644 index a9f0423ad372b2..00000000000000 --- a/files/de/web/css/gradient/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -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. - - 
    Ein durch einen Farbverlauf erzeugter Regenbogen
-
    - - 
    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. - 
    Radialer Farbverlauf
-
    - - 
    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. - 
    Wiederholender Farbverlauf
-
    - - 
    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-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html deleted file mode 100644 index e5012b67df6b32..00000000000000 --- a/files/de/web/css/grid-template-areas/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -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 deleted file mode 100644 index 342726bf469c8c..00000000000000 --- a/files/de/web/css/grid/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -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 deleted file mode 100644 index c704041292fd90..00000000000000 --- a/files/de/web/css/height/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -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 deleted file mode 100644 index df35e58d62f501..00000000000000 --- a/files/de/web/css/hyphens/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -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 Umbrüche manuell definieren).
-
auto
-
Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe 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_selectors/index.html b/files/de/web/css/id_selectors/index.html deleted file mode 100644 index eb791eba1c36c6..00000000000000 --- a/files/de/web/css/id_selectors/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ID-Selektoren -slug: Web/CSS/ID_selectors -tags: - - CSS - - CSS Referenz - - Einsteiger - - Selektoren -translation_of: Web/CSS/ID_selectors -original_slug: Web/CSS/ID-Selektoren ---- -
{{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 deleted file mode 100644 index 90cf2a6ad05477..00000000000000 --- a/files/de/web/css/image-orientation/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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 deleted file mode 100644 index d1010e2c481a11..00000000000000 --- a/files/de/web/css/image-rendering/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -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 deleted file mode 100644 index d84257fc23e8e3..00000000000000 --- a/files/de/web/css/image/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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 deleted file mode 100644 index dbbf3989f41f8c..00000000000000 --- a/files/de/web/css/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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-Tutorial
-
Unser 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/inherit/index.html b/files/de/web/css/inherit/index.html deleted file mode 100644 index c91cd0c02170a8..00000000000000 --- a/files/de/web/css/inherit/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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/inheritance/index.html b/files/de/web/css/inheritance/index.html deleted file mode 100644 index cc0492b4eb1825..00000000000000 --- a/files/de/web/css/inheritance/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Vererbung -slug: Web/CSS/inheritance -tags: - - CSS - - Guide - - Web -translation_of: Web/CSS/inheritance -original_slug: Web/CSS/Vererbung ---- -

Übersicht

-

Die Übersicht jeder CSS Eigenschaft Definition gibt an, ob jene Eigenschaft standardmäßig vererbt ist ("Vererbt: Ja") oder nicht ("Vererbt: Nein"). Dies steuert, was passiert, falls kein Wert für eine Eigenschaft eines Elements angegeben wird.

-

Vererbte Eigenschaften

-

Falls kein Wert für eine vererbte Eigenschaft für ein Element angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft des Elternelements. Nur das Wurzelelement des Dokuments erhält den in der Übersicht angegebenen Initialwert.

-

Ein typisches Beispiel für eine vererbte Eigenschaft ist die {{ Cssxref("color") }} Eigenschaft. Für die gegebene Stilregel:

-
p { color: green }
-

und den Markup:

-
<p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p>
-

werden die Wörter "hervorgehobenen Text" in grün erscheinen, da das em Element den Wert der {{ Cssxref("color") }} Eigenschaft vom p Element erbt. Es erhält nicht den Initialwert der Eigenschaft (welcher die Farbe des Wurzelelements ist, falls die Seite keine Farbe definiert).

-

Nicht vererbte Eigenschaften

-

Falls kein Wert für eine nicht vererbte Eigenschaft (in Mozilla Code manchmal auch rücksetzende Eigenschaft genannt) für ein Element angegeben wurde, erhält das Element den Initialwert dieser Eigenschaft (wie in der Übersicht der Eigenschaft angegeben).

-

Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die {{ Cssxref("border") }} Eigenschaft. Für die gegebene Stilregel:

-
 p { border: medium solid }
-

und den Markup:

-
  <p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p>
-

werden die Wörter "hervorgehobenen Text" keinen Rahmen haben (da der Initialwert von {{ Cssxref("border-style") }} none ist).

-

Hinweise

-

Das {{ Cssxref("inherit") }} Schlüsselwort erlaubt es Autoren, die Vererbung explizit anzugeben. Dies funktioniert sowohl für vererbte als auch nicht vererbte Eigenschaften.

-

Siehe auch

- diff --git a/files/de/web/css/initial/index.html b/files/de/web/css/initial/index.html deleted file mode 100644 index 5a6ddeb5ce8af5..00000000000000 --- a/files/de/web/css/initial/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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

-{{Compat}} -

Siehe auch

- diff --git a/files/de/web/css/initial_value/index.html b/files/de/web/css/initial_value/index.html deleted file mode 100644 index 48d334b4e2ffd8..00000000000000 --- a/files/de/web/css/initial_value/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Initialwert -slug: Web/CSS/initial_value -tags: - - CSS - - Guide - - Web -translation_of: Web/CSS/initial_value -original_slug: Web/CSS/Initialwert ---- -

Ü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 deleted file mode 100644 index 6c7c84db2f9a67..00000000000000 --- a/files/de/web/css/integer/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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 deleted file mode 100644 index e07896f3b817bc..00000000000000 --- a/files/de/web/css/justify-content/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -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/layout_mode/index.html b/files/de/web/css/layout_mode/index.html deleted file mode 100644 index 76beca5eef3fe7..00000000000000 --- a/files/de/web/css/layout_mode/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/left/index.html b/files/de/web/css/left/index.html deleted file mode 100644 index d1e281e4a3e0fe..00000000000000 --- a/files/de/web/css/left/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -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 deleted file mode 100644 index 0600187f25889d..00000000000000 --- a/files/de/web/css/length/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -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 deleted file mode 100644 index c321bbc86df7db..00000000000000 --- a/files/de/web/css/letter-spacing/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -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 deleted file mode 100644 index 941cfa08950f9c..00000000000000 --- a/files/de/web/css/line-break/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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/list-style-image/index.html b/files/de/web/css/list-style-image/index.html deleted file mode 100644 index 93e8d8a44a69d4..00000000000000 --- a/files/de/web/css/list-style-image/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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 deleted file mode 100644 index 6645dafb85a841..00000000000000 --- a/files/de/web/css/list-style-position/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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 deleted file mode 100644 index a52f9871223d66..00000000000000 --- a/files/de/web/css/list-style-type/index.html +++ /dev/null @@ -1,558 +0,0 @@ ---- -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 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 deleted file mode 100644 index 0bfa991ecb3604..00000000000000 --- a/files/de/web/css/list-style/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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")}}
    • -
diff --git a/files/de/web/css/margin-bottom/index.html b/files/de/web/css/margin-bottom/index.html deleted file mode 100644 index 5707ace0b0864b..00000000000000 --- a/files/de/web/css/margin-bottom/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/margin-left/index.html b/files/de/web/css/margin-left/index.html deleted file mode 100644 index 1e10e7cfd41ef3..00000000000000 --- a/files/de/web/css/margin-left/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/margin-right/index.html b/files/de/web/css/margin-right/index.html deleted file mode 100644 index 152ffedaf19c69..00000000000000 --- a/files/de/web/css/margin-right/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/margin-top/index.html b/files/de/web/css/margin-top/index.html deleted file mode 100644 index 9a50b81b65397e..00000000000000 --- a/files/de/web/css/margin-top/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/margin/index.html b/files/de/web/css/margin/index.html deleted file mode 100644 index f15d93098f7afc..00000000000000 --- a/files/de/web/css/margin/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: margin -slug: Web/CSS/margin -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -

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

- diff --git a/files/de/web/css/mask-origin/index.html b/files/de/web/css/mask-origin/index.html deleted file mode 100644 index 8da60f1b16e3f3..00000000000000 --- a/files/de/web/css/mask-origin/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: '-webkit-mask-origin' -slug: Web/CSS/mask-origin -tags: - - CSS - - Referenz -translation_of: Web/CSS/mask-origin -translation_of_original: Web/CSS/-webkit-mask-origin -original_slug: Web/CSS/-webkit-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

- -{{Compat}} - -

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/mask-repeat/index.html b/files/de/web/css/mask-repeat/index.html deleted file mode 100644 index 88145e96215d7f..00000000000000 --- a/files/de/web/css/mask-repeat/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: '-webkit-mask-repeat' -slug: Web/CSS/mask-repeat -tags: - - CSS -translation_of: Web/CSS/mask-repeat -translation_of_original: Web/CSS/-webkit-mask-repeat -original_slug: Web/CSS/-webkit-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

- -{{Compat}} - -

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/mask/index.html b/files/de/web/css/mask/index.html deleted file mode 100644 index 045ec1846adc09..00000000000000 --- a/files/de/web/css/mask/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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 deleted file mode 100644 index 97643f700fd3cb..00000000000000 --- a/files/de/web/css/max-height/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -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 deleted file mode 100644 index cf1d429cd89501..00000000000000 --- a/files/de/web/css/max-width/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html deleted file mode 100644 index 7010034feadb4f..00000000000000 --- a/files/de/web/css/media_queries/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Media_Queries -tags: - - CSS - - Media Queries - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/Media_Queries ---- -
-
-
-
{{CSSRef}}
- -

Mit Media Queries können Sie Ihre Website oder App abhängig vom Vorhandensein oder Wert verschiedener Geräteeigenschaften und Parameter anpassen.

- -

Sie sind eine Schlüsselkomponente des responsiven Designs. Eine Media Query kann zum Beispiel die Schriftgröße auf kleinen Geräten verkleinern, den Abstand zwischen Absätzen vergrößern, wenn eine Seite im Hochformat angezeigt wird, oder die Größe von Schaltflächen auf Touchscreens erhöhen.

- -

Verwenden Sie in CSS die @-Regeln {{cssxref("@media")}}, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Verwenden Sie {{cssxref("@import")}}, um ein ganzes Stylesheet bedingt anzuwenden.

- -

Media Queries in HTML

- -

In HTML können Media-Queries auf verschiedene Elemente angewendet werden:

- -
    -
  • Im {{HTMLElement("link")}}-Attribut des {{htmlattrxref("media", "link")}}-Elements definieren sie das Medium, auf das eine verlinkte Ressource (typischerweise CSS) angewendet werden soll.
    • -
  • Im {{HTMLElement("source")}}-Attribut des {{htmlattrxref("media", "source")}}-Elements definieren sie die Medien, auf die diese Quelle angewendet werden soll. (Dies ist nur innerhalb von {{HTMLElement("Bild")}}-Elementen gültig.)
    • -
  • Im {{HTMLElement("style")}}-Attribut des Elements {{htmlattrxref("media", "style")}} definieren sie die Medien, auf die der Stil angewendet werden soll.
    • -
- -

Media Queries in JavaScript

- -

In JavaScript können Sie die Methode {{domxref("Window.matchMedia()")}} verwenden, um das Fenster gegen eine Medienabfrage zu testen. Sie können auch {{domxref("MediaQueryList.addListener()")}} verwenden, um benachrichtigt zu werden, wenn sich der Zustand einer Abfrage ändert. Mit dieser Funktionalität kann Ihre Website oder App auf Änderungen der Gerätekonfiguration, der Ausrichtung oder des Zustands reagieren.

- -

Mehr über die programmatische Verwendung von Media Queries erfahren Sie in Media Queries testen.

- -

Referenz

- -

@-Regeln

- -
-
    -
  • {{cssxref("@import")}}
    • -
  • {{cssxref("@media")}}
    • -
-
- -

Anleitung

- -
-
Media Queries verwenden
-
Stellt Media Queries, ihre Syntax und die Operatoren und Media Features vor, die zur Konstruktion von Media Query-Ausdrücken verwendet werden.
-
Media Queries programmatisch testen
-
Beschreibt, wie Sie Media Queries in Ihrem JavaScript-Code verwenden, um den Zustand eines Geräts zu ermitteln und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder die Größe des Browsers ändert).
-
Verwendung von Media Queries für Barrierefreiheit
-
Erfahren Sie, wie Media Queries dem Benutzer helfen können, Ihre Website besser zu verstehen.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}}
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}}
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
- -

Siehe auch

- -
    -
  • Verwenden Sie {{cssxref("@supports")}}, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.
    • -
-
-
-
diff --git a/files/de/web/css/min-height/index.html b/files/de/web/css/min-height/index.html deleted file mode 100644 index b2d558cd163cbb..00000000000000 --- a/files/de/web/css/min-height/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/min-width/index.html b/files/de/web/css/min-width/index.html deleted file mode 100644 index 5cf468e1f52f52..00000000000000 --- a/files/de/web/css/min-width/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/mix-blend-mode/index.html b/files/de/web/css/mix-blend-mode/index.html deleted file mode 100644 index 25a4d1390efb97..00000000000000 --- a/files/de/web/css/mix-blend-mode/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -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/mozilla_extensions/index.html b/files/de/web/css/mozilla_extensions/index.html deleted file mode 100644 index 1e849df2916bd5..00000000000000 --- a/files/de/web/css/mozilla_extensions/index.html +++ /dev/null @@ -1,661 +0,0 @@ ---- -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
    • -
  • -moz-win-borderless-glass
    • -
  • -moz-win-browsertabbar-toolbox
    • -
  • -moz-win-communications-toolbox
    • -
  • -moz-win-glass
    • -
  • -moz-win-media-toolbox
    • -
  • -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
    • -
  • -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
    • -
  • -moz-fit-content
    • -
  • -moz-max-content
    • -
  • -moz-available
    • -
-
- -

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)")}}
    • -
  • {{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)")}}
    • -
  • {{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/number/index.html b/files/de/web/css/number/index.html deleted file mode 100644 index 8da756e1ffa86f..00000000000000 --- a/files/de/web/css/number/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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 deleted file mode 100644 index 3d169acfe4940c..00000000000000 --- a/files/de/web/css/object-fit/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -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/opacity/index.html b/files/de/web/css/opacity/index.html deleted file mode 100644 index ed4993e9fd0320..00000000000000 --- a/files/de/web/css/opacity/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -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 deleted file mode 100644 index 47fdd5da76df57..00000000000000 --- a/files/de/web/css/order/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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 deleted file mode 100644 index 1e5d316fd160b2..00000000000000 --- a/files/de/web/css/orphans/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -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 deleted file mode 100644 index a7aaffeec6b942..00000000000000 --- a/files/de/web/css/outline-color/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index f287405131215e..00000000000000 --- a/files/de/web/css/outline/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -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-wrap/index.html b/files/de/web/css/overflow-wrap/index.html deleted file mode 100644 index 6014e1f3e1bcdc..00000000000000 --- a/files/de/web/css/overflow-wrap/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: word-wrap -slug: Web/CSS/overflow-wrap -tags: - - CSS - - CSS Eigenschaft - - NeedsLiveSample - - Referenz -translation_of: Web/CSS/overflow-wrap -original_slug: Web/CSS/word-wrap ---- -
{{CSSRef}}
- -

Übersicht

- -

Die word-wrap Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.

- -
Hinweis: Die ursprünglich (unprefixed) proprietäre Erweiterung word-wrap von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in {{cssxref("overflow-wrap")}} umbenannt. word-wrap wird jetzt als "alternativer Name" für overflow-wrap angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.
- -

{{cssinfo}}

- -

Syntax

- -
/* Keyword values */
-word-wrap: normal;
-word-wrap: break-word;
-
-/* Global values */
-word-wrap: inherit;
-word-wrap: initial;
-word-wrap: unset;
-
- -

Werte

- -
-
normal
-
Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.
-
break-word
-
Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.
-
- -

Formale Syntax

- -{{csssyntax}} - -

Beispiele

- -
p { width: 13em; background: gold; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -
p { width: 13em; background: gold; word-wrap: break-word; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusBemerkung
{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}{{ Spec2('CSS3 Text') }}Initiale Definition
- -

Webbrowserkompatibilität

- -{{Compat("css.properties.overflow-wrap")}} - -

Siehe auch

- -
    -
  • {{cssxref("word-break")}}
    • -
diff --git a/files/de/web/css/overflow/index.html b/files/de/web/css/overflow/index.html deleted file mode 100644 index 0ee0fdc043a7df..00000000000000 --- a/files/de/web/css/overflow/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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")}} -
diff --git a/files/de/web/css/overscroll-behavior-y/index.html b/files/de/web/css/overscroll-behavior-y/index.html deleted file mode 100644 index 3c7f5fa4fe3f5a..00000000000000 --- a/files/de/web/css/overscroll-behavior-y/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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 deleted file mode 100644 index 804bd480582adc..00000000000000 --- a/files/de/web/css/overscroll-behavior/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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 deleted file mode 100644 index ad6950b9988e8f..00000000000000 --- a/files/de/web/css/padding-bottom/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/padding-left/index.html b/files/de/web/css/padding-left/index.html deleted file mode 100644 index 62d32fa89604db..00000000000000 --- a/files/de/web/css/padding-left/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/padding-right/index.html b/files/de/web/css/padding-right/index.html deleted file mode 100644 index 3ba5174069805b..00000000000000 --- a/files/de/web/css/padding-right/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/padding-top/index.html b/files/de/web/css/padding-top/index.html deleted file mode 100644 index 654276d9a7207a..00000000000000 --- a/files/de/web/css/padding-top/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/padding/index.html b/files/de/web/css/padding/index.html deleted file mode 100644 index 96406d02997b5e..00000000000000 --- a/files/de/web/css/padding/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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 deleted file mode 100644 index 0beefe0114baaa..00000000000000 --- a/files/de/web/css/page-break-after/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/page-break-before/index.html b/files/de/web/css/page-break-before/index.html deleted file mode 100644 index 3700628e2738e9..00000000000000 --- a/files/de/web/css/page-break-before/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- diff --git a/files/de/web/css/page-break-inside/index.html b/files/de/web/css/page-break-inside/index.html deleted file mode 100644 index 9b5e7633f9b510..00000000000000 --- a/files/de/web/css/page-break-inside/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/paged_media/index.html b/files/de/web/css/paged_media/index.html deleted file mode 100644 index 1a9fafe9cf3393..00000000000000 --- a/files/de/web/css/paged_media/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -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 deleted file mode 100644 index 3ba742b5da9f21..00000000000000 --- a/files/de/web/css/percentage/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -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 deleted file mode 100644 index d89a1b52501d00..00000000000000 --- a/files/de/web/css/pointer-events/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -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

- -{{Compat}} - -

[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 deleted file mode 100644 index 8289cd255c5181..00000000000000 --- a/files/de/web/css/position/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/position_value/index.html b/files/de/web/css/position_value/index.html deleted file mode 100644 index 6ed01c98ab80f3..00000000000000 --- a/files/de/web/css/position_value/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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/print-color-adjust/index.html b/files/de/web/css/print-color-adjust/index.html deleted file mode 100644 index ebd2a649ece29c..00000000000000 --- a/files/de/web/css/print-color-adjust/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: '-webkit-print-color-adjust' -slug: Web/CSS/print-color-adjust -tags: - - CSS - - CSS Eigenschaft - - Layout - - NeedsExample - - Non-standard - - Web -translation_of: Web/CSS/-webkit-print-color-adjust -original_slug: 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

- -{{Compat}} - -

[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

- -
    -
  • WebKit Bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
    • -
  • CSSWG Wiki: "print-backgrounds" - Ein Vorschlag diese Eigenschaft zu standardisieren
    • -
  • CSS Color Module Level 4: die color-adjust Eigenschaft - ein neuerer Vorschlag, diese Eigenschaft zu standardisieren
    • -
diff --git a/files/de/web/css/pseudo-classes/index.html b/files/de/web/css/pseudo-classes/index.html deleted file mode 100644 index 91d7eb64693ff0..00000000000000 --- a/files/de/web/css/pseudo-classes/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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 deleted file mode 100644 index 6ed3ad504088c2..00000000000000 --- a/files/de/web/css/pseudo-elements/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 deleted file mode 100644 index 72fa3c0c27fb0d..00000000000000 --- a/files/de/web/css/quotes/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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 deleted file mode 100644 index 5402cdfe9753ef..00000000000000 --- a/files/de/web/css/ratio/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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/reference/index.html b/files/de/web/css/reference/index.html deleted file mode 100644 index 95d9f2922676d5..00000000000000 --- a/files/de/web/css/reference/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: CSS Referenz -slug: Web/CSS/Reference -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/Reference -original_slug: Web/CSS/CSS_Referenz ---- -
{{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/replaced_element/index.html b/files/de/web/css/replaced_element/index.html deleted file mode 100644 index 8a31e400cf24e2..00000000000000 --- a/files/de/web/css/replaced_element/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Ersetztes Element -slug: Web/CSS/Replaced_element -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/Replaced_element -original_slug: Web/CSS/ersetztes_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

- - diff --git a/files/de/web/css/resize/index.html b/files/de/web/css/resize/index.html deleted file mode 100644 index d719a097c9e32d..00000000000000 --- a/files/de/web/css/resize/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -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 */
-}
- -
- -
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 deleted file mode 100644 index 14e3cb2c5ddf6e..00000000000000 --- a/files/de/web/css/resolution/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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

- -{{Compat}} - -

[*] 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 deleted file mode 100644 index d5f44a8f8d4b48..00000000000000 --- a/files/de/web/css/right/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -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 deleted file mode 100644 index 8a251f5ec4627f..00000000000000 --- a/files/de/web/css/row-gap/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -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 deleted file mode 100644 index 71813f6c2acb59..00000000000000 --- a/files/de/web/css/ruby-align/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -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 deleted file mode 100644 index 7b328df6603a9b..00000000000000 --- a/files/de/web/css/scroll-behavior/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -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 deleted file mode 100644 index b186d495aa83d2..00000000000000 --- a/files/de/web/css/shape/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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/specificity/index.html b/files/de/web/css/specificity/index.html deleted file mode 100644 index 51386680f0eb9c..00000000000000 --- a/files/de/web/css/specificity/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Spezifität -slug: Web/CSS/Specificity -tags: - - Beispiel - - CSS - - Guide - - Web -translation_of: Web/CSS/Specificity -original_slug: Web/CSS/Spezifität ---- -
{{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 deleted file mode 100644 index 9918c42d77378a..00000000000000 --- a/files/de/web/css/string/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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 deleted file mode 100644 index 59a59a2ba8b94c..00000000000000 --- a/files/de/web/css/tab-size/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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 deleted file mode 100644 index 75ac4f4508fad5..00000000000000 --- a/files/de/web/css/table-layout/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -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/text-align-last/index.html b/files/de/web/css/text-align-last/index.html deleted file mode 100644 index a005f5fafe997b..00000000000000 --- a/files/de/web/css/text-align-last/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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 deleted file mode 100644 index fdd405e7c20dbf..00000000000000 --- a/files/de/web/css/text-align/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -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 deleted file mode 100644 index 0d4864c2e9d7ef..00000000000000 --- a/files/de/web/css/text-decoration-color/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- -{{Compat}} diff --git a/files/de/web/css/text-decoration-line/index.html b/files/de/web/css/text-decoration-line/index.html deleted file mode 100644 index 1b7ee64ba31e81..00000000000000 --- a/files/de/web/css/text-decoration-line/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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

- -{{csssyntax("/de/docs/CSS/Wertdefinitionssyntax")}} - -
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 deleted file mode 100644 index 51217d2e465981..00000000000000 --- a/files/de/web/css/text-decoration/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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 deleted file mode 100644 index a97ef22d1ec709..00000000000000 --- a/files/de/web/css/text-indent/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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 deleted file mode 100644 index f0d0e6962750dd..00000000000000 --- a/files/de/web/css/text-justify/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -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 deleted file mode 100644 index 5090774eaddd2d..00000000000000 --- a/files/de/web/css/text-overflow/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -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 deleted file mode 100644 index 29d67790caf090..00000000000000 --- a/files/de/web/css/text-rendering/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -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 deleted file mode 100644 index 780d377e747eaa..00000000000000 --- a/files/de/web/css/text-shadow/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -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 deleted file mode 100644 index c47eaf90dfb03e..00000000000000 --- a/files/de/web/css/text-transform/index.html +++ /dev/null @@ -1,328 +0,0 @@ ---- -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

- -{{csssyntax("/en-US/docs/CSS/Value_definition_syntax")}} - -
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

- -{{Compat}} - -

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 deleted file mode 100644 index 93256adb5d471a..00000000000000 --- a/files/de/web/css/text-underline-position/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -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 deleted file mode 100644 index e8e0f07a888827..00000000000000 --- a/files/de/web/css/time/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: